利用 gulp+vscode 來開發小程式的一個小工具，內建擴充套件了一系列的 wx 全域性api方法，支援自定義配置相對應的資訊和別名等問題

安裝方法：

# 全域性安裝
npm install -g wechat-mini-gulp
# 當前小程式根目錄下執行
wechat-gulp run init
# 安裝依賴
npm install

執行

#開發環境
npm run gulpdev
#正式環境
npm run gulpbuild
# 測試環境
npm run gulptest
# 清空console
npm run gulpclean
# 同步routerConfig
npm run gulpsync

專案目錄

根目錄
├── gulp // gulp任務包
| |—— pageTemplate // 頁面模板檔案
| |—— cleanplugIn // 清空console-gulp外掛
│ ├── changeEnvMode.js // 修改環境變數
│ ├── config.js // 配置
│ ├── createdWechatFile.js // 新增ybf.js自動同步
│ ├── createdYbfcss.js // 編譯scss
│ ├── createdYbftsbuild.js // 編譯ts
│ ├── createYbfPageTask.js // 編譯ybf.js
│ ├── env.js // 環境變數

│ ├── gulpCleanConsole.js // 清空console-任務佇列
│ └── synsPages.js // 同步app.json下的pages，後期可以處理路由許可權
│ └── utils.js // 工具方法
├── gulpfile.js // gulp任務項
├── package.json // npm依賴
└── toulPlugins // 擴充套件小程式路由方法，實體方法等
|—— extendPage // 擴充套件頁面方法
|—— extendWxApi // 擴充套件wx內建方法
|—— index // 匯出plugins下檔案
|—— routerHandle // 偽造vue-router，代理wx內建跳轉方法

└── routesConfig // 偽造vue-routes，裡面為當前小程式頁面路由

使用全域性方法

在app.js下面引入

// 匯入擴充套件方法
import './toulPlugins/index'

內建提供全域性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 方法都支援傳入的引數物件或者字串，如下

// 引數是字串
wx.$router.push('/pages/index/index')

// 引數是物件
wx.$router.push({
 url: '/pages/index/index',params: {},query: {}
 events: {} // 對應微信的派發事件
})

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

// 這種寫法也支援 this.__params
wx.$router.push('/pages/index/index?id=1')

特別注意：!!!!!!

如果專案中需要進行分享處理，需要單獨在 onLoad 拿到傳入的引數，具體詳情看

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

因為分享進來的程式碼，並沒有經過 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) => {
}

節流函式

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
}

獲取當前頁面資訊

// 拿到當前頁面資料
wx.$getNowPage = () => {
 // ...code
}

獲取上一頁資訊

// 拿到上一前頁面資料
wx.$getPrevPage = () => {
 // ...code
}

確認彈窗confirm

帶取消和確定按鈕

// confirm 
// return promise
wx.$confirm = (options) =>{}

模態框toast

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

複製copy

// return void
wx.$copy = (msg) => {}

once函式

wx.$once(fn)

預設配置

檔案位於： gulp/config.js 距離

也可以自己擴充套件配置，需要在專案根目錄下，新增 gulpconfig.js 檔案，在進行更改

// gulpconfig.js

// 以下資訊為內建預設配置
module.exports = {
 // 路徑別名
 alisa: {
 '@plugins': "./plugins",'@scss': './scss','@utils': './utils','@api': './api','@config': './config','@images': './images'
 },// 需要編譯的別名js檔案，本工具預設監聽ybf.js
 buildJsUrl: ['./pages/**/ybf.js'],// 這裡建議寫好檔案的路徑，方便gulp減少檔案的監聽
 
 // 需要編譯的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 // 提示 頁面暫未開發
 }
 }
]

Gulp檔案講解

位於 /gulp 下

環境變數

實現小程式向webpack開發一樣，自動編譯api環境

// changeEnvMode.js
// 手動改變 /config/env.ts檔案，預設mode=dev 並執行ts編譯
function changeEnvMode(mode) {
 // ...somecode
 buildTypeScript({})
}

此檔案的作用大大提高了api的調整，避免開發人員進行 註釋關閉 相關程式碼

監聽ybf.js生成index.js

// createYbfPageTask.js
// 監聽ybf檔案，解決檔案@引入,只支援監聽/pages目錄下，並生成相對應的index.js，
function createYbfPageTask(event) {
 // ...somecode 
}

監聽scss檔案生成index.wxss

// createdYbfcss.js
// 該函式支援px轉rpx 支援檔案@引入，支援監聽component和pages下的檔案index.scss，生成相對應的index.scss
function createdYbfcss(event) {
 // ...somecode 
}

監聽ts檔案生成相對應的js

// buildTypeScript.js
// 監聽當前目錄下所有ts檔案，改動一個ts檔案後，所有ts檔案都會自動編譯
function buildTypeScript(event) {
 // ...somecode 
}

刪除檔案存在的console.log

// gulpCleanConsole.js
function gulpCleanConsole() {
 // ...somecode
}

監聽新建ybf.js檔案(此檔案是重點)

// createdWechatFile.js
// 監聽pages下所有檔案的ybf.js生成，如果生成建立wxss,wxml,scss,ybf.js,json檔案
function generateFile(event) {
 
 generateJson()
 generateRoute()
}
// 向app.json檔案內部pages下新增頁面路由
function generateJson(pageUrl) { 
}
// 向/toulPlugins/routesConfig.js做路由同步
function generateRoute(pageUrl) {}

在需要新建 小程式page 的時候，在相對應資料夾下，新增 ybf.js 檔案就會新增建立相對應的小程式檔案及路由

同步app.json的pages

// synsPages.js
// 該檔案只為了同步app.json下pages物件，為了後期擴充套件進行路由攔截配置等問題
function syncPage() {}

歡迎star和pr

github地址： github.com/popup-jie/w…

總結

到此這篇關於vscode+gulp輕鬆開發小程式的文章就介紹到這了,更多相關vscode+gulp開發小程式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！