小程序各种小问题持续更新（图片上传服务器，特殊分享，base64绘制canvas）

最新推荐文章于 2022-09-01 00:00:00 发布

ZhaoYulin6

最新推荐文章于 2022-09-01 00:00:00 发布

阅读量1.5k

点赞数

分类专栏：微信小程序文章标签：小程序 js html5

本文链接：https://blog.csdn.net/ZhaoYulin6/article/details/111594642

版权

微信小程序专栏收录该内容

9 篇文章 1 订阅

订阅专栏

本文整理了小程序开发中遇到的各种问题，包括图片自适应、上传图片、按钮居中、页面传参、权限授权等，并提供了详细的解决方案。涉及到的内容涵盖图片处理、页面布局、用户交互、数据处理等多个方面。

摘要由CSDN通过智能技术生成

1.关于图片自适应

使用line-height不起作用

<image mode="aspectFit"  class="chuanImg" src="{{img_url}}"/>

可以使用 mode="aspectFit"来控制图片自适应，设置高度，图片宽度将根据高度自适应

缩放 scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

缩放 aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

缩放 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

缩放 widthFix 宽度不变，高度自动变化，保持原图宽高比不变

裁剪 top 不缩放图片，只显示图片的顶部区域

裁剪 bottom 不缩放图片，只显示图片的底部区域

裁剪 center 不缩放图片，只显示图片的中间区域

裁剪 left 不缩放图片，只显示图片的左边区域

裁剪 right 不缩放图片，只显示图片的右边区域

裁剪 top left 不缩放图片，只显示图片的左上边区域

裁剪 top right 不缩放图片，只显示图片的右上边区域

裁剪 bottom left 不缩放图片，只显示图片的左下边区域

裁剪 bottom right 不缩放图片，只显示图片的右下边区域

作者：鹏宇zero
链接：https://www.jianshu.com/p/a364dddf9eca
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

2.上传图片到服务器的demo以及从手机上选择图片

  // 上传代码demo
  uploadFile(files) {
    const that = this;
    return new Promise((resolve, reject) => {
      console.log(files.tempFilePaths[0])
      wx.uploadFile({
        url: 'https://api.jozoe.com.cn/hammer/uploadFile', //上传图片接口
        filePath: files.tempFilePaths[0],
        name: 'file',
        header: {
          'content-type': 'multipart/form-data'
        },
        success(res) {
          // console.log("上传成功")
          // console.log(res.errMsg)
          if (res.errMsg == 'uploadFile:ok') { //上传成功
            console.log("上传成功")
            console.log(res)
            const url = JSON.parse(res.data).resultData;

            // const url = res.data
            console.log(url)
            resolve({
              'urls': url
            })
          }
        },
        fail(err) {
          console.log(err)
          reject({
            'err': err
          })
        }
      })

      // console.log("上传成功")
      // resolve({
      //   'urls': ['http://mmbiz.qpic.cn/mmbiz_jpg/7UFjuNbYxibu66xSqsQqKcuoGBZM77HIyibdiczeWibdMeA2XMt5oibWVQMgDibriazJSOibLqZxcO6DVVcZMxDKgeAtbQ/0']
      // })
    })
  },

关于选择

wx.chooseImage({
  count: 1,
  success: async function (res) {
    wx.showLoading({
      title: '加载中',
    })
    await that.uploadFile(res).then((res) => {
      console.log(res.urls)
      that.setData({
        img_url: res.urls
      })
    }).catch(err => {
      wx.showModal({
        title: 'fail',
        content: "图片上传失败，重新上传！",
      })
    })
    console.log(that.data.img_url)
    let img_url = that.data.img_url
    // let result=''
  wx.request({
      url: 'https://api.jozoe.com.cn/apis/qrcode', //仅为示例，并非真实的接口地址
      method:'post',
      data: {
        qrcode:img_url
      },
      success (res) {
        obj=[that.data.nowUrl,img_url]
        var listData = JSON.stringify(that.data.nowUrl)
        var taskArray = JSON.stringify(that.data.taskArray)
        if (res.data.status===0){
          console.log(obj)
          console.log(res.data.result)
          let returnRe=res.data.result

          wx.navigateTo({
            url: '../twoRecognited/twoRecognited',
            success: function (res) {
              // 通过eventChannel向被打开页面传送数据
              res.eventChannel.emit('data', that.data.nowUrl)
              res.eventChannel.emit('result', returnRe)
            }
          })


        }
      }
    })
  },
  fail: function (res) { },
  complete: function (res) { },
})

3.关于小程序按钮汉字居中

display: flex;
    align-items: center;
    justify-content: center;

