web-view 调用微信小程序的方法

1.1api文件夹下新建api.js
/获取微信公众号配置授权—后端提供接口/

  initConfig: url => {
    return API.GET('/api/getJsapiSignature?url=' + url);
  },
1
2
3

1.2 utils文件夹下新建一个js 文件，放置小程序的方法

import api from '@/api/api'
export default {
  /**
   *
   *
   * @memberof WxMpApiService
   */
  initConfig(url) {
    this.wx = window['wx'];
    let href = '';
    if (url) { // 自定义地址
      href = url;
    } else {
      href = window.location.href.split('#')[0];
    }
    api.initConfig(encodeURIComponent(href)).then(config => {
      this.initWXConfig(config);
    });
  },

  /**
   *打开相册  选择图片
   *
   * @param {(url: string) => void} callBallck
   * @memberof WxMpApiService
   */
  chooseImage() {
    return new Promise(function (resolve, reject) {
      this.wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 'original' compressed
        sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
          const tempFilePaths = res.tempFilePaths
          console.log(tempFilePaths);
          resolve(tempFilePaths);
        }
      });
    })
  },
  /**
   *扫二维码
   *
   * @param {(resultStr: string) => void} callBallck
   * @memberof WxMpApiService
   */
  scanQRCode() {
    let that = this;
    return new Promise(function (resolve, reject) {
      that.wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有 'qrCode',"barCode"
        success: (res) => {
          resolve(res.resultStr);
        }
      });
    })
  },
  //
  // openLocation(param: OpenLocationModel) {
  //   this.wx.openLocation({
  //     latitude: param.latitude, // 纬度，浮点数，范围为90 ~ -90
  //     longitude: param.longitude, // 经度，浮点数，范围为180 ~ -180。
  //     name: param.name, // 位置名
  //     address: param.address, // 地址详情说明
  //     scale: param.scale, // 地图缩放级别,整形值,范围从1~28。默认为最大
  //     infoUrl: param.infoUrl // 在查看位置界面底部显示的超链接,可点击跳转
  //   });
  // },
  //
  // getLocation(fs: (res: any) => void) {
  //   this.wx.getLocation({
  //     type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
  //     success: (res) => {
  //       // alert('成功回调：' + JSON.stringify(res));
  //       const latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
  //       const longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
  //       const result = {lng: longitude, lat: latitude, exceptionStatus: 0}
  //       fs(result);
  //     },
  //     fail: (res) => {
  //       // alert('失败回调：' + JSON.stringify(res));
  //       const result = {lng: null, lat: null, exceptionStatus: 1, exceptionMsg: res.errMsg};
  //       fs(result);
  //     }
  //   });
  // },
  //
  initWXConfig(config) {
    this.wx.config({
      beta: true,
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: config.appId, // 必填，公众号的唯一标识
      timestamp: config.timestamp, // 必填，生成签名的时间戳
      nonceStr: config.nonceStr, // 必填，生成签名的随机串
      signature: config.signature, // 必填，签名
      jsApiList: [
        'checkJsApi',
        'chooseImage',
        'previewImage',
        'uploadImage',
        'scanQRCode',
      ] // 必填，需要使用的JS接口列表
    });
  },
  //
  // getEnv(): Promise<boolean> {
  //   let result = false;
  //   this.log(window.navigator.userAgent);
  //   const ua: string = window.navigator.userAgent.toLowerCase();
  //   if (ua.match(/MicroMessenger/i)) {
  //     result = true;
  //   } else {
  //     result = false;
  //   }
  //   const promise = new Promise<boolean>(resolve => {
  //     resolve(result);
  //   });
  //   return promise;
  // },
  //
  // login(returnUrl: string) {
  //   const redirectUrl = window.location.origin + environment.wxAuthorizUri
  //     + encodeURIComponent(window.location.origin + returnUrl);
  //   // + encodeURIComponent(window.location.origin + window.location.pathname + '/#' + returnUrl);
  //   window.location.href = redirectUrl;
  // },
  //
  // isMiniProgram(): boolean {
  //   // 小程序环境
  //   return window['__wxjs_environment'] === 'miniprogram';
  // },
  // pay(param: PayModel) {
  //   return new Promise(resolve => {
  //     // @ts-ignore
  //     WeixinJSBridge.invoke(
  //       "getBrandWCPayRequest",
  //       {
  //         "appId": param['appId'],     //公众号名称，由商户传入
  //         "timeStamp": param['timeStamp'], //时间戳，自1970年以来的秒数
  //         "nonceStr": param['nonceStr'], //随机串
  //         "package": param['package'],
  //         "signType": param['signType'], //微信签名方式：
  //         "paySign": param['paySign'] //微信签名
  //       },
  //       function (res) {
  //         if (res.err_msg == "get_brand_wcpay_request:ok") {
  //           return resolve({
  //             code: 1,
  //             payDetailId: param['payDetailId']
  //           });
  //           // 使用以上方式判断前端返回,微信团队郑重提示：
  //           //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
  //         } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
  //           return resolve({
  //             code: 0,
  //             payDetailId: null
  //           });
  //         } else if (res.err_msg == "get_brand_wcpay_request:fail") {
  //           // @ts-ignore
  //           WeixinJSBridge.call('closeWindow');
  //           return resolve({
  //             code: -1,
  //             payDetailId: null
  //           });
  //         }
  //       }
  //     );
  //   })
  // },
  // // 微信支付
  // WeixinJs() {
  //   // @ts-ignore
  //   if (typeof WeixinJSBridge == "undefined") {
  //     if (document.addEventListener) {
  //       // @ts-ignore
  //       document.addEventListener(
  //         "WeixinJSBridgeReady",
  //         this.pay(null),
  //         false
  //       );
  //       // @ts-ignore
  //     } else if (document.attachEvent) {
  //       // @ts-ignore
  //       document.attachEvent("WeixinJSBridgeReady", this.onBridgeReady());
  //       // @ts-ignore
  //       document.attachEvent("onWeixinJSBridgeReady", this.onBridgeReady());
  //     }
  //   } else {
  //     this.pay(null);
  //   }
  // },
  // openMapLocation(param: MapLocationModel) {
  //   super.openMapLocation(param);
  // },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197

1.3 H5页面使用
<template #button>
<van-button size=“small” type=“info” @click=“sweep” native-type=“button”>扫一扫

import WX from ‘@/views/utils/wx-mp’
mounted() {
WX.initConfig();
}
methods:{
async sweep() {
let val = await WX.scanQRCode();
this.code = val //赋值扫到的码
console.log(this.code);
},
}