【VUE】app混合开发之配置微信二次分享

在app内混合开发中，分享页面是必不可少的，但是分享到微信时二次分享就会没有分享的设置，这时候就需要自己配置微信二次分享，使用说明请查看微信JS-SDK说明文档

//API.js
import axios from 'axios'
export function getWeixinJsSdkConfig(apis = []) {
  let location_href = encodeURIComponent(window.location.href.split('#')[0])
  let url = `${host}/share/config?url=${location_href}&${
    apis.map(api_name => `jsApiList[]=${api_name}`).join("&")
    }`

  return axios.get(url).then(res => {
    let res_data = res.data;
    if (res_data.code !== 0) throw res_data.msg;
    return res_data.data;
  })
}

//WXshare.js

//获取jssdk的接口
import { getWeixinJsSdkConfig } from "../api/API";

// TODO: 配置
export const weixinJsSDKAuth = new Promise((resolve) => {
  let timeout = setTimeout(function () {
    console.log("微信jssdk授权验证 等待 10000 ms 超时, 可能不在微信环境...");
    resolve(false);
  }, 10000);

  wx.ready(_ => {
    clearTimeout(timeout);
    resolve(true)
  });
  wx.error(function (res) {
    clearTimeout(timeout);
    console.error("wx.error 微信jssdk授权验证失败 %o", res);
    resolve(false);
  });

  // TODO: 在这里请求jssdk的配置信息
  (
    window._jssdk_config ?
    Promise.resolve(window._jssdk_config) :
    (getWeixinJsSdkConfig(['onMenuShareTimeline', 'onMenuShareAppMessage', 'chooseWXPay']))
  ).then(config => {
      console.log('微信JSSDK授权信息: ', config)
      wx.config(config || {});
    });
})

const wx_share_title = document.title; // TODO: 默认微信分享标题在这
const wx_share_detail = '嘻嘻嘻嘻嘻嘻！'; // TODO: 默认分享话术在这
const wx_share_img = require('../../../static/logo.jpg');
//微信分享时会讲#号后的截断，所以手动加上location.hash，防止地址错误
const wx_share_link = window.location.href.split('#')[0] + location.hash ;


// TODO: 微信二次分享公共设置
export const wxShareMessages = (shareTitle, shareDesc, shareLink, shareImg, shareSuccess) => {
  let options = {
    title: shareTitle || wx_share_title ,
    desc: shareDesc || wx_share_detail 
     link: (shareLink || getRouterLink()).replace(/http:\/\//, 'https://'), //解决分享出来链接变成http的问题
    imgUrl: shareImg || wx_share_img ,
    success: shareSuccess || (_ => void 0)
  }

  console.log('微信转发参数: ', options)

  weixinJsSDKAuth.then(boo => {
    if (boo) {
      wx.onMenuShareTimeline(options)
      wx.onMenuShareAppMessage(options)
    }
  })
}

//挂载在window对象上，方便全局调用
window.wxShareMessages = wxShareMessages ;

调用方法

import { wxShareMessages } from "../misc/wxShare"

 // 微信分享回调
//第一种使用
wxShareMessages ( )
//第二种使用
wxShareMessages ( 
     title, '啧啧啧啧啧啧啧啧啧', null, img, () => {  分享时执行xx方法}
})