WeChat applet development: workflow built on Gulp
Currently, when developing WeChat mini programs, there are roughly four available technical solutions, namely: native development of WeChat mini programs, using the wepy framework, using the mpvue framework, and using the taro framework
will be continuously updated. thank you for your support.
WeChat applet development workflow based on Gulp
Applicable scenarios
Three development options, each with its own advantages and disadvantages. Using third-party framework development, you can enjoy the development convenience brought by the framework, but for the many new features and functions of the mini program, such as WXS module, custom components and Plug-ins , etc. are restricted by third-party frameworks and cannot be used.
The development model of native small programs is too simple. In terms of style, students who are used to writing less, stylus and sass will not be able to tolerate the writing method of wxss. Based on this, I decided to use gulp is an automated tool to build a set of basic templates for WeChat applet development. On the basis of fully retaining the functions and characteristics of WeChat applet, you can also use less
to write styles and add image compression. , command line to quickly create templates and other features, so developed, happy, happy!
github行
Features
WeChat applet project built based on
gulp less
Automatic compression of project images
ESLint code inspection
Use the command line to quickly create
page
,template
andcomponent
Getting Started
0. Before starting, please make sure that node and npm have been installed and installed globally. gulp-cli
1 |
|
1. Download the code
1 |
|
2. Enter the directory and install the dependencies
1 |
|
3. Compile the code, generate the dist directory, and use the developer tools to open the dist Directory
1 |
|
4. Create a new page, template or component
1 2 3 4 |
|
5. Compile before uploading the code
1 |
|
6. Upload the code, review and release
Project Structure
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
Gulp Description
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
Q&A
Q: Why are js conversion, style completion and code compression not added to the workflow?
A: WeChat developer tools come with functions such as babel converting ES6 to ES5, style completion, and js code compression. No additional additions are required in this workflow.
Q: What are the uses of the files in the _template
directory?
A: Use the gulp auto
command to automatically generate files. The -s
parameter can specify the copy object. By default, it is the folder in the corresponding directory. The files in _template
are copy objects. Developers can customize files under _template
based on business needs.
Q: Will the files in the _template
directory be compiled into the dist
directory?
A: No.
TODO
[x] Code comments
- ##[x] Standard command line usage
- [x] eslint
- [ ] Introduce commonly used CSS libraries, such as weui and the like
Practical Tutorial on WeChat Mini Program Development: Developing Running WeChat Mini Program
WeChat Mini Program Development
Video: Video tutorial on developing WeChat mini programs
The above is the detailed content of WeChat applet development: workflow built on Gulp. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

1. WeChat is a social platform that pays attention to privacy protection. Users cannot see who has visited their Moments or personal homepage. 2. This design is intended to protect user privacy and avoid potential harassment or snooping. 3. Users can only see the likes and comments records in their circle of friends, further ensuring the confidentiality of personal information.

Thanks to netizens Qing Qiechensi, HH_KK, Satomi Ishihara and Wu Yanzu of South China for submitting clues! According to news on September 2, there are recent rumors that "iPhone 16 may not support WeChat." In response to this, a reporter from Shell Finance called Apple's official hotline. Apple's technical consultant in China responded that whether iOS systems or Apple devices can continue to use WeChat, and WeChat The issue of whether it can continue to be listed and downloaded on the Apple App Store requires communication and discussion between Apple and Tencent to determine the future situation. Software App Store and WeChat Problem Description Software App Store technical consultant pointed out that developers may need to pay fees to put software on the Apple Store. After reaching a certain number of downloads, Apple will need to pay corresponding fees for subsequent downloads. Apple is actively communicating with Tencent,

DeepSeek: A powerful AI image generation tool! DeepSeek itself is not an image generation tool, but its powerful core technology provides underlying support for many AI painting tools. Want to know how to use DeepSeek to generate images indirectly? Please continue reading! Generate images with DeepSeek-based AI tools: The following steps will guide you to use these tools: Launch the AI Painting Tool: Search and open a DeepSeek-based AI Painting Tool (for example, search "Simple AI"). Select the drawing mode: select "AI Drawing" or similar function, and select the image type according to your needs, such as "Anime Avatar", "Landscape"

1. To recover deleted WeChat chat history, you need to use two mobile phones for data migration. 2. On the old phone, click [Me] → [Settings] → [Chat] → [Chat History Migration and Backup]. 3. Select [Migrate] and set the target device platform. After selecting the chat history to be restored, click [Start]. 4. Then log in to the same account on the new phone and scan the QR code on the old phone to start the migration. 5. After the migration is completed, the deleted chat history will be restored to the new phone.

1. WeChat Lingqiantong adopts a multi-layer security mechanism, including password protection, real-name authentication, mobile phone binding, etc., to ensure the security of user accounts. 2. WeChat Pay uses a variety of encryption methods, including SSL encrypted transmission, real-time monitoring, etc., to ensure transaction security. 3. WeChat Pay also cooperates with banks and financial institutions to implement risk control and prevention measures to monitor and handle abnormal transactions. 4. When using WeChat Lingqiantong, users should also strengthen the protection of personal accounts, set complex passwords, change passwords regularly, and not disclose personal information at will.

1. Open the WeChat app, click [Me] at the bottom of the interface, and select the [Settings] function. 2. Click [Chat], click [Chat Background] to enter the chat background setting interface. 3. Click [Select Background Image] or [Select from Album] or [Take a Photo]. 4. Select and click the picture you want to use, and then click [Use] in the upper right corner.

1. On the old device, click "Me" → "Settings" → "Chat" → "Chat History Migration and Backup" → "Migrate". 2. Select the target platform device to be migrated, select the chat records to be migrated, and click "Start". 3. Log in with the same WeChat account on the new device and scan the QR code to start chat record migration.

1. Open the WeChat app, click [Address Book] at the bottom of the interface, and click [New Friend]. 2. Enter the friend’s WeChat ID or nickname in the search box at the top of the page. 3. If the other party has not deleted the user, the user can find the friend in the search results. 4. Click on the friend to enter the chat window with him or her, and you can view the previous chat history.
