首页 > 其他分享> 文章详细

公众号分享功能的实现

2022-07-07 16:36:08 阅读：178 来源： 互联网

标签：功能 const success title 公众 import 分享 config wx

1.公众平台配置ip白名单 https://mp.weixin.qq.com/

设置与开发》基本配置》公众号开发信息》 ip白名单接口地址对应的ip

2.业务域名和JS安全域名的设置

设置与开发》公众号设置》功能设置》业务域名和JS安全域名

在设置的时候有个txt需要放到前端的public文件夹下面

3.weixin-js-sdk 的安装

npm install weixin-js-sdk

4.开始贴代码了

在main.ts 引入 import '@/utils/wx/wx.config'

wx.config.ts 文件

import wx from 'weixin-js-sdk'
import { getWxJssdk } from '@/apis/wx.api'
import { Toast } from 'vant'
const w = (window as any)
if (typeof w.entryUrl === 'undefined' || w.entryUrl === '') {
  w.entryUrl = location.href.split('#/')[0]
}
// 进行签名的时候  Android 不用使用之前的链接， ios 需要
const signLink = /(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : w.entryUrl;

(async function () {
  const config:any = await getWxJssdk(signLink)
  // Toast({
  //   message: `${JSON.stringify(config)} --- ${signLink}`,
  //   duration: 10000
  // })
  // console.log(signLink, 'signLink')
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    beta: false,
    appId: config.appId, // 必填，公众号的唯一标识
    timestamp: config.timestamp, // 必填，生成签名的时间戳
    nonceStr: config.nonceStr, // 必填，生成签名的随机串
    signature: config.signature, // 必填，签名，见附录1
    jsApiList: [
      'updateAppMessageShareData',
      'updateTimelineShareData'
    ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2，
  })
})()

wx.function

import wx from 'weixin-js-sdk'

interface ShareOptionsProps {
  title: string;
  desc?: string;
  link: string;
  imgUrl?: string;
  success?: (res?:any) => {}
}

/**
  * 分享链接
  * @param data
  */
export function setWxShare (shareOptions: ShareOptionsProps) {
  const { title, desc, link, imgUrl, success } = shareOptions
  console.log(title, desc, link, imgUrl)
  wx.ready(function () {
    // 分享给朋友
    wx.updateAppMessageShareData({
      title, // 分享标题
      desc, // 分享描述
      link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl, // 分享图标
      success: function (res: any) {
        success && success(res)
      }
    })

    // 分享给朋友圈
    wx.updateTimelineShareData({
      title, // 分享标题
      link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl, // 分享图标
      success: function (res: any) {
        success && success(res)
      }
    })
  })
}

　在routes路由文件配置mate

 meta: {
      title: '爆品构件推荐',
      shareTitle: 'PC构件目录',
      shareDesc: '大乐装 | 装配式建筑一站式交付平台',
      shareUrl: location.origin
    }

最后路由守卫里的处理 main.ts 引入 import '@/routers/guard'

guard.ts

import { setWxShare } from '@/utils/wx/wx.function'
import router from './index'

const DETAULT_SHARE_IMG_URL = 'https://cz-filemino.dalezhuang.com/template/799008d73916462d88dc4976417e6cf0.png'

router.beforeEach((to, from, next) => {
  const url = location.href
  if (to.meta) {
    document.title = to.meta.title as string
    const { shareTitle, shareDesc, shareUrl, shareImgUrl } = to.meta as any
    setWxShare({
      title: shareTitle,
      desc: shareDesc,
      link: shareUrl || url,
      imgUrl: shareImgUrl || DETAULT_SHARE_IMG_URL
    })
  }
  next()
})

router.afterEach((to) => {
  if (!to.meta?.keepAlive) {
    window.scrollTo(0, 0)
  }
})

完了！！！摘要： https://blog.csdn.net/jlq_diligence/article/details/119704631

标签：功能,const,success,title,公众,import,分享,config,wx
来源： https://www.cnblogs.com/daifuchao/p/16455135.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

公众号分享功能的实现