知食微信网页开发
原文地址
微信授权登录、微信 JS-SDK 配置以及微信支付
准备工作
请认真阅读 微信授权登录
请认真阅读 微信 JS-SDK 说明文档
微信公众平台
登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。
绑定域名
登录微信公众平台：公众号设置 > 功能设置 > JS 接口安全域名
这个域名就是你项目的访问域名，如果是多个项目可以配置顶级域名
公众号域名配置：
提示
你的域名必须是一个外网可以访问的域名，并确保可以访问 verify 文件
由于一个自然月内最多可修改并保存三次域名，建议填写一级域名
多个环境可以使用一个域名，域名是和公众号的
config绑定的 (建议配置一个正式的环境域名和其他环境域名）
绑定开发者 todo
todo 找不到在哪里绑定了
绑定服务端 IP
登录微信公众平台：开发 > 基本设置 > 公众号开发信息 > IP 白名单 查看
这里是设置服务端的IP，获取 access_token
绑定服务端 IP：
其他
服务端可能需要到的公众号开发者信息：AppID、AppSecret 这写东西都可以在：开发 > 基本设置 > 公众号开发信息 里面查看并设置
微信 JS-SDK
微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK ，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
引入 js 文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js 如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。
备注：支持使用 AMD/CMD 标准模块加载方法加载
index.html 1
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息， 否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性， 所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。
设置 微信 js-sdk 鉴权
wx.config({
// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
debug: true,
// 必填，公众号的唯一标识
appId,
// 必填，生成签名的时间戳
timestamp,
// 必填，生成签名的随机串
nonceStr,
// 必填，签名
signature,
// 必填，需要使用的JS接口列表
jsApiList: [],
})提示
前/后端都要注意参数的大小写
通过 ready 接口处理成功验证
config 信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config 是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
wx.ready(() => {
// 分享给朋友
wxMessageShareData()
// 分享到朋友圈
wxTimelineShareData()
// ...
})部分基础 api 接口
// 分享给朋友
wx.onMenuShareAppMessage({
// 分享标题 @string
title: '',
// 分享描述 @string
desc: '',
// 分享链接，@string 该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
link: '',
// 分享图片地址 @string
imgUrl: '',
// 成功回调
success() {},
// 取消回调
cancel() {},
})提示
imgUrl 分享图片应该是可访问的远程地址，不可以是 base64 图片格式和本地图片
完成代码
// vue mixins 方式
export default {
methods: {
async wxConfig() {
// 向服务器获取信息
const res = await axios({
url: 'wx/sharetasks/getWechatConfig',
method: 'POST',
body: {
// 服务端需要用来签名的地址，就是你需要调用 js-sdk的页面地址（hash 模式有所不同，后续会讲）
currentUrl: window.location.href,
},
})
// 鉴权
const { appId, timestamp, nonceStr, signature } = res
await wx.config({
appId,
timestamp,
nonceStr,
signature,
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'],
})
// ready 后处理 api
wx.ready(() => {
this.wxMessageShareData()
this.wxTimelineShareData()
})
},
// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
wxMessageShareData(data = {}) {
wx.onMenuShareAppMessage({
title: data.title || '免费使用电子防疫承诺书',
desc: data.desc || '确认员工健康情况，助力企业顺利复工',
link: data.link || window.location.href,
imgUrl: data.imgUrl || 'https://asset.tsign.cn/apps/tsign-openservice-h5_3.0/common/imgs/esign.png',
success() {
// 用户确认分享后执行的回调函数
data.cb && data.cb()
},
cancel() {},
})
},
// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
wxTimelineShareData(data = {}) {
wx.onMenuShareTimeline({
title: data.title || '速来签署电子防疫承诺书',
desc: data.desc || '确认员工健康情况，助力企业顺利复工',
link: data.link || window.location.href,
imgUrl: data.imgUrl || 'https://asset.tsign.cn/apps/tsign-openservice-h5_3.0/common/imgs/esign.png',
success() {
// 用户确认分享后执行的回调函数
data.cb && data.cb()
},
cancel() {},
})
},
},
}提示
currentUrl 服务端需要用来签名的地址，就是你需要调用 js-sdk的页面地址（hash 模式有所不同，后续会讲）