微(wēi)信公衆号網頁開(kāi)發

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

發布人(rén)：葵宇科(kē)技(jì)

浏覽次數(shù)：57

基本配置

1.設置—公衆号設置—功能(néng)設置—配置JS接±γ口安全域名

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

發者ID(AppID) 開(kāi)發者密碼࿰€ λ8;AppSecret）

3.IP白(bái)名單配置

填寫當前本地(dì)開(kāi)發IP地(dì)址和(hé)服務器(qì)IP地(dì)址

開(kāi)發

jQuery + rem + flex或WeUi、SUI(阿™♠裡(lǐ)巴巴共享業(yè)務事(shì)業(yè)部SDC團隊（£★;UED）)、Mint-UI(餓了(le)麽)開(kāi)發頁面
<meta name="viewport" ‍σ♦content="width=device-w♠©idth,initial-scale=1,user-scalable=0,viγ♣ewport-fit=cover">

1.引入JS文(wén)件(jiàn)

2通(tōng)過config接口注入權限驗證配置

wx.config({
  debug: true, //₽φα 開(kāi)啓調試模式,調用(yòng)的(de)所有(yǒu)ap ™₩→i的(de)返回值會(huì)在客戶端alert出來(σ>lái)，若要(yào)查看(kàn)傳入的(de)參數(shù)&#xλ ff0c;可(kě)以在pc端打開(kāi)，參數(shù)信息‍←會(huì)通(tōng)過log打出，僅在pc端時(shí)才會(huì)打印Ω 。
  appId: '', // 必填ÿ£∞§0c;公衆号的(de)唯一(yī)标識
  timestamp: , // 必填，生±✔(shēng)成簽名的(de)時(shí)間(jiān)戳
  nonceStr: '&♣©#39;, // 必填，生(shēng)成簽名的(de)随機(jī)串
  si↕←gnature: '',// 必填，簽名
  jsApiLi↑‍✔∞st: [] // 必填，需要(yào)使用(yòng)的(γ←de)JS接口列表
});

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

access_token的(de)有(yǒu)效期為(wèi)7200秒(miǎo)&#x↕Ω ff08;不(bù)必反複請(qǐng)求）
https://api.weixin.qq.com/cgi...

grant_type是(shì)獲取access_token填寫client_crede≠©♥₹ntial
appid是(shì)第三方用(yòng)戶唯一(yī)憑證
secret是(shì)第三方用(yòng)戶唯一(yī)憑證¶↔ ∏密鑰，即appsecret**

//獲取到(dào)access_token示例
var ☆ url = `https://api.weixin.q✔£q.com/cgi-bin/token?grant_type=&←>client_credential&appid=${ap®✘÷pid}&secret=${secret}`;
  γ$✔↓      request(url, function (error, response, bε¥∏ody) {
            if (!error && respons σe.statusCode == 200) {
    →‍♣            console.log("access_t≠'β♥oken值" +JSON.parse(body).access_toke€Ωn)
            }
        });

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

jsapi_ticket的(de)有(yǒu)效期為(wèi↔‍π‌)7200秒(miǎo)（不(bù)必反複請(qǐng)求&#xδ$ff09;
https://api.weixin.qq.com/×✘¥ cgi...
用(yòng)第一(yī)步獲取到(dào)的(de)access_token的(de)值進→≤<行(xíng)請(qǐng)求

