微信小程序“页面内发起转发”开发问题汇总

最新更新时间：2019年12月25日22:34:21

《猛戳-查看我的博客地图-总有你意想不到的惊喜》

本文内容：微信小程序通过转发，将小程序以消息卡片的形式发送给好友，好友点击聊天记录中的消息卡片，可以进入这个小程序。

转发

转发，是指小程序界面右上角三个点调起底部弹框选择器，其中有一个转发按钮，会将这个小程序以消息卡片的形式发送给好友

• 不自定义转发图片的情况下，默认会取当前页面，从顶部开始，高度为 80% 屏幕宽度的图像作为转发图片
• 自定义转发图片需要在Page.onShareAppMessage事件中返回图片地址

如果觉得小程序原生的转发交互太复杂，可以在页面自定义转发按钮，通过给 button 组件设置属性 open-type="share"，可以在用户点击按钮后触发 Page.onShareAppMessage 事件，如下：

<button open-type="share">这是一个自定义的转发按钮</button>

转发按钮，旨在帮助用户更流畅地与好友分享内容和服务。转发，应是用户自发的行为，且在需要时触手可及

A用户转发给B用户的方案

假如在pages/me/share.js页面开启转发功能，需要对onShareAppMessage方法进行重写，转发卡片消息的自定义参数shareInfo(这个字符串可以随意起名)配置如下：

onShareAppMessage: function() {
    let obj = {a:1,b:2};
    return {
      title: “标题”,
      path: `/pages/index/index?shareInfo=${JSON.stringify(obj)}`,
      imageUrl: ''
    }
  }

B用户打开好友A消息卡片获取参数的三种方案

• 在 App 的 onLaunch 和 onShow中通过options.query.shareInfo获取到参数”{“a”:1,”b”:2}”
• 在/pages/index/index.js的 onLoad中通过options.shareInfo获取到参数”{“a”:1,”b”:2}”
• 在同步方法wx.getLaunchOptionsSync中获取上述场景值。

备注：wx.getLaunchOptionsSync()获取小程序启动时的参数。与 App.onLaunch 的回调参数一致。

通过微信开发者工具来测试转发功能的方案

自定义编译模式：

• 模式名称：自定义
• 启动页面：自定义
• 启动参数：shareInfo={“a”,1"b",2}
• 进入场景选择 1007：单人聊天会话中的小程序消息卡片

• 自定义编译模式设置好，开发者工具会自动存储，设置数据如下图：
  
• 启动参数的获取，同上面B用户打开好友A消息卡片获取参数的三种方案

转发功能的开启和关闭

只有定义了onShareAppMessage(Object object)事件处理函数，右上角菜单才会显示“转发”按钮；
也就是说，如果手动添加了Page.onShareAppMessage事件，即使函数内容为空，用户点击右上角三个点，底部弹框选择器会出现分享按钮，此时分享的是当前这个页面。相反，页面没有声明Page.onShareAppMessage函数，点击右上角三个点，底部弹框选择器不会出现分享按钮；

参考资料

• onShareAppMessage(Object object)
• 转发
• wx.getLaunchOptionsSync
• 场景值
• 场景值列表

感谢阅读，欢迎评论^-^

打赏我吧^-^