微信公众号是html页面吗,微信公众号网页开发
基本配置
1.設(shè)置—公眾號設(shè)置—功能設(shè)置—配置JS接口安全域名
安全域名配置規(guī)則如下
2.開發(fā)—基本配置
開發(fā)者密碼第一次使用需要重新設(shè)置
記錄 開發(fā)者ID(AppID) 開發(fā)者密碼(AppSecret)后面會用到
3.IP白名單配置
推薦填寫當(dāng)前本地開發(fā)IP地址和服務(wù)器IP地址
本地開發(fā)地址獲取方式
服務(wù)器IP地址(根據(jù)自己的服務(wù)器Ip地址自行填寫)
多個IP地址填寫用回車隔開
4重要的一步
在：微信公眾號-開發(fā)-接口權(quán)限查看想要調(diào)用的開發(fā)接口是否可用
如果有相關(guān)接口權(quán)限無法開啟，推薦使用：微信公眾平臺-開發(fā)-開發(fā)者工具-公眾平臺測試帳號開發(fā)
開始開發(fā)
1.引入JS文件
2通過config接口注入權(quán)限驗證配置(最重要的一步)
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填，公眾號的唯一標(biāo)識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名
jsApiList: [] // 必填，需要使用的JS接口列表
});
appID(前面在微信公眾號基本配置中已經(jīng)拿到了)
jsApiList:['uploadImage','updateAppMessageShareData'] (例：上傳圖片接口,和自定義分享接口)
簽名算法(微信官方提供)
jsapi_ticket
生成簽名之前必須先了解一下jsapi_ticket，jsapi_ticket是公眾號用于調(diào)用微信JS接口的臨時票據(jù)。正常情況下，jsapi_ticket的有效期為7200秒，通過access_token來獲取。由于獲取jsapi_ticket的api調(diào)用次數(shù)非常有限，頻繁刷新jsapi_ticket會導(dǎo)致api調(diào)用受限，影響自身業(yè)務(wù)，開發(fā)者必須在自己的服務(wù)全局緩存jsapi_ticket 。
參考以下文檔獲取access_token(有效期7200秒，開發(fā)者必須在自己的服務(wù)全局緩存access_token)：https://developers.weixin.qq....
用第一步拿到的access_token 采用http GET方式請求獲得jsapi_ticket(有效期7200秒，開發(fā)者必須在自己的服務(wù)全局緩存jsapi_ticket)：https://api.weixin.qq.com/cgi...
2.1簽名獲取拆解
第一步GET請求access_token
grant_type是獲取access_token填寫client_credential
appid是第三方用戶唯一憑證
secret是第三方用戶唯一憑證密鑰，即appsecret**
appid 和 secret 在前面的基本配置中其實都已經(jīng)拿到。但是由于開發(fā)者密碼(AppSecret)是校驗公眾號開發(fā)者身份的密碼，具有極高的安全性。不能直接暴露在前端代碼中，所以access_token的請求需在后端完成，這里簽名的生成過程都在后端完成。
當(dāng)前以node搭建后端服務(wù)
//獲取到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的有效期為7200秒(不必反復(fù)請求)
https://api.weixin.qq.com/cgi...
用第一步獲取到的access_token的值進(jìn)行請求
//
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) //生成簽名的時間戳
const nonceStr = Math.random().toString(36).substr(2, 15) //生成簽名的隨機串
let jsapi_ticket //在第二步生成
let url//簽名用的url必須是調(diào)用JS接口頁面的完整URL(前端請求服務(wù)端接口帶入)
const sha1 = require('sha1')//這里需要引入一個插件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)頁面實際調(diào)用
Document分享頁面
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, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
appId: data.appId, // 必填，公眾號的唯一標(biāo)識
timestamp: data.timestamp, // 必填，生成簽名的時間戳
nonceStr: data.nonceStr, // 必填，生成簽名的隨機串
signature: data.signature, // 必填，簽名
jsApiList: ['updateAppMessageShareData'] // 必填，需要使用的JS接口列表
});
}
});
}
wxFN()
wx.ready(function() { //需在用戶可能點擊分享按鈕前就先調(diào)用
wx.updateAppMessageShareData({
title: '', // 分享標(biāo)題
desc: '', // 分享描述
link: '', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
imgUrl: '', // 分享圖標(biāo)
success: function() {
alert("成功")
// 設(shè)置成功
}
})
});
wx.error(function(res) {
console.log('err', res)
});
4常見錯誤及解決方法(微信提供)
調(diào)用config 接口的時候傳入?yún)?shù) debug: true 可以開啟debug模式，頁面會alert出錯誤信息。以下為常見錯誤及解決方法：
invalid url domain當(dāng)前頁面所在域名與使用的appid沒有綁定，請確認(rèn)正確填寫綁定的域名，僅支持80(http)和443(https)兩個端口，因此不需要填寫端口號(一個appid可以綁定三個有效域名，見 ]目錄1.1.1)。
invalid signature簽名錯誤。建議按如下順序檢查：
確認(rèn)config中nonceStr(js中駝峰標(biāo)準(zhǔn)大寫S), timestamp與用以簽名中的對應(yīng)noncestr, timestamp一致。
確認(rèn)url是頁面完整的url(請在當(dāng)前頁面alert(location.href.split('#')[0])確認(rèn))，包括'http(s)😕/'部分，以及'？'后面的GET參數(shù)部分,但不包括'#'hash后面的部分。
確認(rèn) config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。
確保一定緩存access_token和jsapi_ticket。
確保你獲取用來簽名的url是動態(tài)獲取的，動態(tài)頁面可參見實例代碼中php的實現(xiàn)方式。如果是html的靜態(tài)頁面在前端通過ajax將url傳到后臺簽名，前端需要用js獲取當(dāng)前頁面除去'#'hash部分的鏈接(可用location.href.split('#')[0]獲取,而且需要encodeURIComponent)，因為頁面一旦分享，微信客戶端會在你的鏈接末尾加入其它參數(shù)，如果不是動態(tài)獲取當(dāng)前鏈接，將導(dǎo)致分享后的頁面簽名失敗。
the permission value is offline verifying這個錯誤是因為config沒有正確執(zhí)行，或者是調(diào)用的JSAPI沒有傳入config的jsApiList參數(shù)中。建議按如下順序檢查：
確認(rèn)config正確通過。
如果是在頁面加載好時就調(diào)用了JSAPI，則必須寫在wx.ready的回調(diào)中。
確認(rèn)config的jsApiList參數(shù)包含了這個JSAPI。
permission denied該公眾號沒有權(quán)限使用這個JSAPI，或者是調(diào)用的JSAPI沒有傳入config的jsApiList參數(shù)中(部分接口需要認(rèn)證之后才能使用)。
function not exist當(dāng)前客戶端版本不支持該接口，請升級到新版體驗。
為什么6.0.1版本config:ok，但是6.0.2版本之后不ok(因為6.0.2版本之前沒有做權(quán)限驗證，所以config都是ok，但這并不意味著你config中的簽名是OK的，請在6.0.2檢驗是否生成正確的簽名以保證config在高版本中也ok。)
在iOS和Android都無法分享(請確認(rèn)公眾號已經(jīng)認(rèn)證，只有認(rèn)證的公眾號才具有分享相關(guān)接口權(quán)限，如果確實已經(jīng)認(rèn)證，則要檢查監(jiān)聽接口是否在wx.ready回調(diào)函數(shù)中觸發(fā))
服務(wù)上線之后無法獲取jsapi_ticket，自己測試時沒問題。(因為access_token和jsapi_ticket必須要在自己的服務(wù)器緩存，否則上線后會觸發(fā)頻率限制。請確保一定對token和ticket做緩存以減少2次服務(wù)器請求，不僅可以避免觸發(fā)頻率限制，還加快你們自己的服務(wù)速度。目前為了方便測試提供了1w的獲取量，超過閥值后，服務(wù)將不再可用，請確保在服務(wù)上線前一定全局緩存access_token和jsapi_ticket，兩者有效期均為7200秒，否則一旦上線觸發(fā)頻率限制，服務(wù)將不再可用)。
uploadImage怎么傳多圖(目前只支持一次上傳一張，多張圖片需等前一張圖片上傳之后再調(diào)用該接口)
沒法對本地選擇的圖片進(jìn)行預(yù)覽(chooseImage接口本身就支持預(yù)覽，不需要額外支持)
通過a鏈接(例如先通過微信授權(quán)登錄)跳轉(zhuǎn)到b鏈接，invalid signature簽名失敗(后臺生成簽名的鏈接為使用jssdk的當(dāng)前鏈接，也就是跳轉(zhuǎn)后的b鏈接，請不要用微信登錄的授權(quán)鏈接進(jìn)行簽名計算，后臺簽名的url一定是使用jssdk的當(dāng)前頁面的完整url除去'#'部分)
出現(xiàn)config:fail錯誤(這是由于傳入的config參數(shù)不全導(dǎo)致，請確保傳入正確的appId、timestamp、nonceStr、signature和需要使用的jsApiList)
如何把jsapi上傳到微信的多媒體資源下載到自己的服務(wù)器(請參見文檔中uploadVoice和uploadImage接口的備注說明)
Android通過jssdk上傳到微信服務(wù)器，第三方再從微信下載到自己的服務(wù)器，會出現(xiàn)雜音(微信團(tuán)隊已經(jīng)修復(fù)此問題，目前后臺已優(yōu)化上線)
綁定父級域名，是否其子域名也是可用的(是的，合法的子域名在綁定父域名之后是完全支持的)
在iOS微信6.1版本中，分享的圖片外鏈不顯示，只能顯示公眾號頁面內(nèi)鏈的圖片或者微信服務(wù)器的圖片，已在6.2中修復(fù)
是否需要對低版本自己做兼容(jssdk都是兼容低版本的，不需要第三方自己額外做更多工作，但有的接口是6.0.2新引入的，只有新版才可調(diào)用)
該公眾號支付簽名無效，無法發(fā)起該筆交易(請確保你使用的jweixin.js是官方線上版本，不僅可以減少用戶流量，還有可能對某些bug進(jìn)行修復(fù)，拷貝到第三方服務(wù)器中使用，官方將不對其出現(xiàn)的任何問題提供保障，具體支付簽名算法可參考 JSSDK微信支付一欄)
目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現(xiàn)web app的頁面會導(dǎo)致簽名失敗，此問題已在Android6.2中修復(fù)
uploadImage在chooseImage的回調(diào)中有時候Android會不執(zhí)行，Android6.2會解決此問題，若需支持低版本可以把調(diào)用uploadImage放在setTimeout中延遲100ms解決
require subscribe錯誤說明你沒有訂閱該測試號，該錯誤僅測試號會出現(xiàn)
getLocation返回的坐標(biāo)在openLocation有偏差，因為getLocation返回的是gps坐標(biāo)，openLocation打開的騰訊地圖為火星坐標(biāo)，需要第三方自己做轉(zhuǎn)換，6.2版本開始已經(jīng)支持直接獲取火星坐標(biāo)
查看公眾號(未添加): "menuItem:addContact"不顯示，目前僅有從公眾號傳播出去的鏈接才能顯示，來源必須是公眾號
ICP備案數(shù)據(jù)同步有一天延遲，所以請在第二日綁定
總結(jié)
以上是生活随笔為你收集整理的微信公众号是html页面吗,微信公众号网页开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 常见位操作：获取，设置，清零
- 下一篇： 个人作业-Week2