zoukankan      html  css  js  c++  java
  • 微信小程序之转发功能(附效果图和源码)

    小程序分享或转发有两种方式,一种是通过在页面中自定义按钮的形式,另外一种只需要在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

  • 相关阅读:
    go语言的grpc安装记录
    MySQL1:客户端/服务器架构
    设计模式
    乐观锁与悲观锁的选择
    compareAndSwapObject 产生ABD原因
    wangEditor
    ckeditor4学习
    git公司远程提交
    java面试题总结
    基本数据类型和包装类
  • 原文地址:https://www.cnblogs.com/YYW303/p/9406030.html
Copyright © 2011-2022 走看看