全栈开发工程师微信小程序-中(下)

全栈开发工程师微信小程序-中(下)

微信小程序视图层

wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元.

// 绑定数据
index.wxml
 {{message}} 

index.js
Page({
 data: ({
  message: 'Hello'
 })
})
复制代码

// 组件属性
// data中的数据绑定到微信小程序组件上
"item-{{id}}">

Page({
 data: {
  id: 0
 }
})
复制代码

if="{{con}}">

Page({
 data: {
  con: true
 }
})
复制代码

"{{false}}">
复制代码

复制代码

{{a+b}}+{{c}}+d

Page({
 data: {
  a: 1,
  b: 2,
  c: 3
 }
})

3+3+d
复制代码

if="{{len > 5}}">
复制代码

{{"dashu" + name}}

Page({
 data: {
  name: 'coding'
 }
})
复制代码

{{object.key}} {{array[0]}}

Page({
 object: {
  key: "dashucoding"
 },
 array: ['dashu']
})
复制代码

if="{{con}}"> dashu 
// 是否进行渲染
if="{{len > 4}}">view1
elif="{{len > 3}}">view2
else>view3
复制代码

for="{{arr}}">
 {{index}} : {{item.message}}


Page({
 arr:[{
 message: "a",
 },{
  message: "b"
 }]
})

// wx:for-item指定数组当前元素的变量名
// wx:for-index指定数组当前项目下标的变量名

for="{{arr}}" wx:for-index="ind" wx:for-item="itemN">
 {{ind}} : {{itemN.message}}


一个包含多个节点的结构块block

for="{{[1,2,3,4,5]}}">
  {{index}} 
  {{item}} 

复制代码

// wx:key指定唯一标识符
动态改变或有新列表的加入

for="{{obj}}" wx:key="con" style="display: block;"> {{item.id}} 

Page({
 obj: [
  {id: 3, con:'con_3'},
  {id: 2, con:'con_2'},
  {id: 1, con:'con_1'},
 ]
})
复制代码

// 定义模板 template
// 共用代码,一次编写多次使用


// wxml
// is使用模板