1. 列表渲染

• 将wx:for代码块放入<block></block>中

  <block wx:for="{{books}}">
    <v-book  books="{{item}}" wx:key="item.id"></v-book></block>

• 通过wx:for-item="itemName",小程序wx:for默认别名为item

• 使用场景为：组件内部定义了item属性，通过修改别名避免冲突

  <block wx:for="{{books}}" wx:for-item="itemName">
          <v-book books="{{itemName}}" wx:key="itemName.id"></v-book>
        </block>

2.页面page如何传递参数

• 通过wx.navigateTo跳转的页面，参数会包含在onLoad方法的options里

  
  

  // 组件跳转前携带参数wx.navigateTo({
    url: `/pages/book-detail/book-detail?bid=${bid}`,})// 跳转后的组件从onLoad生命周期里获取参数

3.三种小程序编译模式

• 普通编译：每次编译完打开首页

• 添加编译模式：自己定义编译模式，自定义启动页面

• 通过二维码编译

4.slot插槽的使用

• slot插槽可以理解为组件的properites，只是slot传入的是标签

• slot插槽使用分为三步：启用slot，定义slot，使用slot

• 组件中使用slot

  options:{
      multipleSlots: true}

• 组件页面定义slot插槽

  <slot name="nums">{{num}}</slot>

• 页面中使用插槽

  <v-tag text="{{item.content}}">
            <text slot='nums'>{{'+'+item.nums}}</text></v-tag>

• slot插槽的标签样式在页面中设置

5.外部样式的概念-externalClass

• 外部样式externalClass使用(类似于插槽slot)

• 在组件中定义externalClass外部样式

    externalClasses: [
      'tag-class'
    ],

• 在组件中使用

  <view class="container tag-class">

• 在外部页面传入样式

  // wxml<v-tag tag-class="ex-tag" text="{{item.content}}">// wxss.ex-tag{
      color:white;}

• 外部样式如何强制覆盖普通样式

• 1.不要默认样式，只用外部样式

• 2.使用外部样式强制覆盖普通样式（!important）

• 小程序中，外部传入的样式无法保证肯定能覆盖掉组件的默认样式，因为小程序没有强制使用外部样式覆盖默认样式的机制。解决办法有两种：

6.让wxml能够解析&nbsp

• 在页面tag上开启解析能力 decode ="{{true}}"

  <text class="content" decode="{{true}}">{{util.format(book.summary)}}</text>

7.wxs概念与应用

• 为什么用wxs

• wxml无法调用js以及编写js

• 使用wxs实现过滤器的功能

• 如何使用-以格式化文本为例(去掉多余的号)

• 新建filter.wxs（wxs中只能使用var，不能使用const）

  var format = function (text) {
    if (!text) {
      return
    }
    var reg = getRegExp('\\n', 'g')
    return text.replace(reg, '
  ')}var getTag = function (index) {
    var tag = index == 0 ? 'ex-tag1' : '' || index == 1 ? 'ex-tag2' : ''
    return tag}module.exports = {
    format: format,
    gettag: getTag}

• wxml页面使用

  // 引入<wxs src="../../util/filter.wxs" module="util"></wxs>// 使用<text class="content">{{util.format(book.summary)}}</text>

• 直接在wxml中编写wxs代码

  <wxs module="tools">
    var getTag = function (index) {
      if (index == 0) {
        return 'ex-tag1'
      }
      if (index == 1) {
        return 'ex-tag2'
      }
      
      return ''
    }
    module.exports={
      getTag: getTag  }</wxs>

8.小程序的常用事件

• 1.bind:tap事件

• 用户点击触发

• 2.input专用bindconfirm事件

• 输入完点击键盘上的完成按钮时触发

9.常用toast

• 弹出提示信息wx.showToast

  wx.showToast({
    title: comment + 1,
    icon: 'none'})

• 加载提示wx.showLoading

  wx.showLoading()

10.并行请求与串行请求

• Promise.all()-将多个Promise实例合并成一个Promise

  Promise.all([detail, comments, likeStatus]).then(res => {
    wx.hideLoading()})

• Promise.race()-相互竞争，多个Promise实例中最先完成的实例触发