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

本是古典何须时尚 2023-06-25 04:47 10阅读 0赞

###### *最新更新时间：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：单人聊天会话中的小程序消息卡片

*  自定义编译模式设置好，开发者工具会自动存储，设置数据如下图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70]
 *  启动参数的获取，同上面`B用户打开好友A消息卡片获取参数的三种方案`

#### 转发功能的开启和关闭 ####

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

#### 参考资料 ####

*  [onShareAppMessage(Object object)][onShareAppMessage_Object object]
 *  [转发][Link 1]
 *  [wx.getLaunchOptionsSync][]
 *  [场景值][Link 2]
 *  [场景值列表][Link 3]

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

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191225224938568.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA==,size_16,color_FFFFFF,t_70
[onShareAppMessage_Object object]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html
[wx.getLaunchOptionsSync]: https://developers.weixin.qq.com/miniprogram/dev/api/base/app/life-cycle/wx.getLaunchOptionsSync.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html
[Link 3]: https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460