云闪付H5小程序开发笔记

云闪付小程序可以是普通的H5页面，开发文档有详细的使用UPSDK的流程。主要记录开发过程中的注意事项

一、upsdk初始化

upsdk.js 引入后需在页面使用 upsdk.pluginReady 进行 sdk 初始化，前端接口的调用建议在其回调函数中使用。

upsdk.pluginReady (function(){
   
    // 前端API调用      
});

二、异步问题

upsdk.pluginReady所接收的回调函数内部可能会执行异步操作，比如：

  upsdk.pluginReady(() => {
   
      upsdk.pay({
   
        tn:xxx,
        success: function () {
   
        // 支付成功
        console.log("成功")
        },
        fail: function (err) {
   
        console.log("支付失败")
        // 支付失败
        }
     });
  })

upsdk.pay是一个异步操作，它的success 和 fail 是回调函数，这些都是在支付结果返回时异步执行的。如果你希望在 success 和 fail 的函数中使用 this，你需要注意这两个函数是普通的函数表达式（非箭头函数），它们的 this 可能不会指向你期望的对象。如果你希望在 success 和 fail 回调中使用当前上下文的 this，可以这样写：

let that = this
upsdk.pluginReady(() => {
   
      upsdk.pay({
   
        tn:xxx,
        success: function () {
   
        //使用that.xxx
        // 支付成功
        console.log("成功")
        },
        fail: function (err) {
   
        console.log("支付失败")
        // 支付失败
        }
     });
  })

或者你可以把普通的回调函数改为箭头函数，箭头函数没有自己的 this 上下文，它会继承父级作用域的 this：

upsdk.pluginReady(() => {
   
    upsdk.pay({
   
        tn: xxx,
        success: () => {
   
            console.log("成功");
        },
        fail: (err) => {
   
            console.log("支付失败");
            // 支付失败, err.msg 是失败原因描述
        }
    });
});

你也可以使用 bind 方法将 this 绑定到回调函数：

upsdk.pluginReady(() => {
   
    upsdk.pay({
   
        tn: res.detail.relateSsn,
        success: (function () {
   
            console.log("成功");
        }).bind(this),
        fail: (function (err) {
   
            console.log("支付失败");
            // 支付失败, err.msg 是失败原因描述
        }).bind(this)
    });
});

注意：有些API返回的结果是在callback回调函数里而不是success回调里，详细查看开发文档。

三、调试问题

官方的云闪付开发工具bug很多，而且一直运行不了程序，所以只能直接上线(上线一个测试环境)，在手机端测试。手机测试的时候，有报错信息直接显示script.error，不会显示具体的js错误，所以最好api通过try…catch去捕捉一步步排查一下原因，不然找自己的语法哪错误都能找半天。以下是具体的代码例子：

upsdk.pluginReady(function () {
   
        upsdk.queryData({
   
          key: "userInfo",
          success: function (result) {
   
            try {
   
              // 解析 JSON 并赋值
              let parsedData = JSON.parse(result.value);
              that.$set(that.userInfo, "studentId", parsedData.studentId);
              if (!studentId || studentId === null || studentId === "") {
   
                Dialog.alert({
   
                  title: "提示",
                  message:
                    "您需要先完善个人资料",
                }).then(() => {
   
                  // 用户点击确定
                  that.$router.push("/modifyData");
                });
              }
            } catch (error) {
   
              console.error("解析用户信息错误", error);
            }
          },
          fail: (error) => {
   
            console.error("查询用户信息失败", error);
          },
        });
      });

注：生产环境下手机端是不会用upConsole调试台给你看的

四、缓存问题

云闪付用不了localStorage.setItem缓存数据，云闪付有自己的缓存API：

存储数据

upsdk.saveData({
   
    key:'xxx',
    value:'xxx',
    success:function(result){
   
          // result = {code:'',msg:''}
    }
});

查询数据

 upsdk.queryData({
   
     key:'xxx',
     success:function(result){
   
         //缓存是普通字符串 -> result.value就是查询值
         //缓存是JSON字符串   -> JSON.parse(result.value)就是解析后的对象
    }
});

注意：IOS端不支持存储对象类型
提醒：存储和查询数据也是一个异步操作，如果你的函数里需要upsdk.queryData拿到值A(或多值)后，再根据A的值去请求数据，建议把缓存过程改为看起来是同步的异步操作， 否则有可能还没拿到值你就去请求了。

    //涉及查询缓存的过程，这里我就查了两个值
    async getPageData() {
   
      let that = this;
      // 包装
      function queryData(key) {
   
        return new Promise((resolve, reject) =