4.文字显示指定区域多余部分自动换行

  //文本显示
  .resultContent{
    width: 500rpx;
    text-overflow:ellipsis;
    word-wrap:break-word;
  }

5.关于小程序常见的页面传参方法

方法一：
A页面

wx.navigateTo({
  url: '../twoRecognited/twoRecognited',
  success: function (res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('data', that.data.nowUrl)
    res.eventChannel.emit('result', returnRe)
  }
})

B页面

onLoad: function (options) {

  let that = this;
  const eventChannel = that.getOpenerEventChannel()
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('data', function (data) {
   that.setData({
     address:data
   })
  })
  eventChannel.on('result', function (data) {
    that.setData({
      content:data
    })
  })
},

方法二：直接使用URL传递参数

url: 'www.baiddu.com?type=' + event.currentTarget.dataset.type+'&id='+event.currentTarget.id

6.将内容复制到粘贴板

copyResult:function(){
  wx.setClipboardData({
    data: '需要复制的内容',
    success (res) {
      wx.getClipboardData({
        success (res) {
          console.log(res.data) // data
        }
      })
    }
  })
},

7.请求当前网络的ip

that = this;
wx.request({
    url: 'http://ip-api.com/json',
    success:function(e){
        that.setData({
            motto:e.data
        })
    }
});

8.保留两位小数

var num = 2.652666845;
    num = num.toFixed(2)

9.关于扫一扫

 wx.scanCode({
      success: (res) => {
        console.log("扫码结果");
        console.log(res);
        let resultData=res.result
      },
      fail: (res) => {
        console.log(res);
        wx.hideLoading();
      }
    })

10.给页面设置标题

 wx.setNavigationBarTitle({
                title: '年龄变变变'
              })

11.关于设置对应的背景图片

1.关于全局的背景色
在这里插入图片描述

系统设置在app.wxss里面的page里面设置
单独的页面的背景色设置在

page不加点

2.关于标题的背景色，在对应的文件的json文件里面配置即可
在这里插入图片描述

{"navigationBarTitleText": "LED滚动字幕",
  "navigationBarTextStyle": "white",
  "navigationBarBackgroundColor": "#000000",
  "usingComponents": {

  }
}

12.关于点击预览大图

topic_preview: function(e){
  console.log(111111)
  var that = this;
  var url = e.currentTarget.dataset.url;
  var previewImgArr = [url];
  console.log(url)

  wx.previewImage({
    current: url, // 当前显示图片的http链接
    urls: previewImgArr // 需要预览的图片http链接列表
  })
},

注意这里的urls一定要是一个数组

页面通过bindtap绑定点击事件

<image mode="aspectFit" bindtap='topic_preview'   data-url='{{img_url}}' src="{{img_url}}"/>

13.与后台交互的时候并且登录的操作

// 分析一下及登陆

faceAttributesInfo: async function (e) {
//进行登录
    let that = this
    let info = e.detail
    const res = await getApp().login(info);
    if (!res) return;

    let currentWord = that.data.currentWord
    if (currentWord) {

//执行与后台的交互
      await that.ToFaceAttributesInfo(currentWord)

      // await that.msgSecCheck(currentWord);
    } else {
      wx.showToast({
        title: '输入为空，请输入！',
        icon: 'none',
        duration: 2000
      })
    }
  },

14.小程序首行缩进

 <view class="content-welcome"
     欢迎使
 </view>

  .content-welcome{
    text-align: left;
    text-indent:2em;
    font-family: PingFang-SC-Medium;
    font-size: 24rpx;
    color: #333333;
  }

15.点击查看大图

wxml:

 <image class="img" bindtap='topic_preview'   data-url='{{img_url}}' mode="aspectFit" src="{{img_url}}"/>

js:

 topic_preview: function(e){
    console.log(111111)
    var that = this;
    var url = e.currentTarget.dataset.url;
    var previewImgArr = [url];
    console.log(url)

    wx.previewImage({
      current: url, // 当前显示图片的http链接
      urls: previewImgArr // 需要预览的图片http链接列表
    })
  },

16.进去小程序使用功能时需要用户授权操作

wxml: 这三个属性需要一起加上

open-type=“getUserInfo”
lang=“zh_CN”
bindgetuserinfo=“saoMiao”

 <button wx:if="{{saoState===false}}" open-type="getUserInfo"   lang="zh_CN" class="saoBtn" bindgetuserinfo="saoMiao">扫描二维码/条码/小程序码</button>

JS:

 saoMiao: async  function (e) {
    let that = this;
    let info = e.detail
    const res = await getApp().login(info);
    if (!res) return;
    }

