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'

}]

},

结果:

热门相关:落地一把98K   上将大叔,狼来了!   一等狂妃:邪王,请接招!   宠物小精灵之庭树   楚氏赘婿