利用gulp+vscode來開發(fā)小程序的一個小工具，內(nèi)置擴展了一系列的wx全局api方法，支持自定義配置相對應的信息和別名等問題

安裝方法：

# 全局安裝
npm install -g wechat-mini-gulp
# 當前小程序根目錄下運行
wechat-gulp run init
# 安裝依賴
npm install
復制代碼

運行

#開發(fā)環(huán)境
npm run gulpdev
#正式環(huán)境
npm run gulpbuild
# 測試環(huán)境
npm run gulptest
# 清空console
npm run gulpclean
# 同步routerConfig
npm run gulpsync
復制代碼

項目目錄

根目錄
├── gulp                    // gulp任務包
|   |—— pageTemplate        // 頁面模板文件
|   |—— cleanplugIn         // 清空console-gulp插件
│   ├── changeEnvMode.js    // 修改環(huán)境變量
│   ├── config.js           // 配置
│   ├── createdWechatFile.js    // 新增ybf.js自動同步
│   ├── createdYbfcss.js        // 編譯scss
│   ├── createdYbftsbuild.js    // 編譯ts
│   ├── createYbfPageTask.js    // 編譯ybf.js
│   ├── env.js                 // 環(huán)境變量
│   ├── gulpCleanConsole.js     // 清空console-任務隊列
│   └── synsPages.js            // 同步app.json下的pages，后期可以處理路由權限
│   └── utils.js                // 工具方法
├── gulpfile.js             // gulp任務項
├── package.json            // npm依賴
└── toulPlugins                 // 擴展小程序路由方法，實體方法等
    |—— extendPage          // 擴展頁面方法
    |—— extendWxApi         // 擴展wx內(nèi)置方法
    |—— index               // 導出plugins下文件
    |—— routerHandle        // 偽造vue-router，代理wx內(nèi)置跳轉方法
    └── routesConfig        // 偽造vue-routes，里面為當前小程序頁面路由

復制代碼

使用全局方法

在app.js下面引入

// 導入擴展方法
import './toulPlugins/index'
復制代碼

內(nèi)置提供全局wx方法

獲取運行變量

該文件位于/gulp/env.js，對外導出env

api路由方法

將微信方法做了二次封裝，擴展了相對應的query和params寫法

wx.$router.push // 類似vue的vue.router.push
wx.$router.replace // 類似vue的vue.router.replace
wx.$router.switchTab  // 對應微信tab組件的switchTab方法
復制代碼

wx.$router.push和wx.$router.replace方法都支持傳入的參數(shù)對象或者字符串，如下

// 參數(shù)是字符串
wx.$router.push('/pages/index/index')

// 參數(shù)是對象
wx.$router.push({
    url: '/pages/index/index',
    params: {},
    query: {}
    events: {} // 對應微信的派發(fā)事件
})

復制代碼

上面的方法傳參，在每個頁面內(nèi)部可以通過this.__query獲取到傳過來的query，this._params獲取傳過來的params

// 這種寫法也支持 this.__params
wx.$router.push('/pages/index/index?id=1')
復制代碼

特別注意：!!!!!!

如果項目中需要進行分享處理，需要單獨在onLoad拿到傳入的參數(shù)，具體詳情看

微信小程序頁面路由(developers.weixin.qq.com/miniprogram…)

因為分享進來的代碼，并沒有經(jīng)過wx.$router.xxx方法的處理

wxml頁面路由方法

擴展了在wxml頁面上面直接調用$toPage方法，可以直接調用wx.$router.xxx，

需要在標簽上傳入相對應的data-xxx

data-url 需要跳轉的路由地址

data-totype 跳轉的方法，支持：

• redirect 或 replace
• switchTab
• reLaunch
• push 默認

具體使用如下

<view catch:tap="$goPage" data-url="/pages/mine/order/index?userType=isC&orderStatus=4" data-totype="push">view>
復制代碼

上傳圖片

// pages.js
// 調用chooseImage后，返回來歷史路徑
wx.$wxUploadFile(tempFilePaths[0]).then(obj => {})
// 上傳圖片
wx.$wxUploadFile = (imageUrl) => {
}
復制代碼

節(jié)流函數(shù)

wx.$YBFThrottle = (cb, delay = 300) => {
  const nowPage = wx.$getNowPage()
  if (!nowPage.isCanClick) return
  nowPage.isCanClick = false
  cb && cb()

  setTimeout(() => {
    nowPage.isCanClick = true
  }, delay)
}
復制代碼

全局路由攔截處理

// /toulPlugins/extendWxApi.js
// 路由進入之前
wx.$beforeRouter = (from, to, next) => {
    // ...someCode
}

