zl程序教程

您现在的位置是:首页 >  工具

当前栏目

微信分享

微信 分享
2023-09-11 14:19:39 时间
import global from '@/js/global.js';
import api from '@/js/api.js';
import tools from '@/js/tools.js';
var url=encodeURIComponent(window.location.href.split('#')[0]);//当前页面路径
console.log(decodeURIComponent(url))
var huiyi_id=JSON.parse(localStorage.getItem('meetingManagerStore')).meetingConfigData.id;//会议id
var wxconfig={
  appId:"",
  noncestr:"",
  openId:"",
  signature:"",
  timestamp:""
}
//获取配置参数
function getWxConfig(callback){
  api.post(global.lipeng+"/weChat/getWechatInfo",{huiyi_id,url},res=>{
    if(res.data.success){
      wxconfig={...wxconfig,...res.data.data};
      wxInit(wxconfig,callback)//调用初始化方法
    }else{
      tools.msgErr(res.data.message||'error');
    }
  },err=>{
    console.log(err);
  });
}
//微信初始化方法
function wxInit(wxconfig,callback){
    var configData={
      beta: true,
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
      appId: wxconfig.appId, // 必填,公众号的唯一标识
      timestamp:wxconfig.timestamp, // 必填,生成签名的时间戳
      nonceStr: wxconfig.noncestr, // 必填,生成签名的随机串
      signature: wxconfig.signature,// 必填,签名
      jsApiList: [// 必填,需要使用的JS接口列表
        'chooseInvoiceTitle',//获取发票信息
        'updateAppMessageShareData',//分享给微信朋友
      ] 
    };
    wx.config(configData);


    //初始化config完成后 自动调用ready方法
    wx.ready(function(){
      console.log(wxconfig)
      if(wxconfig.appId&&wxconfig.timestamp&&wxconfig.noncestr&&wxconfig.signature){
        if(callback){
          callback();
        }
      }else{
        tools.msgErr("微信初始化失败")
      }
    });
    wx.error(function(res){//初始化失败
      console.error(res)
    });
}

//wxInvoke获取发票数据的方法
function wxInvoke(){
  return new Promise(resolve=>{
    wx.invoke('chooseInvoiceTitle', {
      // 这里要传入参数
      "scene":"1"
    }, function (res) {
      // 这里处理调用结果
      if(res.err_msg=="chooseInvoiceTitle:ok"){//选取发票抬头成功
        resolve(res.choose_invoice_title_info);
      }else if(res.err_msg=="chooseInvoiceTitle:fail"){
        tools.msgErr("选取发票抬头失败");
      }else if(res.err_msg=="chooseInvoiceTitle:cancel"){
        tools.msgErr("取消选取发票抬头");
      }
    })
  })
}
//wxShareToFriend分享给朋友
function wxShareToFriend(shareParams){
  wx.updateAppMessageShareData({
    title:shareParams.title, // 分享标题
    desc: shareParams.desc, // 分享描述
    link: shareParams.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: shareParams.imgUrl, // 分享图标
    success: function () {
      // 设置成功
    }
  })
}



export default{
  getWxConfig,//获取配置参数
  wxInit,//微信初始化方法
  wxInvoke,//获取发票信息的方法
  wxShareToFriend,//分享给微信朋友
}
  
  

解决vue中分享只能分享落地页的情况:

app.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(to) {
        // 微信浏览器判断
        const WECHAT_BROWSER = navigator.userAgent.toLowerCase().includes('micromessenger')
    
        // 解决iOS微信浏览器分享地址只能是落地页的问题,这个操作是不会刷新页面的,query参数改变也会执行
        if (WECHAT_BROWSER) {
          // eslint-disable-next-line
          window.location.href = window.location.href
        }
      }
    },
  }
}
</script>
<style>
#app {
}

</style>

分享时的link“”

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