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

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

效果图:


微信小程序之转发功能(附效果图和源码)_第1张图片
sharePage.png

微信小程序之转发功能(附效果图和源码)_第2张图片
sharePage2.png
微信小程序之转发功能(附效果图和源码)_第3张图片
shareFriends.png

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

示例代码:



  
    
       
    
    
      奔驰A230
      
    
    
      梅赛德斯-奔驰旨在为消费者服务
      
    
   

step2:在js中加上onShareAppMessage函数

示例代码:

 /**
* 用户点击右上角分享(index.js)
*/
 onShareAppMessage: function (ops) {
   if (ops.from === 'button') {
     // 来自页面内转发按钮
     console.log(ops.target)
   }
   return {
     title: 'xx小程序',
     path: 'pages/index/index?id=123&age=18',  // 路径,传递参数到指定页面。
     imageUrl:'../../imgs/xx.png' // 分享的封面图
     success: function (res) {
       // 转发成功
       console.log("转发成功:" + JSON.stringify(res));
     },
     fail: function (res) {
       // 转发失败
       console.log("转发失败:" + JSON.stringify(res));
     }
   }

 }

获取参数

// index.js
Page({
    onLoad: function(options) {
        console.log(options);
        console.log(options.id);
        console.log(options.age);
    }
})

官方说明:


微信小程序之转发功能(附效果图和源码)_第4张图片

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

其它文章请访问:

  • 微信小程序之自定义组件
  • 微信小程序之根据经纬度反查地址
  • 微信小程序之转发功能(附效果图和源码)
  • 微信小程序之轮播图的实现(附效果图和源码)
  • 微信小程序之tab的实现(附源代码和效果图)
  • 微信小程序之多列表的显示和隐藏功能(附源码)

你可能感兴趣的:(微信小程序之转发功能(附效果图和源码))