微信小程序带参数分享界面、打开界面加载分享内容

分享功能是微信小程序常用功能之一,带参分享和加载可以让分享对象打开界面时看到和分享内容。

带参分享

用户点击微信小程序右上角自带分享,或者点击自定义分享按钮进行分享时,可在onShareAppMessage函数定义分享行为。

分享界面路径可带参,可在路径后加?,然后加上带的参数,一般格式为[参数名]=[参数值],需注意的是,参数值需为string,如果你的参数是对象类型,可以通过JSON.stringify转为string,后续可通过JSON.parse转回对象类型。

javascript 复制代码
  onShareAppMessage() {
    var card_info = {
      info1: this.data.info1,
      info2: this.data.info2,
    }
    var card_string = JSON.stringify(card_info)
    return{
      path: '/pages/ex-card/ex-card?card_string='+card_string
    }    
  },

需注意的是,自定义分享按钮open-type需设为"share":

html 复制代码
<button type="primary" plain size="mini" open-type="share" style="position: absolute;right:0;font-size:small;margin-right: 10rpx;">分享</button>

带参加载界面

在onLoad函数定义加载行为:

判断加载时是否带参,带参时使用参数加载,不带参使用默认值加载。

javascript 复制代码
  onLoad(options) {
    var page = getCurrentPages()
    var current_page = page[page.length-1]
    if(Object.keys(current_page.options).length>0)
    {
      var card_options = JSON.parse(current_page.options.card_string)
      this.setData({
        info1:card_options.info1,
        info2: card_options.info2
      })     
    }
  },

更多微信小程序内容欢迎关注、评论、私信博主。

相关推荐
whinc2 天前
🚀 两年小程序开发,我把踩过的坑做成了开源 Skills
前端·微信小程序·ai编程
Lupino2 天前
烧掉 10 刀 API 费,我才明白小程序虚拟列表根本不用“库”!
react.js·微信小程序
小溪彼岸3 天前
是时候给想做小程序的小伙伴泼盆冷水了
微信小程序
远山枫谷4 天前
一文理清页面/组件通信与 Store 全局状态管理
前端·微信小程序
木易士心5 天前
一文读懂:微信小程序云数据库直连原理与使用指南
微信小程序·serverless
明月_清风5 天前
小程序云函数:从入门到全栈的“降维打击”指南
前端·微信小程序·小程序·云开发
拉不动的猪6 天前
移动端调试工具VConsole初始化时的加载阻塞问题
前端·javascript·微信小程序
WangHappy8 天前
不写 Canvas 也能搞定!小程序图片导出的 WebView 通信方案
前端·微信小程序
小时前端8 天前
微信小程序选不了本地文件?用 web-view + H5 一招搞定
前端·微信小程序·uni-app
icebreaker9 天前
Weapp-vite:原生模式之外,多一种 Vue SFC 选择
前端·vue.js·微信小程序