cjssdk

⑴ 如何緩存微信js-SDK授權介面參數

微信的sdk文檔要求接入方緩存兩個參數：access_token和jsapi_ticket，在一定時間內這兩個參數的值是不會過期的，不需要每次請求微信伺服器獲取。以下示例是通過thinkphp自帶的緩存函數S實現。

參考以下文檔獲取access_token（有效期7200秒，開發者必須在自己的服務全局緩存access_token）：../15/.html

用第一步拿到的access_token採用http GET方式請求獲得jsapi_ticket（有效期7200秒，開發者必須在自己的服務全局緩存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

以下代碼片段示例如何緩存生成的access_token和jsapi_ticket（採用最新版ThinkPHP，包括Redis,Memcached等原理都是一樣的）：

⑵ h5就是頁面嗎,還是微信小程序

h5就是html5的簡稱，現在h5還有一個含義，因為很多人不懂h5是什麼東西，但是都知道哪些炫酷的邀請函，節日卡等等是用h5技術做出來的，然後很多人就認為這樣的頁面就叫做h5。
其實h5就是html5, 它是html的升級，它配合css3+javascript可以寫出各種各樣的炫酷頁面。
它是可以基於微信平台的（可以是小程序的形式，可以是公眾號的推文等等），也可以基於任何的其他平台，也可以是個人伺服器等等。當然現在用得比較多的場景還是基於微信平台的。
而HR問你的會不會H5,一般指的是你會不會寫單頁面（即用html5+css3+javascript技術開發的頁面（主要是 canvas 的熟練使用））
其實H5在我們開發眼裡是一種技術，在其他使用者眼裡是一種頁面

⑶ 網站應用接入微信登錄

1.網站接入微信登錄的好處

網站接入微信登錄，微信登錄使網站可以免除注冊的流程，並充分利用龐大的微信用戶群來實現快速傳播；網站接入微信登錄後，用戶只需要使用手機掃碼就可登錄，簡化用戶注冊流程，燃陪更有效率的提高轉化用戶流量。

2.站接入微信登錄之前需要申請

接入微信登錄前，網站需首先進行申請，獲得對應的appid與appkey，以保證後續流程中可正確對網站與用戶進行驗證與授權；我們以瓴碼官網http://www.zeropaas.com申請。

3.瓴碼官網前端增加相關代碼

let nowUrl = location.href;
let result = /code=(w*)&state=([0-9]*)/.exec(nowUrl);

if(result){
window.parent.postMessage(nowUrl,'*');
}

4.網站前端將微信登錄二維碼圖標內嵌至一個p中，並顯示該p

!function (a, b, c) {
function d(a) {
var c = "default";
a.self_redirect === !0 ? c = "true" : a.self_redirect === !1 && (c = "false");
var d = b.createElement("iframe"),
e = "https://open.weixin.qq.com/connect/qrconnect?appid=" + a.appid + "&scope=" + a.scope + "&redirect_uri=" + a.redirect_uri + "&state=" + a.state + "&login_type=jssdk&self_redirect=" + c + '&styletype=' + (a.styletype || '') + '&sizetype=' + (a.sizetype || '') + '&bgcolor=' + (a.bgcolor || '') + '&rst=' + (a.rst || '');
e += a.style ? "&style=" + a.style : "", e += a.href ? "&href=" + a.href : "", d.src = e, d.frameBorder = "0", d.allowTransparency = "true", d.scrolling = "no", d.width = "300px", d.height = "400px";
var f = b.querySelector('.weChatLogin_col_weChatBouncedDiv');//微信二維碼內嵌p
f.innerHTML = "", f.appendChild(d)
}
a.WxLogin = d
}(window, document);

const state = Number(new Date()).toString();//獲取狀態值
window.sessionStorage.setItem('state', state )//暫存狀態值
const obj = new WxLogin({//實例化一個二維碼
self_redirect: true,
id: "weChatBouncedDiv",//微信二維碼圖標內嵌p的id
appid: "wxfb8bf3273365770a",//應用唯一標識
scope: "snsapi_login",
redirect_uri: "http%3a%2f%2fzeropaas.com",//回調地址
state: state ,//用於保持請求和回調的狀態，授權請求後原樣帶回給第三方；該參數可應用於防止csrf攻擊（跨站請求偽耐碧造攻擊）
});

5.網站前端微信登錄授權成功之後的處理

