开始

十分适合做分享功能。

global.js

  1. // 分享首页
  2. const shareHomepage = () => {
  3.   const link = `${window.location.origin}/course`
  4.   const shareConfig = {
  5.     title: '跟小帮规划学财商知识',
  6.     desc: '经济行情不好？小帮规划带你了解财商知识',
  7.     link: link,
  8.     imgUrl: 'https://course-static.xiaobangguihua.com/upload/9898c361-10c9-4b1e-8141-4d84ceae450d.png',
  9.   }
  11.   setWeixinShare(shareConfig)
  12. }
  14. // 分享笔记
  15. const shareNote = ({ noteId, uniqueId, productTitle, shareCredits = false }) => {
  16.   const link = `${window.location.origin}/course/note/landing/${uniqueId}/${noteId}?sourceType=h5wxshare`
  17.   const desc = `【小帮规划】${productTitle}精选笔记`
  18.   const shareConfig = {
  19.     title: '我又完成一条投资笔记，专门分享给你',
  20.     desc: desc,
  21.     link: link,
  22.     imgUrl: 'https://course-static.xiaobangguihua.com/upload/9898c361-10c9-4b1e-8141-4d84ceae450d.png',
  23.     success: async function() {
  24.       growingService.pageShare(this.link, this.title)
  25.       if (shareCredits) {
  26.         const { score = 0 } = await creditService.shareNote(uniqueId)
  27.         if (score > 0) {
  28.           Toast.show(`分享成功 +${score}积分`)
  29.         }
  30.       }
  31.     },
  32.     complete: function() {
  33.       GlobalModalShare.hide()
  34.     },
  35.   }
  37.   setWeixinShare(shareConfig)
  38. }
  40. window.addEventListener('xiaobang-wechat-share/homepage', e => {
  41.   shareHomepage(e.detail)
  42. })
  44. window.addEventListener('xiaobang-wechat-share/note', e => {
  45.   shareNote(e.detail)
  46. })

页面的js

  1. if (// 判断分享什么) {
  2.   const event = new CustomEvent('xiaobang-wechat-share/note', {
  3.     detail: {
  4.     noteId: this.noteId,
  5.     uniqueId: this.uniqueId,
  6.     productTitle: this.productTitle,
  7.     shareCredits: this.showShareButton,
  8.     },
  9.   })
  10.     window.dispatchEvent(event)
  11. } else {
  12.   const event = new CustomEvent('xiaobang-wechat-share/homepage')
  13.   window.dispatchEvent(event)
  14. }

weixin.js

  1. import weixinService from '@@/services/weixin'
  2. import { device } from '@@/utils/userAgent'
  3. import { getShareImageUrl } from '@@/utils/imageCrop'
  4. import growingService from '@@/services/growing'
  6. // 默认微信分享参数
  7. const defaultShareConfig = {
  8.   title: '小帮规划',
  9.   desc: '小帮规划',
  10.   link: `${window.location.origin}/course`,
  11.   imgUrl: 'https://oss.xiaobangtouzi.com/[xiaobangzouti]2019-06-19:5d0a0a594a3c5.png',
  12.   success: function() {
  13.     growingService.pageShare(this.link, this.title)
  14.   },
  15. }
  17. /**
  18.  * 设置微信分享
  19.  *
  20.  * @param {object} shareConfig 分享参数
  21.  */
  22. export const setWeixinShare = async shareConfig => {
  23.   if (device.isWeixin) {
  24.     const signature = await weixinService.getWeixinSignature()
  25.     const config = Object.assign({}, defaultShareConfig, shareConfig)
  26.     config.imgUrl = getShareImageUrl(config.imgUrl)
  27.     window.wx.config(signature)
  28.     window.wx.ready(() => {
  29.       window.wx.onMenuShareAppMessage(config)
  30.       window.wx.onMenuShareTimeline(config)
  31.     })
  32.   }
  33. }
  35. // 预览图片
  36. export const previewImage = (current, imageList) => {
  37.   window.wx.previewImage({
  38.     current: current, // 当前显示图片的http链接
  39.     urls: imageList, // 需要预览的图片http链接列表
  40.   })
  41. }