vscode+gulp輕松開發(fā)小程序的完整步驟
利用 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,后期可以處理路由權(quán)限
│ └── utils.js // 工具方法
├── gulpfile.js // gulp任務項
├── package.json // npm依賴
└── toulPlugins // 擴展小程序路由方法,實體方法等
|—— extendPage // 擴展頁面方法
|—— extendWxApi // 擴展wx內(nèi)置方法
|—— index // 導出plugins下文件
|—— routerHandle // 偽造vue-router,代理wx內(nèi)置跳轉(zhuǎn)方法
└── 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 頁面上面直接調(diào)用 $toPage 方法,可以直接調(diào)用 wx.$router.xxx ,
需要在標簽上傳入相對應的 data-xxx
data-url 需要跳轉(zhuǎn)的路由地址
data-totype 跳轉(zhuǎn)的方法,支持:
- 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
// 調(diào)用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的調(diào)整,避免開發(fā)人員進行 注釋關(guān)閉 相關(guān)代碼
監(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轉(zhuǎn)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() {}
歡迎star和pr
github地址: github.com/popup-jie/w…
總結(jié)
到此這篇關(guān)于vscode+gulp輕松開發(fā)小程序的文章就介紹到這了,更多相關(guān)vscode+gulp開發(fā)小程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
knockoutjs動態(tài)加載外部的file作為component中的template數(shù)據(jù)源的實現(xiàn)方法
Knockoutjs 的Components 是一種自定義的組件,它以一種強大、簡介的方式將你自己的ui代碼組織成一種單獨的、可重用的模塊。接下來通過本文給大家介紹knockoutjs動態(tài)加載外部的file作為component中的template數(shù)據(jù)源的實現(xiàn)方法,一起看看吧2016-09-09
JavaScript 獲取 URL 中參數(shù)值的方法
本文將詳細介紹幾種在 JavaScript 中獲取 URL 參數(shù)值的方法,包括現(xiàn)代瀏覽器支持的 URLSearchParams、正則表達式解析以及自定義函數(shù)解析方案,并討論各自的優(yōu)缺點及適用場景,感興趣的朋友一起看看吧2025-04-04
基于Bootstrap實現(xiàn)城市三級聯(lián)動
這篇文章主要為大家詳細介紹了基于BootStrap實現(xiàn)城市三級聯(lián)動,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11

