前言
本次小程序开发选择使用 wepy作为小程序第三方框架,在UI组件库方面选择的是有赞的移动端组件库Vant去快速搭建小程序应用。这次小程序功能需求并不是特别复杂,目前亲测功能基本满足。这段时间刚好工作空闲期,决定将这次开发的坑以及重要点记录下来,以备今后查阅。
全局安装wePy模块包
npm install wepy-cli -g
代码编辑用的一直还是VsCode,在VsCode编辑器里开发,然后通过开启wepy实时编译,用微信原生开发者工具实时预览与调试!
wepy build --watch
微信原生开发者工具使用注意事项
- 在项目设置中,关闭
ES6转ES5
,上传代码时样式自动补全
,开启不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书
。 注意:官网说,应当关闭上传代码时自动压缩混淆
,否则会导致部分功能不能正常使用,但我因为在真机调试或者预览的时候,编译打包失败超出大小限制还是勾上了,以保证手机可以正常预览调试。 - 使用微信原生开发者工具实时预览时,只需导入wepy build 后生成的build目录即可!
wepy 基本常见用法总结
-
事件绑定
原生的
bindtap="click"
变成@tap="click"
,catchtap="click"
变成@tap.stop="click"
-
事件传参
原来通过自定义data-param
变量 :bindtap="click" data-index={ {index}}
传参优化成:@tap="click('{ {index}}')"
吃(注:传递变量需要加’ ’ 包裹)传递多个变量:
@tap="checkedChange('{ {item.id}}', '{ {index}}')"
-
wepy使用单文件模式,将原生的page页面的4个文件
page.js
,page.json
,page.wxml
,page.wxss
汇总成一个page.wpy
;app页面一样。以page页面为例,简述wepy优化后的页面代码结构:
<template> <view> ... 我是html部分 <view> </template> <script> import wepy from 'wepy'; import HomoloStep from '../../components/HomoloStep'; export default class PayResult extends wepy.page { config = { navigationBarBackgroundColor: '#447BC9', // 此处设置相当于page.json内容,定义页头 navigationBarTitleText: '支付结果', navigationBarTextStyle: 'white', usingComponents: { // 引入的第三方UI组件库vant 'van-button': '../../components/van/button/index' } }; // 此处注册自己封装的公共组件 components = { 'HomoloStep': HomoloStep } data = { show: false, ... }; // methods 里面只负责写页面交互相关的方法,比如:@tap... methods = { ... }; // 无交互的事件,自己写的一些初始方法挪出methos,保持于methods同级! getNotaryOffices () { } // 初始化生命周期,加载页面数据 onLoad () { this.getNotaryOffices(