window.onmessage = function(e) {//微信登錄授權成功後，官網皮畝蠢觸發該消息
let url = e.data;//e.data="http://www.zeropaas.com/?code=xxx&state=xxx"
if(url.indexOf('?') != -1){
url = url.substr(url.indexOf('?'))//url="?code=xxx&state=xxx"
let arr = url.substr(1).split('&');//arr=["code=xxx","state=xxx"]
arr = arr.map(item => {
item = item.split('=')
let map = new Map()
map.set(item[0],item[1])
item = Object.fromEntries(map)
return item
})//arr=[{code:"xxx"},{state:"xxx"}]
let oldState = window.sessionStorage.getItem('state');
let newState = arr[1].state;
//
// loadingDiv.style.display = 'flex'
// loadingDiv.innerHTML = '正在登錄中...'
$this.showVessel('loadingDiv',true,()=>{//顯示正在登錄中
$this.sm['loading'].startMole(function () {
$this.showSubMole('loading', true, function () {
if(oldState === newState){
$this.ep.thirdLogin(0,arr[0].code,1,1,0,null,function (result) {//向雲端發送第三登錄事件,code是微信登錄碼
if (result === null) {
$this.$router.push('/')//微信登錄成功，並且不要綁定手機號
} else {//微信登錄成功，並且需要綁定手機號
$this.openID = result//微信用戶ID
$this.showSubMole('loading', false, function () {}, function () {})
$this.showVessel('loadingDiv',false,()=>{},()=>{})//隱藏正在登錄中
$this.showBindingPhone()//綁定手機號
}
},function (err) {
console.log(err)
})
}
}, function () {})
}, function () {})
},()=>{})
window.onmessage = null
}
},

6.網站雲端獲取微信openid和access_token

function getOpenid_WX(appid,appSecret,code,successCB, errorCB){//獲取微信openid和token
const request = require(global.nodePath + "/node_moles/request");
let url1= 'https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + appid + '&secret=' + appSecret + '&code=' + code + '&grant_type=authorization_code'
request.get(
{
url: url1,
method: "GET",
json: true,
headers: {
"Content-type": "application/json",
},
},function (error, response, body) {
if (response.statusCode == 200) {
let data = JSON.stringify(body, null, 4);//從一個對象解析出字元串，第三個參數是格式化縮進格式按照四個字元縮進
let data1 = (JSON.parse(data));
let access_token = data1.access_token;
let openid = data1.openid;
successCB(access_token,openid);
}else {
errorCB(['獲取微信信息失敗！狀態碼：'+ response.statusCode]);
}
}
);
}

7.微信登錄和QQ登錄的區別

微信登錄可以內嵌網站登錄頁面，也可以打開微信登錄授權頁面，QQ登錄不可以內嵌網站登錄授權頁面，必須打開QQ登錄授權頁面，如果是打開微信或QQ登錄授權頁面，則登錄授權成功後必須關閉該頁面。

微信登錄回調地址可以指定一級根目錄或二級子目錄，比如 "http%3a%2f%2fzeropaas.com "或"http%3a%2f%2fzeropaas.com/qqLogin"， QQ登錄回調地址必須指定二級子目錄，比如 "http%3a%2f%2fzeropaas.com/qqLogin"

⑷ 微信支持H5跳轉App、跳轉小程序

定義: 微信開放標簽是微信公眾平檯面向網頁開發者提供的擴展標簽集合。通過使用微信開放標簽，網頁開發者可安全便捷地使用微信或系統的能力，為微信用戶提供更優質的網頁體驗

有哪些開放標簽?

<wx-open-launch-weapp> 打開小程序

<wx-open-launch-app> 打開app

接入要求

主體要求: 僅開放給已認證的服務號

系統要求：

微信版本要求為：7.0.12及以上。系統版本要求為：iOS 10.3及以上、Android 5.0及以上

接入方法

打開小程序使用步驟與微信JS-SDK類似，需要綁定安全域名、引入JS文件等步驟

打開app需要前往微信開放平台的管理中心-公眾賬號或小程序詳情-介面信息-網頁跳轉移動應用-關聯設置中綁定所需要跳轉的App

示例:

配置最新JSSDK

wx.config({

// 其它配置不變， openTagList配置可使用的開放標簽,

openTagList: ['wx-open-launch-app, wx-open-launch-weapp']

})

頁面使用開放標簽

打開小程序

id="launch-btn"

// 小程序id

username="gh_xxxxxxxx"

// 小程序路徑

path="/a/b/c?d=1&e=2#fg"

>

.btn { padding: 12px }

打開小程序

打開app

id="launch-btn"

// 移動應用appid

appid="your-appid"

// 額外信息, 客戶端自行解析

extinfo="your-extinfo"

>

.btn { padding: 12px }

App內查看

回調

var btn = document.getElementById('launch-btn');

// 調起成功回調

btn.addEventListener('launch',function(e) {

console.log('success');

});

// 調起失敗回調

btn.addEventListener('error',function(e) {

console.log('fail', e.detail);

});