微信 JSSDK 使用

| 参考链接

微信公众平台-公众号后台配置 微信公众平台-JSSDK使用

| 重点整理

  1. 配置JS接口安全域名「调用jssdk页面的域名」；微信分享的链接link也必须在JS接口安全域名下。
  2. 引入微信-JS文件： http://res.wx.qq.com/open/js/jweixin-1.6.0.js
  3. 通过config接口注入权限验证配置
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
  // 所有js要调用的 API 都要加到这个列表中，例如 "chooseImage"
});

| 案例：获取用户信息

每个用户对每个公众号的OpenID是唯一的，通过微网页授权机制，根据OpenID获取用户基本信息。

  1. “开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名[非URL，勿加 http:// 等协议头]。

  2. 引导用户进入授权页面同意授权，获取code。授权页面地址： https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirec

    • redirect_uri: 授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理。回调页面需要的参数在此链接后拼接。如果用户同意授权，回调链接将会自动拼接code参数，code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。

  3. 通过code换取网页授权access_token（与基础支持中的access_token不同）

    • 请求以下链接获取access_token： https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

    • 如果网页授权的作用域为snsapi_base，则本步骤中获取到网页授权access_token的同时，也获取到了openid。

  4. 通过网页授权access_token和openid获取用户基本信息

    • 如果网页授权作用域为snsapi_userinfo，则此时开发者可以通过access_token和openid拉取用户信息了。
    • 请求方法： https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

| 获取微信签名

  1. 获取access_token

    https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx41265c91c1edfc5b&secret=8e218006c3a61d0926d3991a14a2c131

  2. 获得jsapi_ticket

    https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=29_aEwP-IGrb0-Rnv6osJ9OMEXpjs8GBamynPQuIJVMiKE2i85LqxIFzCWst4yOhUaaguxh0HkhfCGHgvZaujQUC_sW3xjKG1xxzQfPTLoShcIBQO51SM2nDGQwm9P69bx4uues2-55N9PxsgH-LTRgAAAWEC&type=jsapi

  3. 获取签名

    微信 JS 接口签名校验工具

    noncestr=Wm3WZYTPz0wzccnW sapi_ticket=kgt8ON7yVITDhtdwci0qeZkT19iwhdnUAxgkkdFEEoUN9L_hgYLIagXwAbTeBTrl5xv-RRANPK0-1JtHn6vfHg timestamp=1414587457 url=http://192.168.157.1:8080/#/common/test

代码参考

| 微信分享

wx.updateAppMessageShareData({
    title: "", // 分享标题
    desc: "", // 分享描述
    link: `https://bb.com/#/aa?openId=${this.openId}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: "http://"+window.location.host + '/static/img.jpg', // 分享图标[带域名本地图片或网络图片]
    success: function(e) {}
})