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

合集 - 微信小程序(7)

1.2-微信小程序和web前端的差异及模板与配置2023-09-182.3-微信小程序flex布局2023-09-18

3.4-微信小程序 相关知识点代码示例2023-09-18

4.5-微信小程序 点击事件2023-09-185.6-微信小程序 表单获取数据2023-09-186.8-微信小程序的网站的接口调用(第三方接口调用)2023-09-187.9-微信小程序的网站的接口调用(直接调用)2023-09-19

收起

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

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

1. 数据绑定

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

wxml：

<view>{{message}}</view>

wx.js:

data:{

   message:'hello world'

},

结果：

2.运算

1）三元运算

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

wxml：

<view hidden="{{flag ? true : flase}}">Hidden</view>

结果：

2）.算数运算

wxml：

<view>{{a+b}}+{{c}}+ljy</view>

wx.js:

data:{

    a:500,

    b:20,

    c:1314

},

结果:

3.字符运算

wxml：

<view>{{"hello"+name}}</view>

wx.js：

data：{
 
 name:'world'

}，

结果：

4.数据路径运算

wxml：

<view>{{object.key}} {{array[0]}}</view>

wx.js：

data：{
    
object:{
   
   key:'hello'
 
   },
  
  array:['world'] 

}

结果：

5.数组

wxml：

<view wx:for="{{[zero,1,2,3,4,5,6]}}">{{item}}</view>

wx.js:

data:{
 
 zero:0

},

结果：

6.列表渲染

wxml：

<view wx:for="{{array}}"> {{item}} </view>

wx.js：

data：{
  
array:[1,2,3,4,5]

}，

结果：

7.if else 条件渲染

wxml：

<view wx:if="{{view == 'webview'}}">webview</view>

<view wx:elif="{{view == 'app'}}">APP</view>

<view wx:else="{{view == 'mina'}}">mina</view>

wx.js:

data：{
  
view:'webview'

}，

结果：

8.案例

wxml：

<template name="staffName">
  
<view>
  
FirstName: {{firstName}},LastName: {{lastName}}
  
</view>

</template>

<template is="staffName" data="{{...staffA}}"></template>

<template is="staffName" data="{{...staffB}}"></template>

<template is="staffName" data="{{...staffC}}"></template>

wx.js:

data:{
    
    staffA: {firstName: 'Hulk',lastName:'Hu'},
  
    staffB: {firstName: 'shang',lastName:'You'},

    staffC: {firstName: 'Gideon',lastName:'Lin'}
},

9.wx:for 遍历

wxml：

<view wx:for="{{array}}">
 
 {{index}}:{{item.message}}

</view>

wx.js:

data:{

array:[{
     
   message:'foo',
    
},{
      
   message:'bar'
    
}]

},

结果：