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

标题图

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

微信小程序视图层

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

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

index.js
Page({
 data: ({
  message: 'Hello'
 })
})

// 组件属性
// data中的数据绑定到微信小程序组件上


Page({
 data: {
  id: 0
 }
})

Page({
 data: {
  con: true
 }
})

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

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

3+3+d

{{"dashu" + name}}

Page({
 data: {
  name: 'coding'
 }
})

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

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

 dashu 
// 是否进行渲染
view1
view2
view3

 {{index}} : {{item.message}}


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

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


 {{ind}} : {{itemN.message}}


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


  {{index}} 
  {{item}} 

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

 {{item.id}} 

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

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


// wxml
// is使用模板