weixin-js-sdk使用
注意:以下内容自身的项目为uniapp编译生成微信小程序。小程序内嵌webview。一、微信初始化安装微信sdknpm install weixin-js-sdk --save页面引入import wx from "weixin-js-sdk";微信初始化wx.config({debug: false, // 开启调试模式,appId: data.appId, //必填,企业号的唯一标识,此处企业
·
注意:以下内容自身的项目为uniapp编译生成微信小程序。小程序内嵌webview。
一、微信初始化
- 安装微信sdk
npm install weixin-js-sdk --save
- 页面引入
import wx from "weixin-js-sdk";
- 微信初始化
wx.config({
debug: false, // 开启调试模式,
appId: data.appId, //必填,企业号的唯一标识,此处企业号corpid
timestamp: data.timestamp, //必填,生成签名的时间戳
nonceStr: data.nonceStr, //必填,生成签名的随机串
signature: data.signature, //必填,签名,见附录1
jsApiList: ["chooseImage"], //必填,需要使用的JS接口列表JS接口列表见附录2
});
- 该操作中的参数为后台获取的数据
wx.config
执行微信配置初始化,debug
为true
时为调试模式,微信初始化错误还是正确都是弹框提示。类似于{“errMsg”:“config:ok”}jsApiList
为要使用微信哪些内置方法,但navigate跳转路由除外,不需要微信初始化也可以直接调用。详见微信官方文档附录二
以下附上
vue
中详细代码
<!--
* @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("#")[0],
}, //向服务端提供授权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>
更多推荐
已为社区贡献1条内容
所有评论(0)