17.定位之后如何居中

 position: fixed;
 bottom: 66rpx;
 //加入这三行代码
  left: 0;
  right: 0;
  margin:0 auto;

18.给小程序设置背景图

page{
  background-image: url(https://当前网络图片地址);
  background-repeat: no-repeat;
  background-size: 100%;
}

19.小程序点击事件绑定参数

bindtap 事件

<button size="mini" bindtap="priceData" data-id="cost" style="float:left">付费</button>

data-id=" " //存放事件参数

在js中添加priceData() 函数。

priceData:function(el){
    let type =el.currentTarget.dataset.id          // type接收参数

}

js中获取data中数据

this.data.list     //  获取data中的list数组

改变中data数据

this.setData({
    list:newList    //给list替换新的数据

})

20.手机号码验证

 let valid_rule = /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;// 手机号码校验规则
        if ( ! valid_rule.test(对应输入的手机号)) {
          wx.showToast({
            title: '手机号码输入错误！',
            icon: "none",
            duration: 2000
          })
        }

21.身份证和身份证前六位验证

 let id_rule= /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      let six_rule=/^[1-9][0-7]\d{4}/;

  if (!id_rule.test(输入的身份证号码)) {
   wx.showToast({
              title: '身份证号码输入错误！',
              icon: "none",
              duration: 2000
            })
  }

 if (!six_rule.test(输入的身份证号码)){
            wx.showToast({
              title: '身份证前六位输入错误！',
              icon: "none",
              duration: 2000
            })
          }

22.银行卡正则判断

 let pattern = /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/;
        if (!pattern.test(that.data.danNum)){
          wx.showToast({
            title: '银行卡号输入错误！',
            icon: "none",
            duration: 2000
          })
        }

23.保存图片到手机（包含判断用户是否授权以及用户后续拒绝授权）

  saveImage: function () {
    console.log('保存图片')
    let that = this
    //这个是你需要保存图片的地址
    let url = that.data.img_url
    wx.getSetting({
      success(res) {
        console.log(111)
        console.log(!res.authSetting['scope.writePhotosAlbum'])
        if (!res.authSetting['scope.writePhotosAlbum']) {
          console.log(2222)
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              console.log('授权成功')
              wx.downloadFile({
                url: url,
                success: function (res) {
                  console.log('保存代码执行')
                  // console.log(res);
                  //图片保存到本地
                  wx.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: function (data) {
                      wx.showToast({
                        title: '保存成功',
                        icon: 'success',
                        duration: 2000
                      })
                    },
                  })
                }
              })
            },fail:function (err) {
              console.log('授权失败')
              console.log(err)
              //判断用户是拒绝过的情况
              if (err.errMsg=='authorize:fail:auth deny'||err.errMsg=="authorize:fail authorize no response"){
                console.log("当初用户拒绝，再次发起授权")
                // let that = this
                wx.showModal({
                  content: '检测到您没打开保存图片权限，是否去设置打开？',
                  confirmText: "确定",
                  cancelText: "取消",
                  success: function (res) {
                    if (res.confirm) {
                      wx.openSetting({
                        success(res) {
                          if (res.authSetting['scope.writePhotosAlbum']) {
                            console.log("再次点击保存图片")
                            // that.saveImage();

                            wx.downloadFile({
                              url: url,
                              success: function (res) {
                                console.log('保存代码执行')
                                // console.log(res);
                                //图片保存到本地
                                wx.saveImageToPhotosAlbum({
                                  filePath: res.tempFilePath,
                                  success: function (data) {
                                    wx.showToast({
                                      title: '保存成功',
                                      icon: 'success',
                                      duration: 2000
                                    })
                                  },
                                })
                              }
                            })

                          }
                          else {
                            wx.showToast({
                              title: '您没有授权，无法保存到相册',
                              icon: 'none'
                            })
                          }
                        }
                      })
                    } else {
                      wx.showToast({
                        title: '您没有授权，无法保存到相册',
                        icon: 'none'
                      })
                    }
                  }
                });
              }
            }
          })
        }else{
          wx.downloadFile({
            url: url,
            success: function (res) {
              console.log('保存代码执行')
              // console.log(res);
              //图片保存到本地
              wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: function (data) {
                  wx.showToast({
                    title: '保存成功',
                    icon: 'success',
                    duration: 2000
                  })
                },
              })
            }
          })
        }
      }
    });
    console.log(this.data.img_url)
  },

24.实现弹框

wxml:

  <!-- 弹出层 -->
        <view class="modal-mask" bindtap="hidepopup"  wx:if="{{showModal}}"><text>X</text></view>
        <view class="modal-dialog" wx:if="{{showModal}}">
