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 組件

未完待續......