wepy+vant 微信小程序开发总结

前言

本次小程序开发选择使用 wepy作为小程序第三方框架，在UI组件库方面选择的是有赞的移动端组件库Vant去快速搭建小程序应用。这次小程序功能需求并不是特别复杂，目前亲测功能基本满足。这段时间刚好工作空闲期，决定将这次开发的坑以及重要点记录下来，以备今后查阅。

全局安装wePy模块包

npm install wepy-cli -g

代码编辑用的一直还是VsCode，在VsCode编辑器里开发，然后通过开启wepy实时编译，用微信原生开发者工具实时预览与调试！

wepy build --watch

微信原生开发者工具使用注意事项

1. 在项目设置中，关闭ES6转ES5,上传代码时样式自动补全,开启不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书 。 注意：官网说，应当关闭上传代码时自动压缩混淆,否则会导致部分功能不能正常使用，但我因为在真机调试或者预览的时候，编译打包失败超出大小限制还是勾上了,以保证手机可以正常预览调试。
2. 使用微信原生开发者工具实时预览时，只需导入wepy build 后生成的build目录即可！

wepy 基本常见用法总结

1. 事件绑定

   原生的bindtap="click" 变成 @tap="click" ，catchtap="click"变成@tap.stop="click"

2. 事件传参
   原来通过自定义data-param变量 ：bindtap="click" data-index={ {index}}传参优化成：@tap="click('{ {index}}')"吃（注：传递变量需要加’ ’ 包裹）

   传递多个变量：@tap="checkedChange('{ {item.id}}', '{ {index}}')"

3. 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(