【微信公众号 H5 vue】vue H5 调用微信上传图片 微信支付

export const isWeiXin = () => {

    let ua = window.navigator.userAgent.toLowerCase();

    if(ua.match(/MicroMessenger/i) == 'micromessenger'){

        return true;

    }else{

        return false;

    }

}

//项目加载 注册微信环境 mounted

const data = await wechatConfig(); // 接口返回微信信息 例如：ID 时间戳 

    wx.config({

          debug: false,

          appId: data.data.appId,

          timestamp: data.data.timestamp,

          nonceStr: data.data.nonceStr,

          signature: data.data.signature,

          jsApiList: [

            'chooseImage',

            'uploadImage'

          ]

    });

//调用上传接口

 toUpload() {

      const that = this;

      wx.chooseImage({

          count: 1, // 默认9

          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有

          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

          success(res) {

            // alert(JSON.stringify(res))

              const localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

              that.localId = localIds[0];

              if (that.localId) {

                  wx.uploadImage({

                      localId: that.localId, // 需要上传的图片的本地ID，由chooseImage接口获得

                      isShowProgressTips: 1, // 默认为1，显示进度提示

                      async success(res) {

                        // alert(JSON.stringify(res))

                          const serverId = res.serverId; // 返回图片的服务器端ID

                          await that.uploadWechat(serverId);

                      }

                  });

              }

          },

          fail(){

              that.toast('选择图片初始化失败 请刷新重试');

          }

      });

    },

//使用微信支付

注册微信支付 mounted方法调用

async wechatPayConfig(){

        const data = await wechatConfig();//接口返回微信信息 ID签名等

        wx.config({

          debug: false,

          appId: data.data.appId,

          timestamp: data.data.timestamp,

          nonceStr: data.data.nonceStr,

          signature: data.data.signature,

          jsApiList: ['chooseWXPay']

        })

      },

//调用

const data = await atoncePayment(params);// 调用 统一下单接口 获取订单ID 及 签名 ID 等。。。

          if(data.retType !=1) return this.toast(data.retMsg);

          data.data.prepay = JSON.parse(data.data.prepay);

//调用微信支付API

          wx.chooseWXPay({

            appId: data.data.prepay.appid,

            timestamp: data.data.prepay.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符

            nonceStr: data.data.prepay.noncestr, // 支付签名随机串，不长于 32 位

            package: `prepay_id=${data.data.prepay.prepayid}`, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）

            signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'

            paySign: data.data.prepay.sign, // 支付签名

            async success(res) {

                // 支付成功后的回调函数,跳转到订单页面

                if (res.errMsg == 'chooseWXPay:ok') {

                    that.$router.push('/becomeLeaderSuccess');

                }

            },

            fail(error) {

                // 支付失败的回调函数

                that.toast('支付失败');

            }

          });