在Uniapp中开发微信公众号应用使用weixin-js-sdk的方法
1、安装微信sdk，代码如下：npm install weixin-js-sdk --save
2、在页面引入：
import wx from "weixin-js-sdk";
3、页面中初始化使用jsapi支付：
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.data.appId, // 必填，公众号的唯一标识
timestamp: res.data.timeStamp, // 必填，生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
signature: res.data.paySign, // 必填，签名
jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
})3.1、如果是需要其他的接口，比如选择图片，可以使用如下代码：
wx.config({
debug: false, // 开启调试模式,
appId: data.appId, //必填，企业号的唯一标识，此处企业号corpid
timestamp: data.timestamp, //必填，生成签名的时间戳
nonceStr: data.nonceStr, //必填，生成签名的随机串
signature: data.signature, //必填，签名，见附录1
jsApiList: ["chooseImage"], //必填，需要使用的JS接口列表JS接口列表见附录2
});
config参数是通过后台获取的，其中wx.config来执行配置初始化，当debug为true时为调试模式，无论初始化是否成功都会弹窗提示类似：{"errMsg":"config:ok"}，jsApiList是各种js接口，想起可查看微信官方jssdk1.6.0说明链接：
微信网页开发 / JS-SDK说明文档
代码参考示例：
<!--
* @Author: your name
* @Date: 2021-01-06 10:18:31
* @LastEditTime: 2021-01-18 19:23:18
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /my-demo/src/views/Home.vue
-->
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<h1 @click="selectImg">这是点击微信按钮</h1>
<HelloWorld msg="Welcome to Your Vue.js App" />
</div>
</template>
<script>
// @ is an alias to /src
import axios from "axios";
import wx from "weixin-js-sdk";
export default {
name: "Home",
components: {
'HelloWorld':()=> import("@/components/HelloWorld.vue")
},
methods: {
// 初始化
getConfig() {
axios({
method: "post",
url: "xxxxx",//请求后端接口的地址
data: {
url: location.href.split("#"),
}, //向服务端提供授权url参数，并且不需要#后面的部分
//注意：这个url必须是小程序进入webview的地址，并且是合法域名形式地址！这样获取的数据才能保证签名没问题
}).then((res) => {
let data = res.data.results;
wx.config({
debug: false, // 开启调试模式,
appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature, // 必填，签名，见附录1
jsApiList: ["chooseImage"], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function () {
alert("ready");
// 在这里调用 API
//判断当前客户端版本是否支持指定JS接口
wx.checkJsApi({
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
"chooseImage"
], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: function (res) {
console.log('checkJsApi成功=====', res);
alert('支持chooseImage');
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
},
fail:function(e){
alert('不支持');
}
});
});
wx.error(function (res) {
// wx.config注册失败就会执行
alert("error");
});
});
},
//选择图片
selectImg() {
wx.chooseImage({
success: function (res) {
console.log("success=====", res);
alert("成功");
},
fail: function (e) {
console.log("=====", e);
alert("失败");
},
complete: function () {
alert("立即完成");
},
});
},
},
mounted() {
this.getConfig();
},
};
</script>
以上代码原文转载自：weixin-js-sdk使用-CSDN博客
页:
[1]