<sup id="sjju3"><noscript id="sjju3"></noscript></sup>
    <big id="sjju3"></big>

  • <blockquote id="sjju3"></blockquote>
    <blockquote id="sjju3"></blockquote>

      <td id="sjju3"></td>

      <big id="sjju3"></big>
        <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
      1. 在微信小程序中保存网络图片

         更新时间:2019年02月12日 09:07:46   作者:anran758   我要评论

        这篇文章主要介绍了在微信小程序中保存网络图片,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

        微信代码片段点这里, 该功能需要添加appid才能进行正常的测试。

        在小程序的文档中我们得知,wx.saveImageToPhotosAlbum 是用来保存图片到相册的。

        但是仔细一看会发现这个接口的filePath参数只接受临时文件路径或永久文件路径,不支持网络图片路径,意味着我们不能直接调用这个接口。。

        因此先需要把该文件下载至本地,使用 wx.downloadFile

        但值得注意的是小程序只可以跟指定的域名与进行网络通信,也就是说下载图片之前,我们需要先去微信公众者平台的开发设置里设置uploadFile合法域名。

        示例代码如下:

        <!-- index.wxml -->
        <image class="qr-code" src="{{url}}" mode="aspectFill" />
        <button class="text" bindtap="saveImage">保存图片</button>
        
        // index.js
        const app = getApp()
        
        Page({
         data: {
          url: 'https://avatars3.githubusercontent.com/u/23024075?s=460&v=4'
         },
        
         // 保存图片
         saveImage() {
          this.wxToPromise('downloadFile', {
            url: this.data.url
           })
           .then(res => this.wxToPromise('saveImageToPhotosAlbum', {
            filePath: res.tempFilePath
           }))
           .then(res => {
            // do something
            wx.showToast({ title: '保存成功~',icon: 'none' });
           })
           .catch(err) => {
            console.log(err);
        
            // 如果是用户自己取消的话保存图片的话
            // if (~err.errMsg.indexOf('cancel')) return;
           })
         },
        
         /**
          * 将 callback 转为易读的 promise
          * @returns [promise]
          */
         wxToPromise(method, opt) {
          return new Promise((resolve, reject) => {
           wx[method]({
            ...opt,
            success(res) {
             opt.success && opt.success();
             resolve(res)
            },
            fail(err) {
             opt.fail && opt.fail();
             reject(err)
            }
           })
          });
         },
        })
        
        

        然后理论上就可以保存图片了... 用户第一次在我们的小程序使用保存图片这个功能是会弹出一个授权弹框,如果用户手滑点了拒绝授权后再点一次保存图片,然后就会发?#36136;?#20040;反应都没有了。。。

        出现这样的原因是因为这个授权弹框只会出现一次,所以我们得想办法再让用户重新授权一次。这?#26412;?#24819;到使用 wx.authorize .

        但是经过测试后发现,使用 wx.authorize 后,会报 authorize:fail auth deny 的错误。然后经过查阅资?#31995;?#30693;:

        • 如果用户未接受或拒绝过此权限,会弹?#25226;?#38382;用户,用户点击同意后方可调用接口;
        • 如果用户已授权,可以直接调用接口;
        • 如果用户已拒绝授权,则不会出?#20540;?#31383;,而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。

        emmm... 那这样效果当然不符合我们预期,只能在换一种方式。这?#26412;?#24819;到了使用<button open-type="openSetting"/>,在交互上做一个提示弹框,引导用户重新授权:

        <image class="qr-code" src="{{url}}" mode="aspectFill" />
        <button class="text" bindtap="saveImage">保存图片</button>
        
        <!-- 简陋版提示 -->
        <view wx:if="{{showDialog}}" class="dialog-wrap">
         <view class="dialog">
          这是一段提示用户授权的提示语
          <view class="dialog-footer">
           <button
            class="btn"
            open-type="openSetting"
            bindtap="confirm" >
             授权
           </button>
           <button class="btn" bindtap="cancel">取消</button>
          </view>
         </view>
        </view>
        const app = getApp()
        
        Page({
         data: {
          url: 'https://avatars3.githubusercontent.com/u/23024075?s=460&v=4',
          showDialog: false,
         },
        
         saveImage() {
          this.wxToPromise('downloadFile', {
            url: this.data.url
           })
           .then(res => this.wxToPromise('saveImageToPhotosAlbum', {
            filePath: res.tempFilePath
           }))
           .then(res => {
            console.log(res);
            // this.hide();
            wx.showToast({
             title: '保存成功~',
             icon: 'none',
            });
           })
           .catch(({ errMsg }) => {
            console.log(errMsg)
            // if (~errMsg.indexOf('cancel')) return;
            if (!~errMsg.indexOf('auth')) {
             wx.showToast({ title: '图片保存失败,稍后再试', icon: 'none' });
            } else {
             // 调用授权提示弹框
             this.setData({
              showDialog: true
             })
            };
           })
         },
        
         // callback to promise
         wxToPromise(method, opt) {
          return new Promise((resolve, reject) => {
           wx[method]({
            ...opt,
            success(res) {
             opt.success && opt.success();
             resolve(res)
            },
            fail(err) {
             opt.fail && opt.fail();
             reject(err)
            }
           })
          });
         },
        
         confirm() {
          this.setData({
           showDialog:false
          })
         },
        
         cancel() {
          this.setData({
           showDialog: false
          })
         }
        })

        以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

        相关文章

        最新评论

        2018白小姐一肖中特马
        <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
        <big id="sjju3"></big>

      2. <blockquote id="sjju3"></blockquote>
        <blockquote id="sjju3"></blockquote>

          <td id="sjju3"></td>

          <big id="sjju3"></big>
            <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
          1. <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
            <big id="sjju3"></big>

          2. <blockquote id="sjju3"></blockquote>
            <blockquote id="sjju3"></blockquote>

              <td id="sjju3"></td>

              <big id="sjju3"></big>
                <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
              1. 下载中国象棋并安装 福建31选7走势图浙 老时时彩官网 理直气壮一尾中特网址 山西11选5走势图基本走势 信封彩图曾道人玄机 河北快三开奖号码统计 竞猜足球胜平负怎么玩 海南环岛赛直播cctv 日本中彩票不用交税 2019双色球054期杀红球 篮球彩票让分胜负什么意思 湖北30选5最近100期走势图 福彩3d合值一大彩网 广东十一选五和值走势图百度乐彩