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 相关文章推荐
给Javascript数组插入一条记录的代码
Aug 30 Javascript
js中设置元素class的三种方法小结
Aug 28 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 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
下载文件的点击数回填
2006/10/09 PHP
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
PHP 组件化编程技巧
2009/06/06 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
jquery select操作的日期联动实现代码
2009/12/06 Javascript
JS 控件事件小结
2012/10/31 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
Python中的装饰器用法详解
2015/01/14 Python
python中数据库like模糊查询方式
2020/03/02 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
详解python 内存优化
2020/08/17 Python
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
50岁生日感言
2014/01/23 职场文书
《画》教学反思
2014/04/14 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
春节联欢会策划方案
2014/05/16 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
私人委托书格式
2014/09/10 职场文书
毕业典礼致辞
2015/07/29 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA