微信自定义分享链接和图文

简介

普通的WAP页面，使用微信浏览器打开后。点击右上角的...，在打开的弹窗中选择发送给朋友、分享到朋友圈、分享到手机QQ、分享到QQ空间等时，分享出去的内容、图片等没法自定义

必要的准备

微信认证过的公众号：必须是认证过的，未认证或者认证过期都不行
备案过的域名
服务器：前端页面需要的appId、signature是需要后台传递过来的

绑定域名

获取access_token

需要后端开发，主要功能是利用公共号APPID、APPSECRET从微信服务器获取对应的access_token
利用前一步得到的access_token来获取签名等认证信息。只有正确的配置才可以正常获取到使用官方js-sdk的权限

具体可参考官方示例代码

前端配置

以前后端分离模式为例

判断是微信浏览器

// src/utils/browser
export function isWechat() {
  var ua = navigator.userAgent.toLowerCase()
  return (ua.match(/MicroMessenger/i) == "micromessenger")
}

获取获取签名等认证信息

// src/utils/wxshare.js
let url = window.location.href.split('#')[0]

async function getSign () {
  let data = { url }
  return axios.post('https://xxx', JSON.stringify(data))
}

配置分享信息并通过ready接口处理

// src/utils/wxshare.js
export async function wxShareInit (configData) {
  const signData = await getSign()
  let data = signData.data
  if (data.status === 200) {
    const resData = data.data
    window.wx.config({
      debug: false,
      appId: resData.appId,
      timestamp: resData.timestamp,
      nonceStr: resData.nonceStr,
      signature: resData.signature,
      url,
      jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo'] // 必填，需要使用的JS接口列表
    })
    window.wx.ready(function () {
      window.wx.checkJsApi({
        jsApiList: [
          'onMenuShareTimeline',
          'onMenuShareAppMessage',
          'onMenuShareQQ',
          'onMenuShareWeibo'
        ]
      })
      window.wx.onMenuShareAppMessage({
        title: configData.title,
        desc: configData.desc,
        link: configData.link,
        imgUrl: configData.imgUrl,
        type: 'link',
        dataUrl: '',
        success: configData.success,
        cancel: configData.cancel
      })
      window.wx.onMenuShareTimeline({
        title: configData.desc,
        link: configData.link,
        imgUrl: configData.imgUrl,
        success: configData.success,
        cancel: configData.cancel
      })
      window.wx.onMenuShareQQ(configData)
      window.wx.onMenuShareWeibo(configData)
    })
  } else {
    Toast({ message: data.desc })
  }
}

备注：
wx.onMenuShareAppMessage、wx.onMenuShareTimeline、wx.onMenuShareQQ、wx.onMenuShareWeibo必须放在wx.ready函数体里面。

需要自定义配置的页面

需要先引入微信的js文件

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

自定义分享配置

import { isWechat } from '@/utils/browser'
import { wxShareInit } from '@/utils/wxshare'

export default {
  data () {
    return {
      shareData: {
        link: window.location.href,
        imgUrl: 'http://xxx/logo.png',
        title: '这是标题',
        desc: '这是描述',
        success: function () {},
        cancel: function () {}
      }
    }
  },
  mounted () {
    // 引用，根据具体情况
    // 比如根据页面接口返回情况修改自定义的分享数据，然后再调用
    this.wxshare()
  },
  methods: {
    wxshare () {
      if (isWechat()) {
        wxShareInit(this.shareData)
      }
    }
  }
}

分享调试

打开wx.config里的debug

将debug设置为true之后，手机进入页面，会弹出错误信息(PC不管有没有配置正确都会在开发者工具中打印出对应的分享信息，参考意义不是很大——不过可以拿来查看链接是否有误)。
如果正确的话，会提示{"errMsg"："config:ok"}。

提示{"errMsg"："config:invalid url domain"}
这个最常见，主要是域名没有被添加为js接口安全域名。
官方的说明里是要域名和使用的APPID对应的公共号绑定
如果使用了端口号，则配置的绑定域名也要加上端口号（一个appid可以绑定三个有效域名)
提示{"errMsg"："config:invalid signature"}
造成这个情况的可能性比较多。不过主要有以下三个原因：

APPID和APPSECRET填错了：可以到官方的调试页面获取access_token看看是否是正确的
超过了每日的access_token获取上限：官方限定每日2k次请求。所以如果没有缓存access_token的话，还是比较容易过限的。
微信公共号状态不正常：比如验证过期了，被封禁了等等。

常用的接口调试链接以及说明文档