微信公众号 - 网页开发
公众号网页开发基于OAuth 2.0授权和JS-SDK，可以获取用户信息并调用微信原生能力。
OAuth 2.0 网页授权流程
| 步骤 |
操作 |
说明 |
| 1. 引导授权 |
跳转到微信授权页 |
scope分为snsapi_base（静默）和snsapi_userinfo（弹窗） |
| 2. 获取code |
用户同意后回调 |
微信重定向到redirect_uri并携带code参数 |
| 3. 换取token |
服务端用code换token |
获取网页授权access_token和openid |
| 4. 获取信息 |
调用userinfo接口 |
获取用户昵称、头像等基本信息 |
JS-SDK 常用接口
| 能力 |
接口 |
说明 |
| 分享 |
updateAppMessageShareData |
自定义分享到朋友/朋友圈的标题、图标 |
| 图片 |
chooseImage / previewImage |
拍照或从相册选图、全屏预览图片 |
| 支付 |
chooseWXPay |
调起微信支付（需服务号+微信支付商户） |
| 位置 |
getLocation / openLocation |
获取地理位置、打开微信内置地图 |
| 扫码 |
scanQRCode |
调起微信扫一扫 |
JS-SDK 使用示例
const wx = require('jweixin-1.6.0')
wx.config({
debug: false,
appId: 'your_appid',
timestamp: 'from_server',
nonceStr: 'from_server',
signature: 'from_server',
jsApiList: ['updateAppMessageShareData', 'chooseImage', 'scanQRCode']
})
wx.ready(() => {
wx.updateAppMessageShareData({
title: '分享标题',
desc: '分享描述',
link: 'https://example.com',
imgUrl: 'https://example.com/share.png'
})
})