微信生态开发总结-待更新

_哆啦A梦
88 阅读4分钟

公众号申请

注册流程请参考如下文章

注册成功后登录到后台

  1. 配置js接口安全域名-用于使用jsSDK使用
  2. 配置js回调域名-用于授权成功回调使用

获取用户信息

授权地址描述 授权配置及操作说明 image.png 代码操作跳转 image.png

// 让微信授权地址不存历史记录，用户授权成功点击设备返回，不会返回设备空白页
 window.location.replace(url)

由于公众号授权配置的回调地址数量有限制，但是我多个业务不同的域名，都需要拿到用户信息，这时一个回调域名肯定是不能解决问题的，因为公众号设置的回调域名必须要与项目域名一致，不然就会报redirect_uri域名错误。
解决思路1

  1. 准备中间授权代理域名 main.example
  2. 微信公众号网页授权上填这个代理域名 main.example
  3. 所有 需要微信网页授权的客户端页面都向 main.example 请求
  4. 然后由 main.example 统一向 微信服务器进行发起网页授权请求
  5. 微信服务器带着code 重定向 main.example
  6. main.example 将code 拼接真实客户端需要授权页面的地址 为 redirectUrl
  7. main.example 重定向 url 到客户端
  8. 客户端可以通过 url 拿到 微信授权过的 code
  9. 可以调用后端接口获取用户信息，也可将用户信息放到url自动获取
流程图

image.png 解决思路2 1，为所需要网页授权的地址配置到主域名下代理转发

设置微信分享

  1. 如需使用 微信 jdk 功能，需要先开通微信JS接口安全域名的功能

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。

  1. 安装 jssdk

在需要调用JS接口的页面引入如下JS文件，（支持https）：res.wx.qq.com/open/js/jwe… 如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：res2.wx.qq.com/open/js/jwe… （支持https）。 也可以使用 npm 安装 npm i weixin-js-sdk
备注：支持使用 AMD/CMD 标准模块加载方法加载

  1. 微信 jdk 签名 wx.config 所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。
export async function wxShare(params = {}, query,
shareTitle, shareDesc, 
imgUrl, hideFlag) {
return new Promise(async resolve => {
try {
// 获取 签名信息，使用 # 号前的url 就可以
const data = await wxApi({ url: window.location.href.split('#')[0] })
// 地址获取拼接
const { origin, pathname } = window.location
const share_link = origin + pathname + '?' + params + '#' + query
wx.config({
// 开启调试模式,调用的所有api的返回值会在客户端alert出来
// 若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印 
        debug: false,
        appId: data.appid, // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.signature, // 必填，签名
        jsApiList: jsApi, // 必填，需要使用的JS接口列表
        openTagList: ['wx-open-launch-weapp', 'wx-open-subscribe']
})
wx.error(function (res) {
   console.log('res 签名失败', res)
   resolve()
// config信息验证失败会执行error函数，如签名过期导致验证失败，
// 具体错误信息可以打开config的debug模式查看，
// 也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
})
} catch (e) {
      resolve()
    }
})
}
  1. 微信分享签名方法注册 微信的config注册成功后通过ready接口处理成功验证
 wx.ready(function () {
        try {
          if (hideFlag) {
            wx.hideAllNonBaseMenuItem()
          } else {
            wx.showAllNonBaseMenuItem()
          }
          wx.showMenuItems({
            menuList: ['menuItem:copyUrl']
          })
        } catch {}
        resolve()
        //需在用户可能点击分享按钮前就先调用
        var shareData = {
          title: shareTitle  // 分享标题
          desc: shareDesc, // 分享描述
 // 该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          link: share_link `, // 分享链接
          imgUrl: imgUrl, // 分享图标
          success: () => {
            console.log('分享设置成功')
          },
          fail: e => {
            console.log('链接：', share_link)
            console.log('分享设置失败', e)
          }
        }
        // 1.2.0 老接口
        wx.onMenuShareAppMessage(shareData)
        wx.onMenuShareTimeline(shareData)
        // 1.4.0 新接口 (只调用这个接口在安卓下是无效的)
        wx.updateAppMessageShareData(shareData)
        wx.updateTimelineShareData(shareData)
      })
  1. 每次分享或页面跳转的时候都需要重新注册
router.beforeEach(async (to, from, next) => {
 // 属于清空上一次设置的分享信息，否则分享的就是上一次分享
 await  wxShare()
})
页面有特殊使用单独调用
 wxShare()
  1. 设置成功分享示例 image.png
  2. 如何记录用户点击了多少次分享这个功能

微信内部打开小程序

使用微信标签

小程序内部webview

微信支付

微信获取地址信息

微信获取录音

微信图片处理

文章参考链接，感谢其他作者

avatar
文章
阅读
粉丝