1、引入微信sdk
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
2、生成signature签名
var timestamp = String(parseInt(new Date().getTime() / 1000));
// 这里的时间戳是10位的一个字符串或者数组,不然获取的签名对不上
var nonceStr = this.randomString(6);
var shaBefore = decodeURIComponent(
`jsapi_ticket=${
this.ticket
}&noncestr=${nonceStr}×tamp=${timestamp}&url=${
location.href.split("#")[0]
}`
);
var signature = this.sha1(shaBefore);
// 生成随机字符串
randomString(e) {
e = e || 32;
var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
a = t.length,
n = "";
for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
return n;
},
encodeUTF8(s) {
var i,
r = [],
c,
x;
for (i = 0; i < s.length; i++)
if ((c = s.charCodeAt(i)) < 0x80) r.push(c);
else if (c < 0x800) r.push(0xc0 + ((c >> 6) & 0x1f), 0x80 + (c & 0x3f));
else {
if ((x = c ^ 0xd800) >> 10 == 0)
//对四字节UTF-16转换为Unicode
(c = (x << 10) + (s.charCodeAt(++i) ^ 0xdc00) + 0x10000),
r.push(0xf0 + ((c >> 18) & 0x7), 0x80 + ((c >> 12) & 0x3f));
else r.push(0xe0 + ((c >> 12) & 0xf));
r.push(0x80 + ((c >> 6) & 0x3f), 0x80 + (c & 0x3f));
}
return r;
},
// 字符串加密成 hex 字符串
sha1(s) {
var data = new Uint8Array(this.encodeUTF8(s));
var i, j, t;
var l = (((data.length + 8) >>> 6) << 4) + 16,
s = new Uint8Array(l << 2);
s.set(new Uint8Array(data.buffer)), (s = new Uint32Array(s.buffer));
for (t = new DataView(s.buffer), i = 0; i < l; i++)
s[i] = t.getUint32(i << 2);
s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8);
s[l - 1] = data.length << 3;
var w = [],
f = [
function () {
return (m[1] & m[2]) | (~m[1] & m[3]);
},
function () {
return m[1] ^ m[2] ^ m[3];
},
function () {
return (m[1] & m[2]) | (m[1] & m[3]) | (m[2] & m[3]);
},
function () {
return m[1] ^ m[2] ^ m[3];
}
],
rol = function (n, c) {
return (n << c) | (n >>> (32 - c));
},
k = [1518500249, 1859775393, -1894007588, -899497514],
m = [1732584193, -271733879, null, null, -1009589776];
(m[2] = ~m[0]), (m[3] = ~m[1]);
for (i = 0; i < s.length; i += 16) {
var o = m.slice(0);
for (j = 0; j < 80; j++)
(w[j] =
j < 16
? s[i + j]
: rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1)),
(t =
(rol(m[0], 5) +
f[(j / 20) | 0]() +
m[4] +
w[j] +
k[(j / 20) | 0]) |
0),
(m[1] = rol(m[1], 30)),
m.pop(),
m.unshift(t);
for (j = 0; j < 5; j++) m[j] = (m[j] + o[j]) | 0;
}
t = new DataView(new Uint32Array(m).buffer);
for (var i = 0; i < 5; i++) m[i] = t.getUint32(i << 2);
var hex = Array.prototype.map
.call(new Uint8Array(new Uint32Array(m).buffer), function (e) {
return (e < 16 ? "0" : "") + e.toString(16);
})
.join("");
return hex;
},
注:其中jsapi_ticket是公众号用于调用微信js接口的临时凭证,有效期为7200秒,而获取jsapi_ticket需要通过access_token来获取,有效期也为7200秒,所以需要全局缓存jsapi_ticket以防频繁调取。
https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html(获取token的文档)
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi(通过access_token获取jsapi_ticket,GET请求)
location.href.split("#")[0]为微信公众平台配置的合法域名
3、注入wx.config
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: "", // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名
jsApiList: [], // 必填,需要使用的JS接口列表
openTagList: ["wx-open-launch-app"] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
4、wx-open-launch-app标签
<wx-open-launch-app
@click="mu('launch-btn1')"
id="launch-btn1"
:appid="appId"
:extinfo="params"
v-if="isWeixin"
style="width: 100%; margin-left: 10%"
>
<script type="text/wxtag-template">
<div
style="width: 90%;
height: 45px;
background: #da2b27;
border-radius: 6px;
font-size: 16px;
font-family: Helvetica;
color: #ffffff;
text-align: center;
line-height: 45px;"
>加入购物车</div>
</script>
</wx-open-launch-app>
注:appId为APP的AppID,extinfo为打开APP时携带的参数(对象形式)
报错说明:
Unknown custom element: <wx-open-launch-app> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
解决方法:mian.js
Vue.config.ignoredElements = ['wx-open-launch-app'];
5、监听判断是否安装APP事件
// 此事件为点击事件 点击wx-open-launch-app触发
mu(ref) {
var that = this;
var launchBtn = document.getElementById(ref);
if (launchBtn) {
launchBtn.addEventListener("launch", function (e) {
// // 尝试进行唤起 操作成功执行的函数
// console.log(e, "11111");
});
launchBtn.addEventListener("error", function (e) {
// 尝试进行唤起 操作失败执行的函数 ,可选择跳转 AppStore 或者下载引导页等
});
}
},