微信小程序开发过程中知识点总结

1、保存用户id，用缓存，其他页面再取出来

2、一个弹框的显示与隐藏控制

至于使用 wx:if 还是 hidden，一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。

效果

代码

 <view class="iconItem" bindtap='toFilter'>
      <text>筛选</text>
      <image src="{{state.select}}"></image>
      <view class="model1" wx:if="{{filterFlag}}">
        <view bindtap='pro1'>
          <text>未投递</text>
        </view>
        <view bindtap='pro2'>
          <text>流程中</text>
        </view>
        <view bindtap='pro3'>
          <text>获得offer</text>
        </view>
      </view>
</view>

  toFilter() {
    this.setData({
      filterFlag: !this.data.filterFlag,
    })
  },

一开始filterFlag为false，弹框不显示，后面点击时进行显示隐藏的切换。

问题：点击模拟弹窗，底下的点击事件会响应。解决：小程序防止点击遮罩层后遮罩层下面也反应

改进：

.model,.model1{
  width:30%;
 margin:0 auto;
 text-align: center;
 margin-top: -60rpx;
  background-color: #cfcfcf;
  opacity: 0.5;
  color:#fff;
    padding:2px;
     position:fixed;
}

给css样式加一句position:fixed即可。经测试position:absolute也可以

 定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。

定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在。

  只有三种情况会使得元素脱离文档流，分别是：浮动绝对定位和相对定位。

z-index属性

       z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属 性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系 的，一定是子级在上父级在下。

3、页面跳转携带参数

wx.redirectTo 和wx.navigateTo均不允许跳到tabBar页面，但路径后可带参数。

需要实现点击本条目进入列表详情。

 <block wx:for="{{offerList}}" wx:key="id">
    <view bindtap='toOfferDetail' data-postId="{{item.post_id}}">
      <template is="offerList" data="{{...item}}" />
    </view>
  </block>

跳转的时候，取到本条目postid,既可postId用？传参带到下一页

 toOfferDetail(event) {
    var postId = event.currentTarget.dataset.postid;
    wx.redirectTo({
      url: '../offer/offlist/offlist?id='+postId
    })
  },

 新的页面这样接收参数，取id做key键

 onLoad: function(options) {
    this.setData({
      offerId: options.id
    })
}

新页面中onLoad函数，options参数的id即为传递的postId,新的页面就可以使用offerId了。

4、关于后台返回的时间格式

后台返回的时间格式统一为时间戳，而且还是字符串。提交的时候必须转换为字符串。

  var uid = wx.getStorageSync("userId");
    let {companyName, jobType, jobName, level, jobState ,deadLine,location} = e.detail.value;
    var offerData={
      userId:uid,
      companyName, 
      jobName,
      jobType, 
      level: parseInt(level), 
      jobState, 
      deadLine: new Date(deadLine).getTime().toString() ,
      location
    }

利用getTime()来转换时间戳，然后toString()来转换为字符串，同样的，取到时间戳以后需要转换为时间。

（1）在utils.js里面写formatTime函数

（2）在需要用到的页面js文件手部引入

var time = require('../../utils/util.js');

（3）使用

   itemList.date = time.formatTime(new Date(parseInt(datas[i].deadLine)));

 如果报错说：date.getFullYear is not a function;

就是少了new Date()

5、页面下拉刷新

在需要下拉刷新的页面，***.json文件中开启刷新

{"enablePullDownRefresh": true, //开启下拉刷新

"backgroundColor": "#f0145a" 
}

 然后在js文件里面编写

   onPullDownRefresh: function() {
console.log('--------下拉刷新-------')
    var uid = wx.getStorageSync("userId");
    var that = this;
    wx.request({
      //请求代码
      })
}

 当中有一个小bUg,下拉刷新不生效，onPullDownRefresh函数不执行。

解决：发现小程序每一个页面的Js文件都自动生成了这个，所有不需要自己编写，这样就编写了两个，删掉一个就可以了。