实际开发过程中遇到的问题

  1.微信小程序长按图片保存图片,在开发的时候使用微信的模拟器测试和手机的真机测试都是可以的,但是,上传代码使用体验版之后就是失效了

    原因:保存的图片不能是http开头的

    解决办法:将图片保存在项目中使用本地的图片,或者使用网络的图片,但是必须是https开头的

  这是html代码:

<image src="../../img/1.png"  data-url="../../img/1.png"  bindlongtap='saveImg' ></image>

  js代码,下边的两个都可以

  saveImg: function () {
    let that=this
    wx.getSetting({
      success(res) {
        //未授权 先授权 然后保存
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success(re) {
              that.saveToBlum();
            }
          })
        }else{
         //已授 直接调用保存到相册方法
          that.saveToBlum();
        }
      }
    })  
  },
  saveToBlum:function(){
    let imgUrl = 'http://file.qingzhou.link/wechat-mp/article/1.png';
    wx.getImageInfo({
      src: imgUrl,
      success: function (ret) {
        var path = ret.path;
        wx.saveImageToPhotosAlbum({
          filePath: path,
          success(result) {
            wx.showToast({
              title: '图片已保存到相册',
              icon: 'success'
            })
          },
        })
      }
    })
  },
 //保存网络图片到相册方法
  saveToBlum:function(){
    wx.downloadFile({
      url: 'http://file.qingzhou.link/wechat-mp/article/1.png',
      success: function (res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(result) {
            wx.showToast({
              title: '已保存到相册',
              icon: 'success'
            })
          }
        })
      }
    })
  },

  

saveImg(e){
    let url = e.currentTarget.dataset.url;
    //用户需要授权
    wx.getSetting({
     success: (res) => {
      if (!res.authSetting['scope.writePhotosAlbum']) {
       wx.authorize({
        scope: 'scope.writePhotosAlbum',
        success:()=> {
         // 同意授权
         this.saveImg1(url);
        },
        fail: (res) =>{
         console.log(res);
        }
       })
      }else{
       // 已经授权了
       this.saveImg1(url);
      }
     },
     fail: (res) =>{
      console.log(res);
     }
    })  
   },
   saveImg1(url){
    wx.getImageInfo({
     src: url,
     success:(res)=> {
      let path = res.path;
      wx.saveImageToPhotosAlbum({
       filePath:path,
       success:(res)=> { 
        console.log(res);
              wx.showToast({
                  title: '图片已保存到相册',
                  icon: 'success'
                })
       },
       fail:(res)=>{
        console.log(res);
       }
      })
     },
     fail:(res)=> {
      console.log(res);
     }
    })
   },

  

  在vue项目的开发中,使用<style scoped>标签的时候,如果我们在前边已经设置了全局的样式,那么在这里直接修改本页面的样式是无法修改的,那么我们就需要强制性的来修改本页面的样式

    具体的修改如:

 ::v-deep .el-table td, .el-table th {
        padding-bottom: 2px !important;
        padding-top: 2px;

    }

  只要在前边添加::deep就可以修改了

posted @ 2020-09-12 10:38  杨超(yc)  阅读(192)  评论(0编辑  收藏  举报