微信小程序小技巧

微信小程序小技巧

UI方面

flex自适应布局

学习链接：https://www.cnblogs.com/yk123/p/6955741.html
写的很详细，但用这个有个弊端就是有些效果可能还是要设置控件的宽高才能达到，不过已经使布局方便了很多

数组数据的绑定

    <view class="group-items" wx:for="{{contentlist}}" wx:key="index"  >
        <view class='one-item' data-gid="{{item.id}}" bindtap="listItemTap">
          <image class="group_img" src="{{item.iconpath}}"/>
          ....
        </view>
    </view>

以上面的代码为例，

• wx:for="{{contentlist}}" 表示绑定的是contentlist数组，
• 访问数组的数据时，只需要使用‘item.’+属性名即可，如访问contentlist的iconpath属性，即item.iconpath，
• bindtap="listItemTap"用于绑定点击视图列表某一项的事件，
• data-gid="{{item.id}}" 将contentlist中的id属性绑定到该视图列表项的数据集中，属性名设置为gid，在js代码中获取的方法如下，可以通过这个方法将数组中的所有数据都绑定到视图中：

  listItemTap:function(e){
    var gid = e.currentTarget.dataset.gid
    ...
 },

功能方面

图片上传

没有存下参考链接…当然该功能需要后端相应的支持

// 写到Page外面
function upload(page, path) {
  wx.showToast({
    icon: "loading",
    title: "正在上传"
  }),
    wx.uploadFile({
    url: getApp().globalData.server + 'userinfo/setUserIcon',
      filePath: path[0],
      name: 'file',
      header: { 
      // 注意Content-Type
        "Content-Type": "multipart/form-data;charset=utf-8" ,
        'cookie': wx.getStorageSync('cookieKey')
      },
      //假如要传数据的话不能用data，要用formData!!!!!!!!!!!
      complete: function (res) {
        
        var data = JSON.parse(res.data);
        console.log(data)
        if(res.statusCode == 200){
          app.globalData.userInfo.moreInfo.iconpath = getApp().globalData.server +data.data.iconURL
          page.setListData()
          console.log(app.globalData.userInfo.moreInfo.iconpath)
          wx.showToast({
            title:'修改成功',
            icon:'none'
          })
        }
        else{
          wx.showToast({
            title: '修改失败',
            icon: 'none'
          })
        }
      }
    })
}

// Page中函数使用方法
  iconTap:function(){
    var that = this;
    // 选择图片或拍照上传
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],  //可选择原图或压缩后的图片
      sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
      success: res => {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片  
        var tempFilePaths = res.tempFilePaths;
        upload(that, tempFilePaths);
      }
    })
  },

页面传值方法

学习链接：https://www.jianshu.com/p/151274a7c838

1. 存到全局变量中，使用getApp().globalData.xxx的方式获取
2. 使用wx.setStorageSync(“key”, “value”);方法存到缓存中，使用wx.getStorageSync(“key”)的方式取出
3. 使用url传值，wx.navigateTo({ url })，url写法和json的GET请求url写法一样，这个方法只能一个个属性传，不能直接传一个对象，如

   // 跳转到groupdetail页面并传值gid和fromPage
   wx.navigateTo({
       url: '../groupdetail/groupdetail?gid='+gid+'&fromPage=1',
     })
   // 在groupdetail页面获取的方法，
   onLoad:function(options){
   var gid = options.gid
   var fromPage= options.fromPage
   ...
   }
   

4. 使用getCurrentPages()进行页面之间传值，主要用户数据向前一页传递

   let pages = getCurrentPages();
   let toPage =pages[pages.length - x];//x表示的页数，x=1是当前页,x=2是上一页
   toPage.setData({
     xx:x//xx是要返回的页面的data中的数据
   })
   

页面跳转

1.跳转页面，不关闭当前页面

wx.navigateTo({
      url: 'xxx',
    })

wx.navigateBack({  //它只能是通过navigateTo跳转的过的页面
  delta: x   //x返回几页
})

2.跳转页面，并且关闭当前页面

wx.redirectTo({
  url: 'xxx'
})

3.跳转页面，并且关闭所有页面

wx.reLaunch({
      url: 'xxx',
    })

4.用于tabBar页面之间的页面跳转

wx.switchTab({
     url: 'xxx',
   })

js数字计算

假如a = 1, b = 200，在js中，假如直接 a+b，将会得到1200，要想获得201，需要将其中一个调用Number函数，如Number(a)+b

this.setData设置数组某项属性值的方法

将要访问的数据放到一个字符串中，作为key，在setData中用方括号框起来即可，示例如下：

        for(var i = 0; i < that.data.contentlist.length; i ++){
          var key = 'contentlist['+i+'].iconpath'
          that.setData({
            [key]: that.data.contentlist[i].iconpath == null ? '../../images/小组.png' : that.data.contentlist[i].iconpath.indexOf('http://') != -1 ? that.data.contentlist[i].iconpath : getApp().globalData.server+that.data.contentlist[i].iconpath
          })
        }

未完待续…