公告:本站整合全网多家VIP站点资源,全网虚拟资源一手掌握!!!
欢迎您访问本网站,请 注 册了解更多!
网站首页 > 网站源码 > IT技术 > vue > 正文

vue微信H5自定义分享兼容ios、PC、安卓

作者:免费资源网日期:2022-10-16浏览:189分类:vue

1.安装微信sdk


yarn add weixin-js-sdk // 安装依赖
// 或者在index.html引入<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
 
// 用依赖包在main.js引入
import wx from 'weixin-js-sdk'
Vue.prototype.$wx = wx

2.配置


 (1)首先获取签名等信息(appId, nonceStr, signature, timestamp)


向后端传当前路由:

location.href.split('#')[0]

(2)使用后端传回信息配置


const { appId, nonceStr, signature, timestamp } = res.data
this.$wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId, // 必填,公众号的唯一标识
            timestamp, // 必填,生成签名的时间戳
            nonceStr, // 必填,生成签名的随机串
            signature,// 必填,签名
            jsApiList:[
                      'updateAppMessageShareData',
                      'updateTimelineShareData',
                      'onMenuShareAppMessage',
                      'onMenuShareTimeline'] // 必填,需要使用的JS接口列表
          })
          this.$wx.ready(() => {
            this.shareConfig(timestamp) // 自定义分享,为了兼容ios用到timestamp
          })
          this.$wx.error(function(res) {
            console.log('config error', res.errMsg)
          })

(3)自定义分享信息


shareConfig (timestamp) { // 自定义分享内容
      let iosUrl = this.$isIOS() ? `#/?t=${timestamp}` : '' // ios需要添加时间戳
      const shareData = {
        title: '标题', // 分享标题
        desc: '描述', // 分享描述
        link:'link'+ iosUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: 'https://logo.png' // 分享图标,不能太大(小于30KB吧)不能是透明背景否则ios会有和默认图片重叠
      }
      const shareFriend = { // 分享好友
        ...shareData,
        success: function() {
          // 设置成功
          console.log('设置分享好友成功')
        },
        fail: function(res) {
          console.log('设置分享好友失败', res.errMsg)
        }
      }
      const shareTimeline = { // 分享朋友圈
        ...shareData,
        success: function() {
          // 设置成功
          console.log('设置分享朋友圈成功')
        },
        fail: function(res) {
          console.log('设置分享朋友圈失败', res.errMsg)
        }
      }
      if (this.$isPC()) { // 兼容PC端用旧接口
        this.$wx.onMenuShareAppMessage(shareFriend)
        this.$wx.onMenuShareTimeline(shareTimeline)
      } else {
        this.$wx.updateAppMessageShareData(shareFriend)
        this.$wx.updateTimelineShareData(shareTimeline)
      }
 
    }
$isIOS () {
    const u = navigator.userAgent
    return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) || u.indexOf('iPhone') > -1 || u.indexOf('iPad') > -1
}
$isPC() {
    const userAgentInfo = navigator.userAgent
    const Agents = ['Android', 'iPhone',
    'SymbianOS', 'Windows Phone',
    'iPad', 'iPod'
     ]
     let flag = true
     for (let i = 0; i < Agents.length; i++) {
      if (userAgentInfo.indexOf(Agents[i]) != -1) {
        flag = false
        break
      }
     }
     return flag
}

 

注意:标准字体大小前提下:


自定义分享的标题最多每行15字(PC14字),2行;


描述最多每行13字(PC11字),3行。



本站所有资源都来源于网络收集、网友提供或者交换而来!如果侵犯了您的权益,请及时联系本站客服,我们立刻删除!

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

你的会员级别无法评论,请升级会员