vscode+gulp Complete Steps for Easy Applet Development
- 2021-08-31 07:07:31
- OfStack
Using gulp + vscode to develop a small program, built-in expansion of 1 series of wx global api methods, support user-defined configuration of the corresponding information and alias issues
Installation method:
# Global installation
npm install -g wechat-mini-gulp
# Running in the root directory of the current applet
wechat-gulp run init
# Install dependencies
npm install
Run
# Development environment
npm run gulpdev
# Formal environment
npm run gulpbuild
# Test environment
npm run gulptest
# Empty console
npm run gulpclean
# Synchronization routerConfig
npm run gulpsync
Project catalog
Root directory
gulp//gulp Task Pack
-pageTemplate//Page template file
--cleanplugIn//Empty the console-gulp plug-in
INTERNATIONS-changeEnvMode. js//Modify environment variables
→-config. js//Configuration
→ ─ ─ createdWechatFile. js//Add ybf. js Automatic Synchronization
→ createdYbfcss. js//Compile scss
→ createdYbftsbuild. js//Compile ts
→ createYbfPageTask. js//Compile ybf. js
→-env. js//Environment variables
→ gulpCleanConsole. js//Empty console-Task Queue
The-synsPages. js//Synchronize pages under app. json, and can handle routing permissions later
INTRODUCTION-utils. js//Tool method
gulpfile. js//gulp task item
package. json//npm Dependence
toulPlugins//Expand applet routing method, entity method, etc.
-extendPage//Extended Page Approach
-extendWxApi//Extend wx built-in method
-index//Export files under plugins
-routerHandle//Forged vue-router, proxy wx built-in jump method
routesConfig//Fake vue-routes, which routes the current applet page
Use a global approach
Introduced under app. js
// Import extension method
import './toulPlugins/index'
Built-in provides global wx methods
Get run variables
This file is located at/gulp/env. js, exporting env
api routing method
The WeChat method is encapsulated twice, and the corresponding query and params writing methods are expanded
wx.$router.push // Similar vue Adj. vue.router.push
wx.$router.replace // Similar vue Adj. vue.router.replace
wx.$router.switchTab // Corresponding to WeChat tab Component's switchTab Method
The wx. $router. push and wx. $router. replace methods both support passed-in parameter objects or strings, as follows
// Parameter is a string
wx.$router.push('/pages/index/index')
// Parameter is an object
wx.$router.push({
url: '/pages/index/index',
params: {},
query: {}
events: {} // Corresponding to the distribution event of WeChat
})
With the above method, the passed query can be obtained through this.__query, and the passed params can be obtained through this._params
// This writing also supports this.__params
wx.$router.push('/pages/index/index?id=1')
Special attention:! ! ! ! ! !
If you need to share in the project, you need to get the incoming parameters in onLoad separately. See the details
WeChat applet page routing (developers.weixin.qq.com/miniprogram …)
Because the shared code is not processed by the wx. $router. xxx method
wxml Page Routing Method
Extended to call the $toPage method directly on the wxml page, and can call wx. $router. xxx directly.
You need to pass in the corresponding data-xxx on the label
data-url Routing Address Need to Jump
data-totype jump method, supporting:
redirect or replace switchTab reLaunch push DefaultThe specific use is as follows
<view catch:tap="$goPage" data-url="/pages/mine/order/index?userType=isC&orderStatus=4" data-totype="push"></view>
Upload pictures
// pages.js
// Call chooseImage After that, return to the historical path
wx.$wxUploadFile(tempFilePaths[0]).then(obj => {})
// Upload pictures
wx.$wxUploadFile = (imageUrl) => {
}
Throttling function
wx.$YBFThrottle = (cb, delay = 300) => {
const nowPage = wx.$getNowPage()
if (!nowPage.isCanClick) return
nowPage.isCanClick = false
cb && cb()
setTimeout(() => {
nowPage.isCanClick = true
}, delay)
}
Global route interception processing
// /toulPlugins/extendWxApi.js
// Before the route enters
wx.$beforeRouter = (from, to, next) => {
// ...someCode
}
// After the route enters,
wx.$afterRouter = (oldRoute, toRoute) => {
// ...code
}
Get the current page information
# Development environment
npm run gulpdev
# Formal environment
npm run gulpbuild
# Test environment
npm run gulptest
# Empty console
npm run gulpclean
# Synchronization routerConfig
npm run gulpsync
0
Get the information on the previous page
// Get it up 1 Previous page data
wx.$getPrevPage = () => {
// ...code
}
Confirm pop-up window confirm
With Cancel and OK buttons
// confirm
// return promise
wx.$confirm = (options) =>{}
Modal frame toast
# Development environment
npm run gulpdev
# Formal environment
npm run gulpbuild
# Test environment
npm run gulptest
# Empty console
npm run gulpclean
# Synchronization routerConfig
npm run gulpsync
3
Copy copy
# Development environment
npm run gulpdev
# Formal environment
npm run gulpbuild
# Test environment
npm run gulptest
# Empty console
npm run gulpclean
# Synchronization routerConfig
npm run gulpsync
4
once function
# Development environment
npm run gulpdev
# Formal environment
npm run gulpbuild
# Test environment
npm run gulptest
# Empty console
npm run gulpclean
# Synchronization routerConfig
npm run gulpsync
5
Default configuration
File at: gulp/config. js distance
You can also extend the configuration by yourself. You need to add gulpconfig. js files in the root directory of the project and make changes
# Development environment
npm run gulpdev
# Formal environment
npm run gulpbuild
# Test environment
npm run gulptest
# Empty console
npm run gulpclean
# Synchronization routerConfig
npm run gulpsync
6
routesConfig Configuration
This file is mainly configured to configure wx. $beforeRouter and wx. $afterRouter
The file is located in./toulPlugins/routesConfig. js
For example:
export default [
{
path: 'pages/index/index' // app.json Corresponding pages Path under
meta: {
noPage: true // Prompt The page has not been developed yet
}
}
]
Explanation of Gulp file
Under/gulp
Environment variable
Realize small program to webpack development, and automatically compile api environment
// changeEnvMode.js
// Manual change /config/env.ts File, default mode=dev And execute ts Compile
function changeEnvMode(mode) {
// ...somecode
buildTypeScript({})
}
The effect of this file greatly improves the adjustment of api and prevents developers from commenting and closing related code
Listen to ybf. js to generate index. js
# Development environment
npm run gulpdev
# Formal environment
npm run gulpbuild
# Test environment
npm run gulptest
# Empty console
npm run gulpclean
# Synchronization routerConfig
npm run gulpsync
9
Listen to scss file to generate index. wxss
// createdYbfcss.js
// This function supports px Turn rpx Supporting files @ Introduce and support monitoring component And pages Files under index.scss That generates the corresponding index.scss
function createdYbfcss(event) {
// ...somecode
}
Listen to the ts file to generate the corresponding js
// buildTypeScript.js
// Listening for all ts Documents, changes 1 A ts File, all ts Files will be compiled automatically
function buildTypeScript(event) {
// ...somecode
}
Delete console. log where the file exists
// gulpCleanConsole.js
function gulpCleanConsole() {
// ...somecode
}
Listen for the new ybf. js file (this file is the focus)
// createdWechatFile.js
// Eavesdropping pages Of all files under ybf.js Build, if the build creates wxss,wxml,scss,ybf.js,json Documents
function generateFile(event) {
generateJson()
generateRoute()
}
// Toward app.json Inside the file pages Add new page routing under
function generateJson(pageUrl) {
}
// Toward /toulPlugins/routesConfig.js Do route synchronization
function generateRoute(pageUrl) {}
When you need to create a new applet page, when you add ybf. js file in the corresponding folder, you will create the corresponding applet file and route
pages Synchronizing app. json
// synsPages.js
// This file is for synchronization only app.json Under pages Object, route interception configuration for later expansion, and other issues
function syncPage() {}
Welcome to star and pr
github Address: github. com/popup-jie/w …
Summarize