[avoid pit refers to “difficult”] small program custom sharing friends, Modal box rises from the bottom, support picture forwarding friends, save local

Wechat official to share forwarding function has three

1. Forward it directly to your friendswx.showShareImageMenu
2. Forward to a friend or circle of friendswx.showShareMenu
3. Custom menuwx.showActionSheet

The third approach is more scalable, but has a poor interface

Therefore, in order to achieve better experience effect, next we customize Modal to achieve forwarding and local save functions

First, the effect display

Two, code implementation

1) Write code and send icon

2) index.wxml

<view class="cu-bar foot share-item grid ">
		<button class="shareBtn" bindtap="showModal" data-target="bottomModal">Share photos</button>
</view>

<view class="cu-modal bottom-modal  {{modalName=='bottomModal'?'show':''}}">
		<view class="cu-dialog share-bottom">
			<view class="cu-bar bg-white justify-end one-view">
				<view class="content share-title ">Share the</view>
			</view>
			<view class="padding-xl two-view ">
				<button open-type="share" class="friends-btn">
					<view class="share-item">
						<image class="share-icon" src="{{wxIcon}}"></image>
						<view class="share-text">WeChat friends</view>
					</view>
				</button>
				<view class="share-item" bindtap="handleSaveImg">
					<image class="share-icon" src="{{saveIcon}}"></image>
					<view class="share-text">Save the picture</view>
				</view>
			</view>
			<view class="cu-bar bg-white three-view">
				<view class="action margin-0 flex-sub solid-left cancel-text" bindtap="hideModal">cancel</view>
			</view>
		</view>
</view>
Copy the code

3) index.js

Data initialization

data: {
    modalName: ' '.saveImg: ' '.wxIcon: 'Just sent wechat Icon'.saveIcon: 'Just sent album icon',},Copy the code

Click the event to control whether the Modal is displayed or not

  showModal(e) {
    this.setData({
      modalName: e.currentTarget.dataset.target
    })
  },
  hideModal(e) {
    this.setData({
      modalName: null})},Copy the code

Share wechat friends

onShareAppMessage: function (res) {
    return {
      title: "My headlines are cool.".path: '/pages/index/index'}},Copy the code

Save pictures to local album

 handleSaveImg() {
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: this.data.saveImg,
      success: function (res) {
        wx.showToast({
          title: "Save successful",})setTimeout(() = > {
          that.hideModal()
        }, 500);
      },
      fail(e) {
        wx.getSetting({
          success(res) {
            if(! res.authSetting["scope.writePhotosAlbum"]) {
              wx.showModal({
                title: 'warning'.content: 'Please open album permission, otherwise pictures cannot be saved to album'.success(res) {
                  if (res.confirm) {
                    wx.openSetting({
                      success(res) {
                        console.log(res)
                      }
                    })
                  } else if (res.cancel) {
                    wx.showToast({
                      title: 'Cancel authorization'.icon: "none".duration: 2000},},},},},},}Copy the code

4) index.wxss

.share-item {
  height: 160rpx;
  background: #FFFFFF;
}
.shareBtn {
  width: 400rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #49B7FD 0%, #2380FA 100%);
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(35.128.250.0.5);
  border-radius: 58rpx;
  font-size: 36rpx;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 80rpx;
}
.invite-border{
  border-right: 1px solid #F5F5F5;
}
.invite-item{
  padding: 40rpx;
  margin: 0 auto;
  width: 50%;
}
.invite-Btn1 {
  width: 200rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #49B7FD 0%, #2380FA 100%);
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(35.128.250.0.5);
  border-radius: 58rpx;
  font-size: 36rpx;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 80rpx;
}
.one-view{
  height: 80rpx;
}
.two-view{
  height: 170rpx;
  display: flex;
  padding: 10rpx 150rpx 0rpx 150rpx;
  background: #fff;
}
.share-bottom{
  height: 385rpx; border-radius: 16rpx 16rpx 0rpx 0rpx ! important; box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0.0.0.0.06);
}
.share-item{
  margin: 0 auto;
}
.share-icon{
  width: 88rpx; height: 88rpx; } .share-title{ font-size: 26rpx ! important; font-weight:400;
  color: #999999;
  line-height: 36rpx;
}
.friends-btn{
  background: #fff;
  padding: 0rpx;
  font-size: 22rpx;
  line-height: 32rpx;
}
.friends-btn::after{
  border: 1px solid transparent;
}

.share-text{
  font-size: 22rpx;
  color: #999999; line-height: 32rpx; } .cancel-text{ font-size: 36rpx ! important; font-weight:400;
  color: #333333;
  line-height: 50rpx;
}
.three-view{
  height: 112rpx;
  border-top: 1px solid #F5F5F5;
}
Copy the code

Three, write at the end

Wx. SaveImageToPhotosAlbum save image to the local time, image path can be a temporary file path or permanent file path (local path), does not support the network path. All our network maps will be saved locally through wx.getimageInfo. After success, we can save res.path to the local!