前言

业务需要，被迫营业小程序，而且须要微信和支付宝两个端。因为之前没有做过小程序，所以略微调研了下最近比拟火的两款小程序跨端开发框架：uni-app 和 Taro。因为很久没有写过 vue 我的项目，所以一开始比拟偏差于应用 Taro，在参照文档搭建完框架并写了一点小 demo 之后，发现 Taro 的 api 支持性没有 uni-app 好，次要是针对支付宝，所以弃坑 Taro，转战 uni-app。当然，只做微信小程序的话，Taro 还是很棒的。

我的项目搭建

官网提供了两种疾速上手的搭建形式，我这里采纳的是第二种（参考：官网文档）。

此处我并没有依照官网抉择 Hello uni-app 模板，而是抉择了默认模板。

次要步骤：（环境装置省略）

  1. vue create -p dcloudio/uni-preset-vue my-project
  2. 抉择默认模板
  3. 集成 sass【须要留神的是版本问题，默认会装置最新版本，然而不能反对，所以要自行抉择，试了几个版本，最初用的是 sass-loader@8.0.1 node-sass@4.14.1】
  4. ui（能够抉择官网的 uni-ui 或者 uView，一开始我应用的是 uni-ui，起初换了 uView，感觉 uView 更全面更好用）
  5. 网络申请（我采纳的是他人封装好的插件 luch-request）
  6. 集成 vuex（按需采纳）

最终目录构造如下：

随着我的项目继续开发，我的项目包大小超过了微信小程序可预览的包大小限度，于是采取分包措施，uni-app 官网也有相干配置阐明：分包配置阐明
所以最终目录构造如下所示：

我的项目重难点

1. 受权（微信和支付宝）

uni-app 提供了相应的接口，然而不反对支付宝小程序，所以须要做跨端兼容，独立反对微信和支付宝小程序。跨端兼容我采纳的是官网文档中提到的条件编译。

> 跨端兼容：uni-app 文档中有阐明（[uni-app 文档](https://uniapp.dcloud.io/platform) 。

微信小程序受权流程：获取所有受权状态 ---- 如果不存在 --- 再调用受权接口 --- 如果受权胜利 --- 调用最终 API 接口

<!-- #ifdef MP-WEIXIN --><button  class="sys_btn"  open-type="getUserInfo"  @getuserinfo="appLoginWx">  微信受权登录</button><!-- #endif -->// 获取所有受权状态uni.getSetting({  success(res) {    console.log("受权：", res);    if (!res.authSetting["scope.userInfo"]) {      //这里调用受权      console.log("以后未受权");      this.appLoginWx();    } else {      //用户曾经受权过了      console.log("以后已受权");    }  },});appLoginWx() {  uni.getProvider({    service: "oauth",    success: function(res) {      console.log("res", res);      if (~res.provider.indexOf("weixin")) {        uni.login({          provider: "weixin",          success: (res2) => {            console.log("res2", res2);            uni.getUserInfo({              provider: "weixin",              success: (info) => {                console.log('info', info);                //TODO[申请接口]              },              fail: () => {                uni.showToast({ title: "微信登录受权失败", icon: "none" });              },            });          },          fail: () => {            uni.showToast({ title: "微信登录受权失败", icon: "none" });          },        });      } else {        uni.showToast({          title: "请先装置微信或降级版本",          icon: "none",        });      }    },  });},

支付宝小程序受权流程：（官网提供的时序图）

<!-- #ifdef MP-ALIPAY --><button  @getAuthorize="onGetAuthorize"  scope="userInfo"  open-type="getAuthorize"  class="login">  支付宝受权登录</button><!-- #endif -->onGetAuthorize() {  my.getAuthCode({    scopes: "auth_user", // 被动受权（弹框）：auth_user，静默受权（不弹框）：auth_base    success: (res) => {      if (res.authCode) {        console.log(app.serverUrl + "/login/" + res.authCode);        // 调用本人的服务端接口，让服务端进行后端的受权认证        my.httpRequest({          url: app.serverUrl + "/login/" + res.authCode,          method: "POST",          header: {            "content-type": "application/json",          },          dataType: "json",          success: (res) => {            // 受权胜利并且服务器端登录胜利            console.log(res);            me.setData({              userInfo: res.data.data,            });          },        });      }    },  });},
2. 领取

微信领取

// 外围代码uni.requestPayment({    provider: "wxpay",    timeStamp: timeStamp,    nonceStr: nonceStr,    package: package,    signType: signType,    paySign: paySign,    success: (res) => {      console.log("payment success >>", res);      // TODO    },    fail: (err) => {      console.log("payment fail >>", err);},});
以上各参数官网文档均有具体阐明，请参考uni-app[payment]
3. 客户端生成二维码（插件 tkiQrcode）&& 条形码（插件 tkiBarcode）

二维码应用的插件

具体实现参照官网阐明即可，须要留神的是 npm 或者 yarn 装置的话，最新只有 0.1.6 版本，然而这个版本不反对支付宝小程序，所以须要把 tki-qrcode 的源码下载下来放在本人我的项目的 components 文件夹下应用，否则支付宝无奈实现客户端生成二维码。

条形码插件
依照文档阐明操作，即可实现，临时没有呈现不兼容等其余问题。

4. 踩坑
  • 日历组件问题
背景：页面中须要用到日历组件进行日期抉择

应用的 uView 的 Calendar 组件，发现编译后在 H5 端能失常失效，然而微信小程序和支付宝小程序都有效，无奈抉择其余日期。
应用 uniCalendar 组件，微信小程序中无奈实现自定义可选日期范畴等性能，须要批改源码。

解决方案：采纳原生的 picker 组件

未完待续......