微信小程式 -- 檢視層的用法

初次體驗了一下微信小程式，大體上明白了微信小程式的開發流程。算是簡單入門。

本文參考自微信官方的api文件：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/?t=20161122

檢視app.json

下面是新增一個檢視的開發流程。

a.首先在page資料夾下新增資料夾,然後新增對應的wxml wxss 和json配置檔案以及js檔案，這裡我使用的是sublime

b.開啟js檔案添上,然後在wxmltest.json上加{}(如果沒有配置也必須要加{}，否則頁面顯示不出來內容！)

c.在app.json中註冊頁面（相關的配置參照官方文件）

d.定義頁面佈局

<!-- 資料繫結 -->
<view>{{message}}</view>

<!-- 列表渲染 -->
<view wx:for="{{array}}">
	{{item}}
</view>

<!-- 條件渲染 -->
<view wx:if="{{view=='WEBVIEW'}}">
	WEBVIEW
</view>
<view wx:elif="{{view=='APP'}}">
	APP
</view>
<view wx:else="{{view=='MINA'}}">
	MINA
</view>

<!-- 模板 -->
<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>

 <!-- 事件 -->
 <view bindtap="add">
 	{{count}}
 </view>

e.定義頁面邏輯

Page({
	data:{
		message:'Hello chepeng!',
		array:[1,2,3,4,5,6,7,8],
		view:'MINA',
		staffA:{
			firstName:'Chen',
			lastName:'Peng'
		},
		staffB:{
			firstName:'Li',
			lastName:'xiaoLong'
		},
		staffC:{
			firstName:'Yang',
			lastName:'Zi'
		},
		count:1
	},
	add:function(e){
		this.setData({
			count:this.data.count+1
		});
	}
});

f:頁面效果：