JS - 公众号开发

JS-SDK说明文档、公众号网页授权

公众号开发常用功能

1. 引入JS文件(https)
2. 授权登录
3. 分享 / 定位 / 支付

1.授权

详情可查看公众号网页授权，前端需要操作(跳转到微信给的地址获取code，将code发送给后台换取token与用户信息)

1 第一步：引导用户进入授权页面用户同意授权，获取code（通过window.location.replace跳转到以下的 url）

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

url 参数列表

• appid:：申请的公众号appid
• redirect_uri:：授权后重定向的回调链接地址，使用encodeURIComponent(url)处理
• scope:：snsapi_base(不弹出授权页面，直接跳转，只能获取用户openid)，snsapi_userinfo(弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息)

2 第二步：通过code换取网页授权access_token（将code发送至后台api）

2.分享 / 定位

在微信客户端内打开的网页，可以引入微信JS-SDK，以调用SDK提供的众多功能，如定位、地图、分享等等，详情查看JS-SDK说明文档。我们使用Vue、React开发的SPA单页面应用，需要使用JS-SDK API的页面，都需要先wx.config()注入配置信息，同一个url仅需调用一次。

Vue项目可以在created阶段注入配置信息（将当前页面的 url 发送至后台换取配置信息 ）

/* global wx */

wx.config({ 
  appId: '',     // 必填，公众号的唯一标识
  timestamp: '', // 必填，生成签名的时间戳     [后台接口获取]
  nonceStr: '',  // 必填，生成签名的随机串     [后台接口获取]
  signature: '', // 必填，签名               [后台接口获取]
  jsApiList: []  // 必填，需要使用的JS接口列表 [根据自己需求进行配置]
})

config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后。所以如果需要在页面加载时就调用相关接口（定位），则须把相关接口放在ready函数中调用来确保正确执行；对于用户触发时才调用的接口（分享），则可以直接调用，不需要放在ready函数中。 [ 同一 url 不需要二次调用wx.config() ]

/* global wx */

wx.ready(function(){
  // 调用定位功能
})

IOS 分享的 BUG

照着官方文档流程，每个页面注入一次，在安卓分享正常，但是IOS不管哪个页面分享出去，点击链接都是进入应用的初始页（第一次进入的那个页面）。这与微信验签 url 有关，安卓取的是当前页 url，IOS 取的是进入页 url，详情参考这篇博客《vue-router history模式下的微信分享》

所以需要在 IOS 进入应用时，记录下当前的 url（使用  Vuex 或者 sessionStorage），需要注入的地方都用这个 url 换去配置信息，这样就可以避免这个 BUG 的产生

3.支付

支付有两种方式，WeixinJSBridge.invoke() 和 wx.chooseWXPay()

官方文档微信内H5调起支付、发起一个微信支付请求