微信小程序学习笔记（动态绑定样式，双层循环item重名，页面跳转，async/await的再次学习）

微信小程序学习笔记

1，微信小程序动态绑定style样式和class

今天在做项目时遇到了一个关于切换导航 切换样式的问题，自己是想用style和class动态绑定来完成 但是自己一时又记不起来怎么写了 于是上网上 查了查资料 现在来进行总结

首先是遍历导航按钮的每一项并赋予index

第二步是通过点击导航按钮来更改保存在data中的selectIndex通过在标签中的class样式

<button class="{{ index===currentIndex? 'active':'' }}" >
          {{ item.typename }}
    </button>

2，关于微信小程序的双层循环嵌套的item同名的问题

今天同样是在一个页面在自己也遇到了双层循环嵌套的问题，但是自己因为不知道怎么给第二个内部嵌套的item重新命名而产生问题 所以自己也上网查找了怎样 修改内部循环出item的方法

  <swiper-item wx:for="{{ questionList }}" wx:key="{{ index }}">
    <view class="section">
      <view wx:for="{{ item['answers'] }}" wx:key="{{ index }}" wx:for-item="questionItem">{{ questionItem['id'] }}</view>
    </view>
  </swiper-item>

方法如上：wx:for-item="新名字"即可index同理，wx:for-index=“新名字”

3，关于微信小程序跳转页面的的问题

项目中用到了点击使用优惠卷跳转到首页的一个业务 因为自己对小程序的官方文档不够熟悉 所以自己在这里也卡壳了 今天就在这里 进行再次学习

 wx.navigateTo()  带历史回退
  wx.redirectTo() 不保留历史，跳转到另一个页面，不能返回到上一页面  this.$router.replace()
  wx.switchTab() 只跳转到tabBar页面，不带回退
  wx.reLaunch() 即能跳转到tabBar页面，也能跳转到非tabBar页面，不带历史回退

4，昨天晚上的async和await方法自己还不是太理解 今天进行再次学习

首先是于async/await相关的知识点promise对象 、

promise对象特点

• 对象的状态不受外界影响
• 一旦改变状态，就不会再改变了，任何时候都可以得到这个结果

Promise的then方法:

promise的then方法带有以下三个参数：成功回调，失败回调，前进回调，一般情况下只需要实现第一个，后面是可选的

function greet(){
var promise = new Promise(function(resolve,reject){
    var greet = "hello  world";
    resolve(greet);
});
return promise;
}
var p = greet().then(v=>{
console.log(v);
})

console.log(p);

这段代码的输出结果：

promise{ }

hellow world

从结果看出 promise是一个异步的方法，因为hellow world在最后语句打印出来 而且 promise状态还是pending（进行中）

看完了 proomise后 我们再来看看async和await这个东东

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function f1() {
  var x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}
f1();

这段代码通过昨天的学习和自己的理解来看在执行f1时 因为f1前加了async异步函数 函数中还有await会等待resolveAfter2Seconds这个函数 所以 隔了两秒后就会打印10 “async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。”这时候 理解这句话 难度也就不大了 在以后项目中多多使用 熟能生巧

今天的学习总结 就是这些了 明天继续加油