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变量函数浅析
Sep 02 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
javaScript Array api梳理
Mar 31 Javascript
代码解析React中setState同步和异步问题
Jun 03 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
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
python检测服务器是否正常
2014/02/16 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
python输入错误后删除的方法
2019/10/12 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
财务管理专业毕业生求职信范文
2013/09/21 职场文书
销售工作岗位职责
2013/12/24 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
硕士学位论文评语
2014/12/31 职场文书
介绍信怎么写
2015/05/05 职场文书
单方投资意向书
2015/05/11 职场文书