<!--            关闭的按钮-->
            <image bindtap='hidepopup' class="guanbi"  src='../../images/delgood.png' mode="widthFix,heightFix"></image>

<!--            三个按钮-->
            <view class="btnMoney">
                <view class="topBtn">
                    <button class="qianbtn" data-money="0.06" bindtap="getmoney">￥0.06</button>
                    <button  class="qianbtn" data-money="0.66" bindtap="getmoney">￥0.66</button>
                    <button class="qianbtn" data-money="1.66" bindtap="getmoney">￥1.66</button>
                </view>
                <view  class="topBtn">
                    <button class="qianbtn" data-money="6.66" bindtap="getmoney">￥6.66</button>
                    <button class="qianbtn"  data-money="16.66" bindtap="getmoney">￥16.66</button>
                    <button class="qianbtn" data-money="66.66" bindtap="getmoney">￥66.66</button>
                </view>
            </view>

        </view>

js:

  showModal:false,

点击更改变成true

less

  /* 弹出层 */
  .modal-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.4;
    z-index:1;
  }
  .modal-dialog {
    //background-image: url('http://file.scjrh.net/hammer/zs2.png');
    background-image: url(http://file.scjrh.net/hammer/zs2.png);
    overflow: hidden;
    position: fixed;
    top: 15%;
    padding-top: 10%;
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 30rpx;
    right: 5%;
    height: 484rpx;
    width:90% ;
    z-index: 2;
  }
  .view-image{
    width: 580rpx;
    height: 580rpx;
    margin-left: 50rpx;
  }
  .guanbi{
    position:absolute;
    width: 40rpx;
    height:40rpx;
    background-size:100%;
    text-align: center;
    top: 40rpx;
    right: 39rpx;
  }

js:

 /**
   * 弹出按钮点击事件
   */
  popup: function (e) {
    // console.log(e.currentTarget.dataset.id)
    this.setData({
      showModal: true
    })
  },
  /**
   * 隐藏
   */
  hidepopup: function () {
    this.setData({
      showModal: false
    });
  },

25.控制按钮在30s之内不能再次点击

  faqiLucky:async function(e){
    let date=new Date()
      let result = new Date(date).getTime();

      //取
    let value = wx.getStorageSync("time")
     if (value==undefined||value+30000<result){
        wx.setStorageSync("time",result) 
//执行想要的操作
        }else if (value+30000>result){
        wx.showToast({
            title: '请勿在30s内重复点击',
            icon: "none",
            duration: 500
        })
    }
}

26.编写一个插槽，加载中

建立一个loading的包
loading.wxml

<template name="loading">
    <view class="loading" >
        <view class="loading_mask"></view>
        <view class="weui-loadmore">
            <view class="weui-loading"></view>
            <text class="weui-loadmore__tips">正在加载</text>
        </view>
    </view>
</template>

loading.less

/* loading样式开始 */
.loading{
  position: absolute;
  top: 300rpx;
  left: 0;
  width: 100%;
  height: 100%;
}
.loading_mask{
  position: absolute;
  width: 45%;
  margin: 14em 22.5%;
  height: 2.6em;
  border-radius: 20rpx;
  background: #000;
  opacity: .5;
}
.weui-loadmore {
  position: absolute;
  width: 45%;
  margin: 16em 22.5%;
  line-height: 2.6em;
  font-size: 14px;
  color: #fff;
  text-align: center;
}
.weui-icon_toast.weui-loading{
  margin:30px 0 0;
  width:38px;
  height:38px;
  vertical-align:baseline;
}
.weui-loading{
  width:20px;
  height:20px;
  display:inline-block;
  vertical-align:middle;
  -webkit-animation:weuiLoading 1s steps(12, end) infinite;
  animation:weuiLoading 1s steps(12, end) infinite;
  background:transparent url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") no-repeat;
  background-size:100%;
}
.weui-loading.weui-loading_transparent,
.weui-btn_loading.weui-btn_primary .weui-loading,
.weui-btn_loading.weui-btn_warn .weui-loading{
  background-image:url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
}
@-webkit-keyframes weuiLoading{
  0%{
    -webkit-transform:rotate3d(0, 0, 1, 0deg);
    transform:rotate3d(0, 0, 1, 0deg);
  }
  100%{
    -webkit-transform:rotate3d(0, 0, 1, 360deg);
    transform:rotate3d(0, 0, 1, 360deg);
  }
}
@keyframes weuiLoading{
  0%{
    -webkit-transform:rotate3d(0, 0, 1, 0deg);
    transform:rotate3d(0, 0, 1, 0deg);
  }
  100%{
    -webkit-transform:rotate3d(0, 0, 1, 360deg);
    transform:rotate3d(0, 0, 1, 360deg);
  }
}
.weui-loadmore__tips {
  display: inline-block;
  vertical-align: middle;
  color: rgba(0,0,0,0.9);
  color: var(--weui-FG-0);
}

使用loading

<view>
    <import src="/pages/loading/loading.wxml" />
    <view hidden="{{!loading}}" style="height: 100%">
        <template is="loading" />
    </view>
    <view hidden="{{loading}}">
    //加载完成后的html结构
    </view>
</view>

27.携带数据立即返回上一个页面，以及点击返回，回到上一个页面

1.点击返回，回到上一个页面，并且更改上一个页面的数据

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2
})

  onUnload: function () {
     var that = this
     var pages = getCurrentPages();
     var currPage = pages[pages.length - 1];   //当前页面
    var prevPage = pages[pages.length - 2];  //上一个页面
     prevPage.setData({
       imgUrl: that.data.chooseImg //上一个页面的data里具体的某个值
     });
  },

