4-微信小程序 相关知识点代码示例
基于上篇文章的理论文本的介绍来进行相关代码的演示和例子
该篇文章需注意，在微信小程序的使用时，应先熟悉里面每个文件的作用，在第二篇文章有详细记载，一般用的比较多的是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'
}]
},
结果：