uni-app中使用微信js-sdk(个人笔记)

开发前必读：
JS-SDK说明文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
例子为在vue中使用微信JS-SDK，步骤如下：

一、绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。

二、安装/引入文件

插件方式：

npm i jweixin-module -S

引入js文件方式：

在需要调用JS接口的页面引入如下JS文件，（支持https）：https://unpkg.com/[email protected]/lib/index.js

三、全局引入

挂载到Vue原型

// main.js
import wx from 'jweixin-module'
Vue.prototype.$wx= wx
// 开放标签属于自定义标签，Vue会给予未知标签的警告，可通过配置Vue.config.ignoredElements来忽略 Vue 对开放标签的检查
Vue.config.ignoredElements = ['wx-open-launch-weapp']

四、配置（包括js-sdk和开放标签）

与使用 JS-SDK 配置方式相同，所有需要使用开放标签的页面必须先注入配置信息，并通过openTagList字段申请所需要的开放标签，否则将无法使用（同一个 url 仅需调用一次）。开放标签的申请和 JS 接口的申请相互独立，因此是可以同时申请的。

mounted() {
    this.createJsapiSignature()
}

      createJsapiSignature() {
            // 根据接口返回config信息
            this.$axios
                .createJsapiSignature({
                    url: window.location.href.split('#')[0] // 注意：url必须为在安全域名下的页面全路径，
                                                            //hash之前的部分，否则会出现获取不到api权限的问题
                }).then(res => {
                    let result = res.data.data
                    this.$wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，
                                      //可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: result.appId, // 必填，公众号的唯一标识
                        timestamp: result.timestamp, // 必填，生成签名的时间戳
                        nonceStr: result.nonceStr, // 必填，生成签名的随机串
                        signature: result.signature, // 必填，签名
                        jsApiList: ['chooseWXPay','chooseImage', 'previewImage'], // 必填，需要使用的JS接口列表
                        openTagList: ['wx-open-launch-weapp'] // h5跳小程序
                    })

                    this.$wx.ready(() => {
                        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
                        // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
                        // 则须把相关接口放在ready函数中调用来确保正确执行。
                        // 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                    })
                    this.$wx.error(function (res1) {
                        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，
                        //也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                    });
                }).catch(err => {
                    console.log("err", err)
                })
        },

五、使用

配置成功之后，就可以使用相关的api了。例子为微信支付。

        handlePayNow() {
            let that = this
            this.$axios.recharge({ // 调接口获取参数
                payChannel: 2
            }).then(res => {
                if(res.data.code==404) {
                    this.$toast(res.data.message)
                }
                else if(res.status==200) {
                    let result = res.data.data
                    let beanOrderId = result.beanOrderId
                    // 是否生成订单
                    this.beanOrderId = result.beanOrderId
                    if (result.result_code === "SUCCESS") {
                        this.$wx.chooseWXPay({ // 调起微信支付
                            timestamp: result.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                            nonceStr: result.nonce_str, // 支付签名随机串，不长于 32 位
                            package: result.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                            signType: 'HMAC-SHA256', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                            paySign: result.sign, // 支付签名
                            success: function (res) {
                            // 支付成功后的回调函数
                                that.$toast('支付成功');
                            },
                            cancel: function(res) {
                                // 取消付款
                                if(res.errMsg && res.errMsg === 'chooseWXPay:cancel') {
                                    that.$axios.cancel({ id: beanOrderId }).then((res) => {
                                        if(res.data.status===200) {
                                            that.$toast('您已取消支付');
                                        }
                                    })
                                }
                                this.beanOrderId = ''
                            },
                            fail: function() {
                                that.$toast('支付失败');
                            }
                        });
                    }
                }
            }
        },