4-微信小程序 相关知识点代码示例

基于上篇文章的理论文本的介绍来进行相关代码的演示和例子

该篇文章需注意，在微信小程序的使用时，应先熟悉里面每个文件的作用，在第二篇文章有详细记载，一般用的比较多的是wxml、wxss、ws.js 对应网站的开发就是html、css、js、页面的内容及框架、页面的美化、页面的基本功能

1. 数据绑定

定一个变量，放在js的data中

wxml：

{{message}}

wx.js:

data:{

message:'hello world'

},

结果：

2.运算

1）三元运算

三元运算，？之前为true则计算 ？和 ：之间，如果为假则计算冒号之后

wxml：

结果：

2）.算数运算

wxml：

{{a+b}}+{{c}}+ljy

wx.js:

data:{

a:500,b:20,c:1314

},

结果:

3.字符运算

wxml：

{{"hello"+name}}

wx.js：

data：{

name:'world'

}，

结果：

4.数据路径运算

wxml：

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

wx.js：

data：{

object:{

key:'hello'

},

array:['world']

}

结果：

5.数组

wxml：

{{item}}

wx.js:

data:{

zero:0

},

结果：

6.列表渲染

wxml：

{{item}}

wx.js：

data：{

array:[1,2,3,4,5]

}，

结果：

7.if else 条件渲染

wxml：

webview

APP

mina

wx.js:

data：{

view:'webview'

}，

结果：

8.案例

wxml：

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'

}]

},

结果：