var url = `https://api.w¶↔eixin.qq.com/cgi-bin/ticket/×₽↑getticket?access_token=${acce₩∏∞∏ss_token}&type=jsapi	  6;
        request(url, functi≠ on (error, response, body) {
   ×☆         if (!error && r ↑esponse.statusCode == 200) {
     ↑<∑™           console.log("jsapi_ticket值"  ✔ ₹+ JSON.parse(body).ticket);
      ≠δ↔≠      }
        });

第三步生(shēng)成算(suàn)法簽名

const timestamp = parseInt(DateΩδ.now() / 1000) //生(shēng)成簽名的(de)時(shí)間(jiān)戳
const nonceStr = Math.random().toString(36)↓↑•.substr(2, 15) //生(shēng)成簽名的(de)随機(jī)串
let jsapi_ticket //在第二步生(shēng)成
let url//簽名用(yòng)的(de)url必須是(shì)調用(yòng)JS接口頁面的(de)完整&©™URL（前端請(qǐng)求服務端接口帶入ÿ‌'©γ09;

const sha1 = require('sha1') λ₹λ//這(zhè)裡(lǐ)需要(yào)引入一(yī)個(gè)σ✘ 插件(jiàn)npm install sha1

router.get(&#€‍39;/', (req, res, next) => {λ♣σ↓

const url = decodeURIComponent(req.que§÷≥$ry.url)//這(zhè)裡(lǐ)的(de)ur∞↕l采用(yòng)前端加密，後端解密的(de)形式獲取
const t€♦imestamp = parseInt(Date.now() / 1000)
const ₩<↑nonceStr = Math.random().toStri☆"‍×ng(36).substr(2, 15)
let jsapi_ticket = &#<₽→‍34;在第二步拿(ná)到(dào)了(le)"
★φ✔©
const params = {
        non÷ 'ceStr,
        jsapi_ticket,
 $★¥       timestamp,
        url
   ‌ε }
    const string = Object.♦φεkeys(params).sort().map(key => `${k↕≥ey.toLowerCase()}=${pa♠₽≥€rams[key]}`).join('&'©‌;)
    const signature =¶  sha1(string)//生(shēng)成的(de)簽名
    
   φα™ res.status(200).json({//将參數(shù)返回給前端
        tβ €imestamp,
        signature,
        n≈☆♦®onceStr
    });
    
    })


m§♠odule.exports = router;

3前端靜(jìng)态頁面實際調用(yòng)

<!DOCTYPE html>
<html la>♦≠ ng="en">
<hea ∑¶ d>
    <meta charset="☆¶;UTF-8">
    <title>Document</t'$↔→itle>
</head>
<body>
    
    &lσ≤§♦t;h1>分(fēn)享頁面</h1>> "₽;
    <script src="stat↔§ic/js/jweixin-1.4.0.js"></s≈$cript>
    <script typ↓$≥πe="text/javascript"₹₩; src="js/jquery-2.1.1.min.js">≈α✘$</script>
    <scrip> φ₽t>
    function wxFN(){
        $.a™♥φ✔jax({
                type: "get&‍φσ£#34;,
                url: `http:/'≤♥€/*************/api/wx?url=${encodeURIComp₽↓onent(location.href.split('#★↑9;)[0])}`,
              ♦≈   success: function(data) {
    α₽β                console.log(da♥€∑ta);
                    wx.config({
   &<                     debug: t☆ rue, // 開(kāi)啓調試模式,調用(yòng)的(de)所有(yǒu)aα±σ♦pi的(de)返回值會(huì)在客戶端alert出來(lái)，若要(yào)☆' 查看(kàn)傳入的(de)參數(shù)，可(kě)以在pc端打開(ελkāi)，參數(shù)信息會(huì)通(tōng)過log打出&✘π∑#xff0c;僅在pc端時(shí)才會(huì)打印。
     ±£                   appId: data.appId,λ≥£ // 必填，公衆号的(de)唯一(yī)标識× §€
                        timestamp: daφ↓αta.timestamp, // 必填，生(shēng)成簽名÷的(de)時(shí)間(jiān)戳
                        ±φ¥nonceStr: data.nonceStr, // 必填 ₩£f0c;生(shēng)成簽名的(de)随機(jī)串
                  ∞¥      signature: data.signature, // 必填，簽名
 ¥•                        jsApiList: ['upδ÷dateAppMessageShareData'] // 必填，需要(yào¶β)使用(yòng)的(de)JS接口列表