uni-app 小白入门

前言

业务需求，被迫营业小程序，并且须要微信和支付宝两个端。因为以前没有作太小程序，因此稍微调研了下最近比较火的两款小程序跨端开发框架：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 组件

未完待续......