关于微信分享朋友朋友圈踩坑

技术栈

vue + axios + vue-router + vuex

微信文档地址

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#10

​步骤

上面是基本流程，具体列子：

1到3步骤是固定步骤，一定要先完成了在接着跑第四步。

具体demo如下：

1、获取config信息

​这里需要注意的是，传给后端的url一定一定要是当前浏览器的url，不然会导致失败。就是下列代码的baseUrl一样设置，并且一定要用encodeURIComponent对URL编码。切记！！！

第二个要注意的就是分析的logo一定要是完整的路径，不然微信分享的时候不会正确显示图片。

/**     * 获取微信config信息     */    getWxToken ({ commit, state, dispatch }, opts = {}) {      var baseUrl = `${window.location.href.split('#')[0]}`​      const conf = {        title: `分享标题`,        desc: '前端选修课来咯',        link: `${baseUrl}`,        imgUrl: `${window.location.origin}/kjyq.png`      }​      apiData.getToken({        url: encodeURIComponent(`${baseUrl}`)      }).then(res => {        if (res) {          dispatch('setWXShareConfig', res.data)​          // 允许分享的白名单          const whiteList = ['/login', '/share']​          // 设置微信分享信息          window.wx.ready(function () {            if (whiteList.includes(window.location.pathname)) {              updateAppMessageShareData(conf)              updateTimelineShareData({                title: conf.title,                link: conf.link,                imgUrl: conf.imgUrl              })              showMenuItems()            } else {              hideMenuItems()            }          })        }      })    }

2、设置微信config

这里需要注意的是，一定把需要调用的微信API写到jsApiList里面，不然微信一定会报错。

/**     * 设置分享配置     */    setWXShareConfig ({ commit, dispatch, state }, data) {      if (window.wx) {        window.wx.config({          // debug: window.location.host === 'pma-m-t.wisdomcity.com.cn', // 测试环境开启调试模式          debug: false, // 测试环境开启调试模式          appId: data.appid, // 必填，公众号的唯一标识          timestamp: data.timestamp, // 必填，生成签名的时间戳          nonceStr: data.noncestr, // 必填，生成签名的随机串          signature: data.jsapi_ticket, // 必填，签名          jsApiList: [            'updateAppMessageShareData',            'updateTimelineShareData',            'hideAllNonBaseMenuItem',            'showAllNonBaseMenuItem',            'hideMenuItems',            'showMenuItems'          ] // 必填，需要使用的JS接口列表        })      }    }

3、分享微信功能

/** * 自定义“分享给朋友”及“分享到QQ”按钮的分享内容 */export function updateAppMessageShareData (opts) {  if (window.wx) {    window.wx.updateAppMessageShareData({      title: opts.title, // 分享标题      desc: opts.desc, // 分享描述      link: opts.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致      imgUrl: opts.imgUrl, // 分享图标      success: function () {}    })  }}/** * 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容 */export function updateTimelineShareData (opts) {  if (window.wx) {    window.wx.updateTimelineShareData({      title: opts.title, // 分享标题      link: opts.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致      imgUrl: opts.imgUrl, // 分享图标      success: function () {}    })  }}/** * 隐藏微信分享菜单列表 */export function hideMenuItems () {  if (window.wx) {    window.wx.ready(function () {      window.wx.hideAllNonBaseMenuItem()    })  }}/** * 显示微信分享菜单列表 */export function showMenuItems () {  if (window.wx) {    window.wx.ready(function () {      window.wx.showAllNonBaseMenuItem()    })  }}

4、使用

因为使用的是vue的技术栈，所以这里使用的时候会调用vuex的action方法

/** * 获取分享信息 */getComfigDataInfo ({ commit, dispatch, state, rootState }, cmms) {  dispatch('common/getWxToken', {    link: `${window.location.origin}/share?id=${cmms.communityId}`  }, { root: true })}

完整代码

/* * @Author: WangQiBiao * @Date: 2020-02-20 12:03:03 * @LastEditors: WangQiBiao * @LastEditTime: 2020-02-22 09:37:40 * @Description: */import apiData from '@/api/data'import { updateAppMessageShareData, updateTimelineShareData, hideMenuItems, showMenuItems } from '@/assets/script/utils'export default {  namespaced: true,  actions: {    /**     * 设置分享配置     */    setWXShareConfig ({ commit, dispatch, state }, data) {      if (window.wx) {        window.wx.config({          // debug: window.location.host === 'pma-m-t.wisdomcity.com.cn', // 测试环境开启调试模式          debug: false, // 测试环境开启调试模式          appId: data.appid, // 必填，公众号的唯一标识          timestamp: data.timestamp, // 必填，生成签名的时间戳          nonceStr: data.noncestr, // 必填，生成签名的随机串          signature: data.jsapi_ticket, // 必填，签名          jsApiList: [            'updateAppMessageShareData',            'updateTimelineShareData',            'hideAllNonBaseMenuItem',            'showAllNonBaseMenuItem',            'hideMenuItems',            'showMenuItems'          ] // 必填，需要使用的JS接口列表        })      }    },    /**     * 设置微信分享内容     */    setShareInfo ({ commit, state }, cf = {}) {      window.wx.ready(function () {        updateAppMessageShareData(cf)        updateTimelineShareData({          title: cf.title,          link: cf.link,          imgUrl: cf.imgUrl        })      })    },    /**     * 获取微信config信息     */    getWxToken ({ commit, state, dispatch }, opts = {}) {      var baseUrl = `${window.location.href.split('#')[0]}`​      const conf = {        title: `${sessionStorage.getItem('CMMS_NAME') || ''}今日物业疫情防控工作汇总`,        desc: '前线是医生，一线是物业',        link: opts.link || window.location.origin,        imgUrl: `${window.location.origin}/kjyq.png`      }​      apiData.getToken({        url: encodeURIComponent(`${baseUrl}`)      }).then(res => {        if (res) {          dispatch('setWXShareConfig', res.data)​          // 允许分享的白名单          const whiteList = ['/communitys/home', '/login', '/share']​          // 设置微信分享信息          window.wx.ready(function () {            if (whiteList.includes(window.location.pathname)) {              updateAppMessageShareData(conf)              updateTimelineShareData({                title: conf.title,                link: conf.link,                imgUrl: conf.imgUrl              })              showMenuItems()            } else {              hideMenuItems()            }          })        }      })    }  }}​

个性化每个页面的分享内容

如果想设置每个页面的分享内容不一样，以vue为例子，可以在vue-router的路由拦截里做相应的设置，如下。

比如这个例子就是对不同的页面显示不同的微信分享菜单。

import store from './../store'router.afterEach(route => {  setTimeout(() => {    // 小区首页分享详情，跳过，单独在小区首页设置；否则分享当前页面    if (route.path !== '/communitys/home') {      store.dispatch('common/getWxToken')    }  }, 300)})