微信公眾號(hào)網(wǎng)頁(yè)開(kāi)發(fā)

發(fā)表時(shí)間：2020-10-17

發(fā)布人：葵宇科技

瀏覽次數(shù)：53

基本配置

1.設(shè)置—公眾號(hào)設(shè)置—功能設(shè)置—配置JS接口安全域名

2.開(kāi)發(fā)—基本配置

發(fā)者ID(AppID) 開(kāi)發(fā)者密碼（AppSecret）

3.IP白名單配置

填寫(xiě)當(dāng)前本地開(kāi)發(fā)IP地址和服務(wù)器IP地址

開(kāi)發(fā)

jQuery + rem + flex或WeUi、SUI(阿里巴巴共享業(yè)務(wù)事業(yè)部SDC團(tuán)隊(duì)（UED）)、Mint-UI(餓了么)開(kāi)發(fā)頁(yè)面
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">

1.引入JS文件

2通過(guò)config接口注入權(quán)限驗(yàn)證配置

wx.config({
  debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
  appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
  timestamp: , // 必填，生成簽名的時(shí)間戳
  nonceStr: '', // 必填，生成簽名的隨機(jī)串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

第一步GET請(qǐng)求access_token

access_token的有效期為7200秒（不必反復(fù)請(qǐng)求）
https://api.weixin.qq.com/cgi...

grant_type是獲取access_token填寫(xiě)client_credential
appid是第三方用戶唯一憑證
secret是第三方用戶唯一憑證密鑰，即appsecret**

//獲取到access_token示例
var url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`;
        request(url, function (error, response, body) {
            if (!error && response.statusCode == 200) {
                console.log("access_token值" +JSON.parse(body).access_token)
            }
        });

第二步GET請(qǐng)求jsapi_ticket

jsapi_ticket的有效期為7200秒（不必反復(fù)請(qǐng)求）
https://api.weixin.qq.com/cgi...
用第一步獲取到的access_token的值進(jìn)行請(qǐng)求

var url = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi`
        request(url, function (error, response, body) {
            if (!error && response.statusCode == 200) {
                console.log("jsapi_ticket值" + JSON.parse(body).ticket);
            }
        });

第三步生成算法簽名

const timestamp = parseInt(Date.now() / 1000) //生成簽名的時(shí)間戳
const nonceStr = Math.random().toString(36).substr(2, 15) //生成簽名的隨機(jī)串
let jsapi_ticket //在第二步生成
let url//簽名用的url必須是調(diào)用JS接口頁(yè)面的完整URL（前端請(qǐng)求服務(wù)端接口帶入）

const sha1 = require('sha1')//這里需要引入一個(gè)插件npm install sha1

router.get('/', (req, res, next) => {

const url = decodeURIComponent(req.query.url)//這里的url采用前端加密，后端解密的形式獲取
const timestamp = parseInt(Date.now() / 1000)
const nonceStr = Math.random().toString(36).substr(2, 15)
let jsapi_ticket = "在第二步拿到了"

const params = {
        nonceStr,
        jsapi_ticket,
        timestamp,
        url
    }
    const string = Object.keys(params).sort().map(key => `${key.toLowerCase()}=${params[key]}`).join('&')
    const signature = sha1(string)//生成的簽名
    
    res.status(200).json({//將參數(shù)返回給前端
        timestamp,
        signature,
        nonceStr
    });
    
    })


module.exports = router;

3前端靜態(tài)頁(yè)面實(shí)際調(diào)用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <h1>分享頁(yè)面</h1>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script>
    function wxFN(){
        $.ajax({
                type: "get",
                url: `http://*************/api/wx?url=${encodeURIComponent(location.href.split('#')[0])}`,
                success: function(data) {
                    console.log(data);
                    wx.config({
                        debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
                        appId: data.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
                        timestamp: data.timestamp, // 必填，生成簽名的時(shí)間戳
                        nonceStr: data.nonceStr, // 必填，生成簽名的隨機(jī)串
                        signature: data.signature, // 必填，簽名
                        jsApiList: ['updateAppMessageShareData'] // 必填，需要使用的JS接口列表