美文网首页小程序
微信小程序之自定义分享

微信小程序之自定义分享

作者: Amazing慕丶涵 | 来源:发表于2020-09-16 19:17 被阅读0次

    一、自定义分享(页面内发起转发)

    微信小程序中自定义分享: 该功能将客户看到的小程序页面进行分享,从而达到页面的传播作用。
    通过给 button 组件设置属性 open-type="share",可以在用户点击按钮后触发 Page.onShareAppMessage 事件,相关组件:button

    二、小程序页面中的代码展示

    <!-- 自定义分享,在界面中只能通过按钮来触发 -->
      <view class="shareBox">
        <text>分享好友</text>
        <button type="primary" open-type="share">分享好友</button>
      </view>
    

    上诉button按钮需要绑定open-typre=“share” 这个参数即可实现分享好友功能。
    注意:模拟器不支持,需要在真机上进行测试。

    三、在分享页面调用的js中进行触发

    // 自定义分享
      onShareAppMessage() {
        return {
          title: this.data.info.fang_name,
          path: '/pages/fang/fang?id=' + this.data.info.id + '&openid=' + cache.get('openid'),
          imageUrl: this.data.info.pic
        }
      }
    

    其中有三个参数:

    • 1、分享页面的标题设置
    • 2、分享的页面路径
    • 3、分享的图片设置

    四、官网手册详情

    onShareAppMessage(Object object)

    监听用户点击页面内转发按钮(button 组件 open-type="share")或右上角菜单“转发”按钮的行为,并自定义转发内容。

    注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮

    参数 类型 说明 最低版本
    from String 转发事件来源。button:页面内转发按钮;menu:右上角转发菜单 1.2.4
    target Object 如果 from 值是 button,则 target 是触发这次转发事件的 button,否则为 undefined 1.2.4
    webViewUrl String 页面中包含web-view组件时,返回当前web-view的url 1.6.4

    此事件处理函数需要 return 一个 Object,用于自定义转发内容,返回内容如下:

    自定义转发内容 基础库 2.8.1 起,分享图支持云图片。

    字段 说明 默认值 最低版本
    title 转发标题 当前小程序名称
    path 转发路径 当前页面 path ,必须是以 / 开头的完整路径
    imageUrl 自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。 使用默认截图 1.5.0

    相关文章

      网友评论

        本文标题:微信小程序之自定义分享

        本文链接:https://www.haomeiwen.com/subject/iwpfyktx.html