微信公衆号網頁開發

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

發布人(rén)：融晨科技

浏覽次數：53

基本配置

1.設置—公衆号設置—功能設置—配置JS接口安全域名

2.開發—基本配置

發者ID(AppID) 開發者密碼（AppSecret）

3.IP白名單配置

填寫當前本地(dì / de)開發IP地(dì / de)址和(hé / huò)服務器IP地(dì / de)址

開發

jQuery + rem + flex或WeUi、SUI(阿裏巴巴共享業務事業部SDC團隊（UED）)、Mint-UI(餓了(le／liǎo)麽)開發頁面
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">

1.引入JS文件

2通過config接口注入權限驗證配置

wx.config({
  debug: true, // 開啓調試模式,調用的(de)所有api的(de)返回值會在(zài)客戶端alert出(chū)來(lái)，若要(yào / yāo)查看傳入的(de)參數，可以(yǐ)在(zài)pc端打開，參數信息會通過log打出(chū)，僅在(zài)pc端時(shí)才會打印。
  appId: '', // 必填，公衆号的(de)唯一标識
  timestamp: , // 必填，生成簽名的(de)時(shí)間戳
  nonceStr: '', // 必填，生成簽名的(de)随機串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填，需要(yào / yāo)使用的(de)JS接口列表
});

第一步GET請求access_token

access_token的(de)有效期爲(wéi / wèi)7200秒（不(bù)必反複請求）
https://api.weixin.qq.com/cgi...

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

//獲取到(dào)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請求jsapi_ticket

jsapi_ticket的(de)有效期爲(wéi / wèi)7200秒（不(bù)必反複請求）
https://api.weixin.qq.com/cgi...
用第一步獲取到(dào)的(de)access_token的(de)值進行請求

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) //生成簽名的(de)時(shí)間戳
const nonceStr = Math.random().toString(36).substr(2, 15) //生成簽名的(de)随機串
let jsapi_ticket //在(zài)第二步生成
let url//簽名用的(de)url必須是(shì)調用JS接口頁面的(de)完整URL（前端請求服務端接口帶入）

const sha1 = require('sha1')//這(zhè)裏需要(yào / yāo)引入一個(gè)插件npm install sha1

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

const url = decodeURIComponent(req.query.url)//這(zhè)裏的(de)url采用前端加密，後端解密的(de)形式獲取
const timestamp = parseInt(Date.now() / 1000)
const nonceStr = Math.random().toString(36).substr(2, 15)
let jsapi_ticket = "在(zài)第二步拿到(dào)了(le／liǎo)"

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


module.exports = router;

3前端靜态頁面實際調用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <h1>分享頁面</h1>
    <script src="../static/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, // 開啓調試模式,調用的(de)所有api的(de)返回值會在(zài)客戶端alert出(chū)來(lái)，若要(yào / yāo)查看傳入的(de)參數，可以(yǐ)在(zài)pc端打開，參數信息會通過log打出(chū)，僅在(zài)pc端時(shí)才會打印。
                        appId: data.appId, // 必填，公衆号的(de)唯一标識
                        timestamp: data.timestamp, // 必填，生成簽名的(de)時(shí)間戳
                        nonceStr: data.nonceStr, // 必填，生成簽名的(de)随機串
                        signature: data.signature, // 必填，簽名
                        jsApiList: ['updateAppMessageShareData'] // 必填，需要(yào / yāo)使用的(de)JS接口列表