美文网首页微信小程序
微信开发遇到问题及解决总结(一)

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

作者: Luv_coco | 来源:发表于2019-06-09 19:01 被阅读0次

    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);//递归,回调自己
            }
          }
        });
      },
    

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/wqvnxctx.html