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);

});