小程序开发的几个技巧应用

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, '\n')
    }
    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实例中最先完成的实例触发