vscode+gulp轻松开发小程序的完整步骤


Posted in Javascript onOctober 18, 2020

利用 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开发小程序内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
js数组操作常用方法
May 08 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
详解webpack babel的配置
Jan 09 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 #Javascript
vue自定义树状结构图的实现方法
Oct 18 #Javascript
axios封装与传参示例详解
Oct 18 #Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 #Javascript
js中复选框的取值及赋值示例详解
Oct 18 #Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 #Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 #Javascript
You might like
一段防盗连的PHP代码
2006/12/06 PHP
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
php操作xml
2013/10/27 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
浅谈PHP的反射机制
2016/12/15 PHP
PDO::_construct讲解
2019/01/27 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
JS中style属性
2006/10/11 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
Python中数字以及算数运算符的相关使用
2015/10/12 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
Python 求向量的余弦值操作
2021/03/04 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
大学生职业生涯规划范文
2013/12/31 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
人民检察院起诉书
2015/05/20 职场文书
2016春节放假通知范文
2015/08/18 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python