微信小程序开发经验总结
微信小程序开发经验总结(一)
微信小程序开发经验总结(二)
微信小程序开发经验总结(三)
微信小程序开发经验总结(四)
微信小程序开发经验总结(五)
微信小程序开发经验总结(六)
微信小程序开发经验总结(七)
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