微信小程序

微信开发遇到问题及解决总结(一)

2019-06-09  本文已影响0人  Luv_coco

1、wx.request请求后台数据在回调函数中处理数据

请求后台数据之后一般需要存入data或者其他操作,success是个回调函数,里面this不是想要的,一般我都是现在外边把this存起来

// 以下代码包括在事件处理函数中
var _this = this
wx.request({
  url: '/applet/1.0/user/token',
    method: 'GET',
    success(res) {
        console.log(res)
        _this.setData({//返回token存放在data.token
            token: res.data
        })
    }
})

2、三目运算控制差异化样式的显示问题

场景一:列表渲染

讨论列表底部需要下边框来分割两个讨论部分,统一的模板去渲染,最后一条也会有底边框,需要判断并消除边框。

解决:所有都有底边框,commentBlock样式体现边框;三目判断最后一条讨论用noBorder样式控制不要边框

<block wx:for='{{allComments}}' wx:key='index'>
<view class="commentsBlock  {{(index == (allComments.length-1)) ? 'noBorder' : '' }}" >
    ... 讨论模板code内容 
<view>
</block>

场景二:三种签到状态,过时未签、签到、未来要签,嵌套两个三目运算,判断三种样式的显示。

<view class="small-common {{jifen.is_sign == 0? 'small-init' : jifen.is_sign == 1? 'small-sign' : 'small-unsign' }}">
     +{{jifen.coin}}
</view>
// tips:三目同样适用于文字显示
<view>{{list.is_sign == 1? '+' : '翻倍+' }}15</view> 
//输出: +15 或者 翻倍+15

3、页面直接携参跳转页面data-set的用法

点击页面UI元素跳转的另一个页面,页面之间参数传递有很多种,我最中意这种,

<view class='card-btn' catchtap='navigateToApply' data-gid='{{item.group_id}}'>我要参团</view>

点击我要参团,可以在事件处理函数获得dataset,对于数组渲染的很多列表,获得当前点击目标数据做一些事情很有用。
例:后台需要前端发送活动的gid,判断哪个活动被报名了,关联活动ID

// 对应js文件
navigateToApply(e){
    // console.log(e.currentTarget.dataset)
    wx.navigateTo({
        url: '/pages/apply/apply?gid=' + e.currentTarget.dataset.gid
    })
},
页面之间携参跳转有很多种方法,此方法简单粗暴。页面之间传递的是对象数据,需要先JSON.stringify(e.currentTarget.dataset.list),在接收参数页面JSON.parse()
// 接收参数也在onShow()、onLoad()周期都可以
onShow(data){
  console.log(data)
}

4、小程序图片列表渲染显示空隙问题

弹性布局flex搞定

//wxml
<block wx:for="{{ detailImg }}" wx:key="index">
    <image class="img" mode='widthFix' src='{{item}}'></image>
</block>

//css
.img{
  width: 750rpx;
  display: flex;
  flex-direction: column;
}

5、小程序使用七牛云图片上传

需要调用微信两个接口 wx.chooseImage({ })选择要上传的图片, wx.uploadFile({ })上传图片到七牛云服务器,七牛云上传存储区域选择。代码包含多张上传解决办法即递归调用自身。

onShow() {//页面onShow周期,请求后端七牛云token
    var that = this
    $ajax({
      url: '/applet/1.0/user/token',
      method: 'POST',
      success(res) {
        console.log(res)
        that.setData({//返回token存放在data.token
          token: res.data
        })
      }
    })
},

chooseImg(){//wxml绑定的上传图片事件
    var that = this;
    wx.chooseImage({
      count: 3 - that.data.detailPics.length,  // 最多可以选择的图片总数
      sizeType: ['compressed'], // 压缩图
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        
        that.uploadimg({ //调用上传图片的接口函数
          path: tempFilePaths , //这里是选取的图片的地址数组
        });
      }
    })
  },
  uploadimg (data) {//上传图片接口
    wx.showLoading({
      title: '上传中...',
      mask: true,
    })
    var that = this,
      i = data.i ? data.i : 0,
      success = data.success ? data.success : 0,
      fail = data.fail ? data.fail : 0;
    wx.uploadFile({
      url: 'https://upload.qiniup.com',//七牛云上传存储区域选择
      filePath: data.path[i],
      name: 'file',
      header: {
        "Content-Type": "multipart/form-data"
      },
      formData: {
        token: that.data.token
      },
      success: (res) => {
        wx.hideLoading();
        success++;
        console.log(res)
        var str = JSON.parse(res.data) //返回的结果,可能不同项目结果不一样
        if(res.statusCode==200){
          var pic_url = that.data.showUrl + str.key; //拼接图片完整地址
          var detailPics = that.data.detailPics; 

          detailPics.push(pic_url) //存储所有上传成功图片七牛云返回链接
          that.setData({
            detailPics: detailPics
          })
        }else{
          wx.showToast({
            title: str.error ,
            icon: 'none',
            duration: 2000
          })
        }
      },
      fail: (res) => {
        fail++;
        console.log('fail:' + i + "fail:" + fail);
      },
      complete: () => {
        i++;
        if (i == data.path.length) { //当图片传完时,停止调用     
          // console.log('执行完毕');
          // console.log('成功:' + success + " 失败:" + fail);
          if (that.data.detailPics.length >= 3) { //本地图片大于三张不显示上传按钮
            that.setData({
              showUploadImg: false
            })
          }
        } else { //若图片还没有传完,则继续调用函数
          data.i = i;
          data.success = success;
          data.fail = fail;
          that.uploadimg(data);//递归,回调自己
        }
      }
    });
  },
上一篇下一篇

猜你喜欢

热点阅读