uniapp 微信小程序 最近写的两个小程序中都会有,微信分享的设置,每次都在单个页面中写相同的内容,修改很不友好。下面全局分享代码做了记录

最近写的两个小程序中都会有,微信分享的设置,每次都在单个页面中写相同的内容,修改很不友好。下面全局分享代码做了割记录

  1. 首先在小程序中配置微信分享,和微信朋友圈, onShareAppMessage, onShareTimeline 这两个API 和 onLoad 同级目录配置
  2. 在小程序每个页面都要设置这两个函数,修改内容比较心烦,不符合代码风格。可以通过mixins 混入的方式给每个页面设置分享的内容
  3. 在使用 mixins 的时候, 可以在全局混入, 也可以在每个页面中混入
配置分享的两个函数
 onShareAppMessage(res) {
    return {
        title: '',
        path: '',
        imageUrl: '',
    }
},
//2.分享到朋友圈
onShareTimeline(res) {
    return {
        title: '',
        path: '',
        imageUrl: '',
    }
},
每个页面中混入的方式
share.js
export default {
  onShareAppMessage: function () {
      const _this = this;
      const tx_title = '热门头像|个性头像|高清头像|海量资源 应用尽有 免费下载'
      const bz_title = '性感壁纸|美女壁纸|炫酷壁纸|省电壁纸|唯美壁纸海量资源  应用尽有 免费下载'
      const shareTitle = this.urlPath == 'bizhi' ? bz_title : tx_title
      return {
        title: shareTitle,
        desc: shareTitle,
        path: `/pages/${this.urlPath}/index?active=${_this.active}`, // 路径,传递参数到指定页面。
      }
    },
       /*分享朋友圈 */
   onShareTimeline: function() {
      const _this = this;
      const tx_title = '热门头像|个性头像|高清头像|海量资源 应用尽有 免费下载'
      const bz_title = '性感壁纸|美女壁纸|炫酷壁纸|省电壁纸|唯美壁纸海量资源  应用尽有 免费下载'
      const shareTitle = this.urlPath == 'bizhi' ? bz_title : tx_title
      return {
        title: shareTitle,
      }
    },
}

设置分享的页面
import share from '../share/index.js'
export default {
  mixins: [share],
}
全局设置分享
share.js
export default {
  data() {
      return {
          // 默认的全局分享内容
          share: {
              title: '国考|社保卡|驾驶证|简历|小二寸|小一寸|二寸|一寸,免费制作标准证电子证件照',
              path: '/pages/index/index',    // 全局分享的路径
              imageUrl: '../../static/banner1.png',    // 全局分享的图片(可本地可网络)
          }
      }
  },
  // 定义全局分享
  // 1.发送给朋友
  onShareAppMessage(res) {
      return {
          title: this.share.title,
          path: this.share.path,
          imageUrl: this.share.imageUrl,
      }
  },
  //2.分享到朋友圈
  onShareTimeline(res) {
      return {
          title: this.share.title,
          path: this.share.path,
          imageUrl: this.share.imageUrl,
      }
  },
}
main.js 
import share from './pages/share/index.js'
import Vue from 'vue'
Vue.mixin(share)

可以根据自己项目页面多少选择方式

下面是我的小程序体验码,希望能和大家共同学习进步

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QeXGArwz-1668584710335)(https://img.shields.io/badge/QQ%E7%BE%A4-662778421-green)]

制作头像小程序

制作头像小程序

[项目代码] https://gitee.com/eyes-star/txy-openmp.git
制作头像小程序

[项目代码] https://gitee.com/eyes-star/zjz-openmp.git

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

eyes-star

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值