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



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"

Rumors of WeChat supporting iPhone 16 were debunked. Thanks to netizens Xi Chuang Jiu Shi and HH_KK for submitting clues! According to news on September 2, there are rumors today that WeChat may not support iPhone 16. Once the iPhone is upgraded to the iOS 18.2 system, it will not be able to use WeChat. According to "Daily Economic News", it was learned from people familiar with the matter that this rumor is a rumor. Apple's response: According to Shell Finance, Apple's technical consultant in China responded that the issue of whether WeChat can continue to be used on iOS systems or Apple devices, and whether WeChat can continue to be listed and downloaded in the Apple App Store, needs to be resolved between Apple and Tencent. Only through communication and discussion can we determine the future situation. Currently, Apple is actively communicating with Tencent to confirm whether Tencent will continue to

Gate.io, a leading cryptocurrency trading platform founded in 2013, provides Chinese users with a complete official Chinese website. The website provides a wide range of services, including spot trading, futures trading and lending, and provides special features such as Chinese interface, rich resources and community support.

The OKX trading platform offers a variety of rates, including transaction fees, withdrawal fees and financing fees. For spot transactions, transaction fees vary according to transaction volume and VIP level, and adopt the "market maker model", that is, the market charges a lower handling fee for each transaction. In addition, OKX also offers a variety of futures contracts, including currency standard contracts, USDT contracts and delivery contracts, and the fee structure of each contract is also different.

Gate.io (Sesame Open Door) is the world's leading cryptocurrency trading platform. This article provides a complete tutorial on spot trading of Gate.io. The tutorial covers steps such as account registration and login, KYC certification, fiat currency and digital currency recharge, trading pair selection, limit/market transaction orders, and orders and transaction records viewing, helping you quickly get started on the Gate.io platform for cryptocurrency trading. Whether a beginner or a veteran, you can benefit from this tutorial and easily master the Gate.io trading skills.

This article provides a detailed guide to safe download of Ouyi OKX App in China. Due to restrictions on domestic app stores, users are advised to download the App through the official website of Ouyi OKX, or use the QR code provided by the official website to scan and download. During the download process, be sure to verify the official website address, check the application permissions, perform a security scan after installation, and enable two-factor verification. During use, please abide by local laws and regulations, use a safe network environment, protect account security, be vigilant against fraud, and invest rationally. This article is for reference only and does not constitute investment advice. Digital asset transactions are at your own risk.

Gateio Exchange app download channels for old versions, covering official, third-party application markets, forum communities and other channels. It also provides download precautions to help you easily obtain old versions and solve the problems of discomfort in using new versions or device compatibility.
