微信小程序——分享组件——button

微信小程序——分享组件——button

目的：利用button的分享属性来实现点击图片分享

效果图：点击图片和按钮都能拉起分享

实现原理：

就是简单的利用来扩大button的范围

open-type 的合法值

值	说明	最低版本
contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明	1.1.0
share	触发用户转发，使用前建议先阅读使用指引	1.2.0

label组件

定义和用法

标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

标签的 for 属性应当与相关元素的 id 属性相同。

代码：

wxml:

          <label><view class="weui-half-screen-dialog__ft-box">            
            <image class="weui-half-screen-dialog__ft-icon" src="../../images/icon/friends.png"></image>
            <button class="weui-btn" open-type="share">微信好友</button>
            </view><button hidden="true"></button>
          </label> 

js:

  //点击分享
  onShareAppMessage: function (res) {
    let shopId = this.data.id, title = '吃饭打折，就上天天饭团！';
    if (res.from === 'button') {
      return {
        title: title,
        path: '/pages/shop/shop?id=' + shopId,
        success: function (res) {
          console.log('成功', res)
        }
      }
    }
  },

去除button，实现点击图片分享

思路：隐藏button，利用label

wxml:

              <view class="title-box">
                  <text class="delete" bindtap="delete">x</text>   
                  <label><view class="share-button">
                    <image style="width:50rpx;height:50rpx;" src="../../images/icon/buttonShare.png"></image>
                    <button open-type="share" data-id="{{item.id}}" class="shareButton"></button>
                  </view></label>                           
              </view>              

js:

  //点击分享
  onShareAppMessage: function (res) {
    let shopId = res.target.dataset.id;	
    let title = null;								//拟定分享标题
    let listData = list.getListDataFromLocal();
    let imageUrl = null;						//分享背景图
    for (let i in listData) {
      if (shopId == listData[i].id)
        imageUrl = listData[i].main_img_url;
    }
    if (res.from === 'button') {
      return {
        title: "吃饭打折就上天天饭团",
        path: '/pages/shop/shop?id=' + shopId,
        imageUrl: imageUrl,
        success: function (res) {
          console.log('成功', res)
        }
      }
    }
  },

css:

.title-box{
  display: flex;
  margin-bottom: 10rpx;
  align-items: center;
  flex-direction: column;
}

.share-button{
  margin-top: 25rpx;
}

.shareButton{
  font-size: 24rpx;
  background-color: #ff7440;
  color: #fff;
  width: 100rpx;
  height: 100rpx;
  display: none;
}

.delete{
  border: 1rpx solid red;
  border-radius: 50%;
  padding:0 13rpx;
  height: 38rpx;
}

.bottom-box{
  line-height: 2.0;
  font-size: 24rpx;
  display: flex;
  align-items: left;
  flex-direction: column;
}