// 路由進入之后
wx.$afterRouter = (oldRoute, toRoute) => {
    // ...code
}
復制代碼

獲取當前頁面信息

// 拿到當前頁面數(shù)據(jù)
wx.$getNowPage = () => {
    // ...code
}
復制代碼

獲取上一頁信息

// 拿到上一前頁面數(shù)據(jù)
wx.$getPrevPage = () => {
  // ...code
}
復制代碼

確認彈窗confirm

帶取消和確定按鈕

// confirm 
// return promise
wx.$confirm = (options) =>{}
復制代碼

模態(tài)框toast

// return promise
wx.$toast = (msg, cb) => {}
復制代碼

復制copy

// return void
wx.$copy = (msg) => {}
復制代碼

once函數(shù)

wx.$once(fn)
復制代碼

默認配置

文件位于：gulp/config.js距離

也可以自己擴展配置，需要在項目根目錄下，新增gulpconfig.js文件，在進行更改

// gulpconfig.js

// 以下信息為內(nèi)置默認配置
module.exports = {
  // 路徑別名
  alisa: {
    '@plugins': "./plugins",
    '@scss': './scss',
    '@utils': './utils',
    '@api': './api',
    '@config': './config',
    '@images': './images'
  },
  // 需要編譯的別名js文件，本工具默認監(jiān)聽ybf.js
  buildJsUrl: ['./pages/**/ybf.js'],
  // 這里建議寫好文件的路徑，方便gulp減少文件的監(jiān)聽
    
  // 需要編譯的scss文件，如果是abc.scss 則編譯成abc.scss
  buildScssUrl: ['./pages/**/*.scss', './components/**/*.scss'],
  
  // ts編譯
  buildTsUrl: ['./**/*.ts'],
  // app.json路徑 默認根目錄
  appJsonFilePath: './app.json',
  // 是否開啟ts編譯
  isTs: false
}
復制代碼

routesConfig配置

該文件主要為了配置wx.$beforeRouter和wx.$afterRouter 而配置的文件

文件位于./toulPlugins/routesConfig.js

例如：

export default [
    {
        path: 'pages/index/index' // app.json 相對應的 pages下的路徑
        meta: {
            noPage: true  // 提示 頁面暫未開發(fā)
        }
    }
]
復制代碼

Gulp文件講解

位于/gulp下

環(huán)境變量

實現(xiàn)小程序向webpack開發(fā)一樣，自動編譯api環(huán)境

// changeEnvMode.js
// 手動改變 /config/env.ts文件，默認mode=dev 并執(zhí)行ts編譯
function changeEnvMode(mode) {
    // ...somecode
    buildTypeScript({})
}
復制代碼

此文件的作用大大提高了api的調整，避免開發(fā)人員進行 注釋關閉 相關代碼

監(jiān)聽ybf.js生成index.js

// createYbfPageTask.js
// 監(jiān)聽ybf文件，解決文件@引入,只支持監(jiān)聽/pages目錄下，并生成相對應的index.js，
function createYbfPageTask(event) {
    // ...somecode 
}
復制代碼

監(jiān)聽scss文件生成index.wxss

// createdYbfcss.js
// 該函數(shù)支持px轉rpx 支持文件@引入，支持監(jiān)聽component和pages下的文件index.scss，生成相對應的index.scss
function createdYbfcss(event) {
    // ...somecode 
}
復制代碼

監(jiān)聽ts文件生成相對應的js

// buildTypeScript.js
// 監(jiān)聽當前目錄下所有ts文件，改動一個ts文件后，所有ts文件都會自動編譯
function buildTypeScript(event) {
    // ...somecode 
}
復制代碼

刪除文件存在的console.log

// gulpCleanConsole.js
function gulpCleanConsole() {
    // ...somecode
}
復制代碼

監(jiān)聽新建ybf.js文件(此文件是重點)

// createdWechatFile.js
// 監(jiān)聽pages下所有文件的ybf.js生成，如果生成創(chuàng)建wxss,wxml,scss,ybf.js,json文件
function generateFile(event) {
    
    generateJson()
    generateRoute()
}
// 向app.json文件內(nèi)部pages下新增頁面路由
function generateJson(pageUrl) {    
}
// 向/toulPlugins/routesConfig.js做路由同步
function generateRoute(pageUrl) {}
復制代碼

在需要新建小程序page的時候，在相對應文件夾下，新增ybf.js文件就會新增創(chuàng)建相對應的小程序文件及路由

同步app.json的pages

// synsPages.js
// 該文件只為了同步app.json下pages對象，為了后期擴展進行路由攔截配置等問題
function syncPage() {}