在Uniapp中开发微信公众号应用使用weixin-js-sdk的方法

admin

1、安装微信sdk，代码如下：

1. npm install weixin-js-sdk --save
   

复制代码

2、在页面引入：

1. import wx from "weixin-js-sdk";
   

复制代码

3、页面中初始化使用jsapi支付：

1. wx.config({
   
2.                                                         debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
   
3.                                                         appId: res.data.appId, // 必填，公众号的唯一标识
   
4.                                                         timestamp: res.data.timeStamp, // 必填，生成签名的时间戳
   
5.                                                         nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
   
6.                                                         signature: res.data.paySign, // 必填，签名
   
7.                                                         jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
   
8.                                                 })

复制代码

3.1、如果是需要其他的接口，比如选择图片，可以使用如下代码：

1. wx.config({
   
2.     debug: false, // 开启调试模式,
   
3.     appId: data.appId, //必填，企业号的唯一标识，此处企业号corpid
   
4.     timestamp: data.timestamp, //必填，生成签名的时间戳
   
5.     nonceStr: data.nonceStr, //必填，生成签名的随机串
   
6.     signature: data.signature, //必填，签名，见附录1
   
7.     jsApiList: ["chooseImage"], //必填，需要使用的JS接口列表JS接口列表见附录2
   
8.     });
   

复制代码

config参数是通过后台获取的，其中wx.config来执行配置初始化，当debug为true时为调试模式，无论初始化是否成功都会弹窗提示类似：{"errMsg":"configk"}，jsApiList是各种js接口，想起可查看微信官方jssdk1.6.0说明链接：
微信网页开发 / JS-SDK说明文档
代码参考示例：

1. <!--
   
2. * @Author: your name
   
3. * @Date: 2021-01-06 10:18:31
   
4. * @LastEditTime: 2021-01-18 19:23:18
   
5. * @LastEditors: Please set LastEditors
   
6. * @Description: In User Settings Edit
   
7. * @FilePath: /my-demo/src/views/Home.vue
   
8. -->
   
9. <template>
   
10.   <div class="home">
    
11.     <img alt="Vue logo" src="../assets/logo.png" />
    
12.     <h1 @click="selectImg">这是点击微信按钮</h1>
    
13.     <HelloWorld msg="Welcome to Your Vue.js App" />
    
14.   </div>
    
15. </template>
    
16. 
    
17. <script>
    
18. // @ is an alias to /src
    
19. 
    
20. import axios from "axios";
    
21. import wx from "weixin-js-sdk";
    
22. export default {
    
23.   name: "Home",
    
24.   components: {
    
25.     'HelloWorld':()=> import("@/components/HelloWorld.vue")
    
26.   },
    
27.   methods: {
    
28.     // 初始化
    
29.     getConfig() {
    
30.       axios({
    
31.         method: "post",
    
32.         url: "xxxxx",//请求后端接口的地址
    
33.         data: {
    
34.           url: location.href.split("#")[0],
    
35.         }, //向服务端提供授权url参数，并且不需要#后面的部分
    
36.         //注意：这个url必须是小程序进入webview的地址，并且是合法域名形式地址！这样获取的数据才能保证签名没问题
    
37.       }).then((res) => {
    
38.         let data = res.data.results;
    
39.         wx.config({
    
40.           debug: false, // 开启调试模式,
    
41.           appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
    
42.           timestamp: data.timestamp, // 必填，生成签名的时间戳
    
43.           nonceStr: data.nonceStr, // 必填，生成签名的随机串
    
44.           signature: data.signature, // 必填，签名，见附录1
    
45.           jsApiList: ["chooseImage"], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    
46.         });
    
47. 
    
48.         wx.ready(function () {
    
49.           alert("ready");
    
50.           // 在这里调用 API
    
51.           //判断当前客户端版本是否支持指定JS接口
    
52.           wx.checkJsApi({
    
53.             jsApiList: [
    
54.               // 所有要调用的 API 都要加到这个列表中
    
55.               "chooseImage"
    
56.             ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
    
57.             success: function (res) {
    
58.               console.log('checkJsApi成功=====', res);
    
59.               alert('支持chooseImage');
    
60.               // 以键值对的形式返回，可用的api值true，不可用为false
    
61.               // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    
62.             },
    
63.             fail:function(e){
    
64.               alert('不支持');
    
65.             }
    
66.           });
    
67.         });
    
68.         wx.error(function (res) {
    
69.             // wx.config注册失败就会执行
    
70.           alert("error");
    
71.         });
    
72.       });
    
73.     },
    
74.     //选择图片
    
75.     selectImg() {
    
76.       wx.chooseImage({
    
77.         success: function (res) {
    
78.           console.log("success=====", res);
    
79.           alert("成功");
    
80.         },
    
81.         fail: function (e) {
    
82.           console.log("=====", e);
    
83.           alert("失败");
    
84.         },
    
85.         complete: function () {
    
86.           alert("立即完成");
    
87.         },
    
88.       });
    
89.     },
    
90.   },
    
91.   mounted() {
    
92.     this.getConfig();
    
93.   },
    
94. };
    
95. </script>
    
96. 
    

复制代码

以上代码原文转载自：weixin-js-sdk使用-CSDN博客