利用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() {}