微信小程序3

WXML数据绑定

数据绑定 | 微信开放文档 (qq.com)

cc.js文件

 

 

WXML条件渲染

条件渲染 | 微信开放文档 (qq.com)

WXML列表渲染

列表渲染 | 微信开放文档 (qq.com)

不用在app.json里调换顺序，直接编译新建文件的办法：

 cc.wxml文件内容

<view wx:if="{{false}}">新视觉实训基地</view>
<view wx:else>微信小程序</view>
<text decode>&nbsp;</text>

<view wx:if="{{day==1}}">周一</view>
<view wx:elif="{{day==2}}">周二</view>
<view wx:elif="{{day==3}}">周三</view>
<view wx:elif="{{day==4}}">周四</view>
<view wx:elif="{{day==5}}">周五</view>
<view wx:elif="{{day==6}}">周六</view>
<view wx:elif="{{day==7}}">周日</view>
<view>错误</view>

<block wx:if="{{true}}">
  <navigator url="/pages/bb/bb">跳转1</navigator>
  <view>这是标题</view>
  <view>这是内容</view>
</block>

<block wx:else>
  <navigator url="/pages/cc/cc">跳转2</navigator>
</block>

<text decode>&nbsp;</text>
<view wx:if="{{true}}">新视觉实训基地</view>
<view wx:else>微信小程序</view>

<!-- 
if(条件){
  条件成立执行的语句
}else{
  条件不成立执行的语句
}

if(条件1){
  条件1成立执行的语句
}else if(条件2){
  条件2成立的语句
}else{

}
 -->
<view>新视觉实训基地-{{title}}</view>
<view style="color:#888">{{content}}</view>

<view>
  {{listArr[0]}}-{{listArr[2]}}
</view>

<view>
  {{obj.name}}-{{obj.age}}-{{obj.sex}}-{{obj.fun()}}
</view>

<view>{{listArr[0]}}</view>
<view>{{listArr[1]}}</view>
<view>{{listArr[2]}}</view>

cc.js文件部分内容

data: {
    title:"2020微信小程序开发",
    content:"欢迎来到新视觉实训学习微信小程序开发，遇到问题可以进去交流",
    listArr:["平面设计","UI设计","web前端"],
    obj:{name:"张三",age:18,sex:"男"},
    day:3
  },

运行结果

B站视频【P13-P14】