vscode+gulp Complete Steps for Easy Applet Development

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 Default

The 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