2.点击选择后携带数据返回上一层

	//传递参数给上一个页面
    let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。

    let prevPage = pages[ pages.length - 2 ];

	//prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面，-3是上上个页面以此类推。

    prevPage.setData({  
    // 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。
      imgUrl:img,
    })

//上一个页面内执行setData操作，将我们想要的信息保存住。当我们返回去的时候，页面已经处理完毕。


//最后就是返回上一个页面。

    wx.navigateBack({
      delta: 1  // 返回上一级页面。
    })
  },

3.正常 A -> B -> C 都是通过 wx.navigateTo 跳转的，所以 wx.navigateBack 只能返回上一界面，如果要返回到A 界面就会出现 C -> B -> A 的效果。

如果想实现 A -> B -> C 当 C 点击返回时，实现直接 C -> A 这种效果就只能
A -> B 通过 wx.navigateTo 跳转 B -> C 通过 wx.redirectTo 跳转.跳转触发后 B 页面就会被销毁， C 页面再返回 wx.navigateBack 就会直接到 A 了。

28.禁用分享给朋友和发送朋友圈

onLoad:async function (options) {
    let that = this
    wx.showShareMenu({
      withShareTicket: false,
      menus: ['shareAppMessage', 'shareTimeline']
    })

29.微信小程序全局变量的设置、使用、修改

全局变量的设置在miniprogram > app.js 文件中设置，globalData对象就是存储全局变量的。

App({
    globalData: {
      userInfo: false,
      openid: null
    },
})

2.全局变量的使用

在app.js文件中，直接使用，如：

this.globalData.userInfo

在其他非app.js文件中使用，需要先申明app变量，如

var app = getApp()
app.globalData.userInfo

全局变量的修改

在app.js文件中：
this.globalData.hasLogin = true
 
在其他非app.js文件中修改：
var app = getApp()

app.globalData.hasLogin = true

同步存取

wx.setStorageSync("superData",that.data.thisData)
//取
let value = wx.getStorageSync("superData")
that.setData({
  thisData:value
});

清空

 wx.removeStorage({
   key: 'superData',
   success: function(res) {
     that.setData({
       thisData: []
     })
   },
 })

30.base64绘制canvas

  loadimg:function(){
  
    wx.request({
      url: 'http://localhost/a.php',
      success:function(res){
         let base64Imgdata = res.data.data
         let tmppath = wx.env.USER_DATA_PATH+'/toolman_facemerge.jpg'
         console.log(tmppath)
        let fs = wx.getFileSystemManager()
        fs.writeFile({
          filePath:tmppath,
          data:base64Imgdata,
          encoding:'base64',
          success:function(){
            console.log("saveImgSuccess")

            const ctx = wx.createCanvasContext('myCanvas')
            ctx.drawImage(tmppath)
            ctx.draw(true)

          },
          fail:function(e){
            console.log(e)
            console.log("saveImgFailed")
          }
        })
      }
    })
  },

31.页面一进来检查是否登录的情况

 //判断用户是否登录
    wx.getSetting({
      success: function (res) {
        //如果没有登录，这里就将登录转换改为true
        if (res.authSetting['scope.userInfo']==undefined) {
          that.setData({
            is_login: true
          })
        }
      },fail:function (res) {
        console.log(res)
      }
    })

32.组织苹果手机底部滑动

json中加这个

  "disableScroll":true

33.清空画布

ctx.draw()  清空之前画布内容
ctx.draw(true)保留之前

34.input textarea穿透

在这里插入图片描述

解决：
弹框显示，wx:if掉input
或者使用cover-view覆盖原生组件

ZhaoYulin6

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录