微信小程序篇】二. 微信小程序的视图与渲染

视图与渲染

项目准备

1. 创建一个新项目demo2
2. 在pages下创建一个新目录first
3. 目录下新建first.wxml和first.js
   
4. 在app.json中定义页面（注意名字要对应，好像会自动生成json和wcss文件,暂时不用管）
5. 在first.js中调用Page({ … })方法 (注意让Page自动生成里面的函数)
   
6. 删除app.json原来的路径并给first.wxml添加内容然后编译
   

1. 组件的基本使用

1.1 button组件

	<!-- button组件 -->
	<button type="default">DefaultButton</button>
	<button type="primary">PrimaryButton</button>

1.2 text组件

	<!-- text组件 -->
	<text>Hello wxApp</text>

1.3 view组件

	<!-- view组件 -->
	<view>Hello wxApp</view>

wxml换行2种方式

	<!-- \n 或 view  转义 \\ == \   -->
	<text>换行的2种方式 view组件 和 \\n </text>

更多组件查看微信文档https://developers.weixin.qq.com/miniprogram/dev/component/button.html

2. 数据绑定

2.1 动态加载数据

在first.js中data添加的数据

Page({
  /**
   * 页面的初始数据
   */
  data: { 
    text:"这里是动态加载的数据",
    btnText:"动态加载按钮数据"
  },
  ....
})

在first.wxml中通过{{}}去取值

<!-- 动态加载数据 -->
<view>{{text}}</view>
<!-- 动态加载按钮数据 -->
<button type="primary">{{btnText}}</button>

2.2 绑定事件

first.js

Page({
  data: { 
    text:"这里是动态加载的数据",
    btnText:"动态加载按钮数据",
    changeText:"这是原来的值"
  },
  // 通过按钮绑定事件调用该方法
  changeText:function(){
    this.setData({ changeText:"这是通过按钮绑定时间修改的值"})
  },
	....
})

first.wxml

<!-- 事件绑定:修改值 -->
<button type="primary" bindtap="changeText">{{btnText}}</button>
<view>{{changeText}}</view>

3. 渲染标签

3.1 wx:if

first.js

Page({
  data: { 
    ...
    wxTrue:true,
    wxFalse:false,
    show:true
  },
  // 通过按钮修改渲染标签
  changeShow:function(){
    var flag = this.data.show;
    this.setData({ show: !flag});
  },
  ...
})

first.wxml

<view>--------------渲染标签-------------------</view>
<!-- wx:if -->
<!-- 根据true和false来判断要不要显示内容 -->
<view wx:if="{{true}}">{{text}}</view>  
<view wx:if="{{false}}">{{text}}</view>
<!-- 也可以动态加载-->
<text>\n</text>
<view wx:if="{{wxTrue}}">{{text}}</view>  
<view wx:if="{{wxFalse}}">{{text}}</view>
<text>\n</text>
<!-- 也可以通过事件来修改show的值 -->
<button type="primary" bindtap="changeShow">修改渲染</button>
<view wx:if="{{show}}">{{text}}</view>

3.2 wx:else

<!-- wx:else -->
<view wx:if="{{show}}">{{text}}</view>
<view wx:else >{{text}}</view>

3.3 wx:for

first.js

data: { 
  	...
    news: ['aaa', 'bbb', 'ccc']
  },

first.wxml

<!-- ws:for -->
<view wx:for="{{news}}" wx:for-item="itemxx" wx:for-index="i">
<!-- item是wx定死的可以通过wx:for-item来修改 -->
<!-- {{item}} -->
<!-- index显示第几条 index也可以通过wx:for-index来修改 -->

  {{i}}-{{itemxx}}
</view>

3.3.1 修改news的值

\\ first.js
// 通过按钮修改news
changeNews:function(){
   var newData = this.data.news;
   newData.shift(); //删除第一个
   this.setData({news:newData});// 修改news
},

// first.wxml
<!-- 修改值 -->
<button type="primary" bindtap="changeNews">修改news的值</button>

4. 模板的使用

应用：多个页面用同一个头部和底部，可套用模板。

4.1 <include>

在pages目录下新建templates目录，创建 header.wxml 和 footer.wxml
然后通过套到页面的第一行和最后一行

4.2 <import> 配合<template>

在templates新建一个页面 headfoot.wxml

<template name="header2">
  header ...
</template>

<template name="footer2">
  footer ...
</template>

first.wxml

<import src="../templates/headfoot" />
<template is="header2" />
  <view>...</view>
<template is="footer2"></template>

4.2.1 导入数据