基于上篇文章的理论文本的介绍来进行相关代码的演示和例子
该篇文章需注意,在微信小程序的使用时,应先熟悉里面每个文件的作用,在第二篇文章有详细记载,一般用的比较多的是wxml、wxss、ws.js 对应网站的开发就是html、css、js、页面的内容及框架、页面的美化、页面的基本功能
1. 数据绑定
定一个变量,放在js的data中
wxml:
wx.js:
data:{
message:'hello world'
},
结果:
2.运算
1)三元运算
三元运算,?之前为true则计算 ?和 :之间,如果为假则计算冒号之后
wxml:
结果:
2).算数运算
wxml:
wx.js:
data:{
a:500,
b:20,
c:1314
},
结果:
3.字符运算
wxml:
wx.js:
data:{
name:'world'
},
结果:
4.数据路径运算
wxml:
wx.js:
data:{
object:{
key:'hello'
},
array:['world']
}
结果:
5.数组
wxml:
wx.js:
data:{
zero:0
},
结果:
6.列表渲染
wxml:
wx.js:
data:{
array:[1,2,3,4,5]
},
结果:
7.if else 条件渲染
wxml:
wx.js:
data:{
view:'webview'
},
结果:
8.案例
wxml:
FirstName: {{firstName}},LastName: {{lastName}}
wx.js:
data:{
staffA: {firstName: 'Hulk',lastName:'Hu'},
staffB: {firstName: 'shang',lastName:'You'},
staffC: {firstName: 'Gideon',lastName:'Lin'}
},
9.wx:for 遍历
wxml:
{{index}}:{{item.message}}
wx.js:
data:{
array:[{
message:'foo',
},{
message:'bar'
}]
},
结果: