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 相关文章推荐
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
js图片上传的封装代码
Aug 01 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
PHP设计模式之装饰者模式
2012/02/29 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
javascript 定义初始化数组函数
2009/09/07 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
python中__call__方法示例分析
2014/10/11 Python
python框架django基础指南
2016/09/08 Python
python实现rsa加密实例详解
2017/07/19 Python
python实现画圆功能
2018/01/25 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
softmax及python实现过程解析
2019/09/30 Python
用python批量移动文件
2021/01/14 Python
课程设计心得体会
2013/12/28 职场文书
服装店营销方案
2014/03/10 职场文书
连带责任保证书
2014/04/29 职场文书
教研活动主持词
2015/07/03 职场文书
高三生物教学反思
2016/02/22 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
MySQL 计算连续登录天数
2022/05/11 MySQL