微信小程序开发之：保存图片到手机，使用uni-app 开发小程序；还有微信原生保存图片到手机

前言

做了下保存图片的功能，记录一下吧
主要还是看开发文档吧，学会看文档比较重要

一、UNI-APP保存图片到手机

1. 需求描述

点击保存，将图片保存到手机上，如下所示

2. 解决说明

1. 因为使用uni-app开发的微信小程序，所以要在uni-app的开发文档，我这里提供一下具体文档地址：
2. uni-app 保存文件到手机的开发文档地址：https://uniapp.dcloud.io/api/request/network-file?id=downloadfile

3. 上代码

a. HTML 代码

<!-- 海报模态框 -->
<view>
    <u-popup v-model="posterShow" mode="center" width="100%" height="100%">
        <view class="posterShowView" style="width: 100%; height: 100%;">
            <!-- mode="widthFix" -->
            <image :src="posterUrl"  style="width: 100%; height: 100%;"></image>
        </view>
        <view class="footerPoster" style="margin-top: 20rpx; margin-bottom: 20rpx;">
            <btn style="font-size: 32rpx; " type="sure"  @btnClick="posterCancal">取消</btn>
            <btn style="font-size: 32rpx; margin-left: 30rpx;" type="sure" @btnClick="posterSure">保存</btn>
        </view>
    </u-popup>
</view>

b. js代码

this.posterUrl是图片的URL：如：https://img13.360buyimg.com/n5/jfs/t15574/103/2503735642/354259/239cea20/5aaf4e5cN7ed2aacd.jpg

posterSure(){
    uni.downloadFile({
        url: this.posterUrl,
        success: function (res) {
            console.log(res)
            wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: function (res) {
                    console.log(res)
                    console.log('success')
                    if (res.statusCode === 200) {
                        console.log('下载成功');
                    }
                },
                fail: function (res) {
                    console.log(res)
                    console.log('fail')
                }
            })
        },
        fail: function () {
            console.log('fail')
        }
    })
},

4. 注意的点

1. 第一次保存会报错：需要将域名（也就是这个：img13.360buyimg.com）放到 微信开发平台去管理起来
2. 微信开发文档–域名配置管理:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html
3. 配置完就可以使用了。

二、微信原生保存图片到手机

需求如1.1，不再赘述

1. 解决说明

1. 直接看文档，文档我找到了
2. 微信开发文档–保存图片到手机地址：https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html

2. 代码

我没有写，代码和1.3差不多，可以参考1.3。