微信小程序 保存圖片和復制文字 功能

1.保存圖片，點擊保存到手機相冊里

拿到服務端返回的圖片地址，用戶點擊按鈕保存圖片。這個有個小程序相冊權限問題。

用戶第一次拒絕的權限的時候，需要調用wx.openSeting（）打開權限。

這里有個坑：2018年后，wx.openSeting（）不能在失敗回調里打開，需要在點擊按鈕時觸發：

官方回復：https://developers.weixin.qq.com/community/develop/doc/000cea2305cc5047af5733de751008

所以解決的思路是：

1.每一次進入點擊保存圖片的頁面，在onShow里默認是有權限的，

2.當用戶點擊保存圖片時，拒絕了保存到相冊的權限，我們把這個按鈕提示為：打開系統保存到相冊權限，跳轉到wx.openSeting（）打開的權限頁面。

 

2.復制文字

這個貌似沒有權限問題

3.代碼

封裝在一個WxUtil.js里：

const saveImg = (imgSrc, cb) => {
    wx.downloadFile({
        url: imgSrc,
        success: function(res) {
            console.log(res);
            //圖片保存到本地
            wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: function(data) {
                    wx.showToast({
                        title: '保存成功',
                        icon: 'none'
                    })
                },
                fail: function(err) {
                    console.log('fail');
                    //不能直接用 wx.openSetting(),需要執行失敗的回調
                    cb()
                },
                complete(res) {
                    console.log(res);
                }
            })
        }
    })
}

const copyText = (text) => {
    wx.setClipboardData({
        data: text,
        success(res) {
            wx.getClipboardData({
                success(res) {
                    wx.showToast({
                        icon: 'none',
                        title: '復制成功'
                    })
                }
            })
        }
    })
}

export { saveImg, copyText }

　　

 

　　在page下的頁面js里調用saveImg ，在test頁面下：

test.wxml:

<view>
    <view class="save-btn" bindtap="saveCord" wx:if="{{hasSetting}}">
        點我保存二維碼
    </view>
    <view class="save-btn" bindtap="toSetting" wx:else>
        請在設置頁面打開相冊權限
    </view>
</view>

test.js:

import { saveImg } from '../../utils/wxUtil.js'
Page({
    data: {
        //是否有相冊權限
        hasSetting: true
    },
    onLoad() {
        this.getPageData();
    },
    onShow() {
        this.setData({
            hasSetting: true
        })
    },
    saveCord() {
        //服務器返回的數據
        let imgSrc = this.data.userInfo.code;
        saveImg(imgSrc, () => {
            this.setData({
                hasSetting: false
            })
        })
    },
})