微信小程序之转发功能(附效果图和源码)

时间:2024-03-09 17:10:03

小程序分享或转发有两种方式,一种是通过在页面中自定义按钮的形式,另外一种只需要在js中定义 onShareAppMessage 函数,页面右上角就会出现转发的按钮。详细文档请参阅微信官方文档微信转发API。目前小程序好像暂不支持转发到微信朋友圈。

效果图:
sharePage.png sharePage2.pngshareFriends.png

step1:在需要转发功能的wxml中定义一个button按钮,按钮的属性中加上open-type="share"。

示例代码:

<!--index.wxml-->
<view class=\'container\'>
  <view class=\'card b-shadow\'>
    <view class=\'card-content\'>
      <image mode="widthFix"  src=\'../../images/benchi.png\'></image> 
    </view>
    <view class=\'carDesc carDesc1\'>
      <text>奔驰A230</text>
      <button class=\'share\' id="shareBtn" open-type="share" type="primary" hover-class="other-button-hover">
        <image src=\'../../images/share.png\'></image>
        分享
      </button>
    </view>
    <view class=\'carDesc carDesc2\'>
      <text>梅赛德斯-奔驰旨在为消费者服务</text>
      <button  class=\'bg-c\' type="primary" hover-class="other-button-hover">预约</button>
    </view>
  </view> 
</view>
step2:在js中加上onShareAppMessage函数

示例代码:

 /**
* 用户点击右上角分享(index.js)
*/
 onShareAppMessage: function (ops) {
   if (ops.from === \'button\') {
     // 来自页面内转发按钮
     console.log(ops.target)
   }
   return {
     title: \'xx小程序\',
     path: \'pages/index/index\',
     success: function (res) {
       // 转发成功
       console.log("转发成功:" + JSON.stringify(res));
     },
     fail: function (res) {
       // 转发失败
       console.log("转发失败:" + JSON.stringify(res));
     }
   }

 }

官方说明:
share.png

github地址:微信转发功能 欢迎start