微信小程序开发经验总结(三)

微信小程序开发经验总结

微信小程序开发经验总结(一)
微信小程序开发经验总结(二)
微信小程序开发经验总结(三)
微信小程序开发经验总结(四)
微信小程序开发经验总结(五)
微信小程序开发经验总结(六)
微信小程序开发经验总结(七)

7. 列表 相当于android的listview

• 列表 wx:for

  <view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
  当 wx:for 的值为字符串时，会将字符串解析成字符串数组
  注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

• 复用 wx:key data的字段 或者*this ( item 本身是一个唯一的字符串或者数字)

  <switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
  wx:key 指定列表中项目的唯一的标识符

• 条件显示 wx:if item类型不同 可以结合template

  <view wx:if="{{length > 5}}"> 1 </view>
  <view wx:elif="{{length > 2}}"> 2 </view>
  <view wx:else> 3 </view>
  

8. block

• 条件块 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

9. wx:if vs hidden

• wx:if 局部渲染 惰性的
• hidden 组件始终会被渲染，只是简单的控制显示与隐藏

10. 事件 列表item点击事件

• 最常用的是view 的bindtap 点击事件

• bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

• 这里要说的是 列表各item的点击事件 ,如何判断点击哪个,

• 方式一 通过id

  <view wx:for="{{[1,2,3,4,5,6,7]}}">
      <view  id="{{index}}"  bindtap='bindtap'>
       {{item}}
     </view>
  </view>
  bindtap:function(e){
   //判断条件
   var id=e.currentTarget.id
  
  }
  

• 方式二 通过 dateset

   <view wx:for="{{[1,2,3,4,5,6,7]}}">
         <view  data-id="{{index}}"  bindtap='bindtap'>
          {{item}}
        </view>
   </view>
   bindtap:function(e){
      //判断条件
      var id=e.currentTarget.dataset.id
   }
  

11. 模块化 封装

• .js

  var common = require('../../utils/common.js')

• .wxml 提供两种文件引用方式import和include

  import可以在该文件中使用目标文件定义的template
  <!-- item.wxml -->
  <template name="item">
  <text>{{text}}</text>
  </template>
  <import src="item.wxml"/>
  <template is="item" data="{{text: 'forbar'}}"/>
  
  include可以将目标文件除了<template/>的整个代码引入，相当于是拷贝到include位置
  <include src="footer.wxml"/>

• .wxss

  /**实际路径要写全*/
  @import "common.wxss";

• .wxml 新增.wxs