一、建立一個頁面

1.首先我們新建一個專案，在新建的專案中有index 頁面和 logs 頁面，即歡迎頁和小程式啟動日誌的展示頁，他們都在 pages 目錄下。微信小程式中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中，且 pages 中的第一個頁面是小程式的首頁。

每一個小程式頁面是由同路徑下同名的四個不同字尾檔案的組成，如：index.js、index.wxml、index.wxss、index.json。.js字尾的檔案是指令碼檔案，.json字尾的檔案是配置檔案，.wxss字尾的是樣式表文件，.wxml字尾的檔案是頁面結構檔案。

好了，然後我們新建一個自己的頁面，首先建一個資料夾（myPage），在資料夾下建立對應的佈局檔案（myPage.wxml）和js檔案（myPage.js），最後記得在app.json中配置頁面資訊，在app.json中需要注意了，在pages的數組裡，第一個代表著啟動時第一個載入的頁面

2.然後進入除錯介面，點選重啟按鈕，看下效果，會發現在控制檯中彈出了報錯的資訊，如下：

3.看報錯的資訊，很清楚的知道在myPage.js檔案中沒有找到Page方法，因此我們在myPage.js檔案中呼叫Page方法，然後除錯，重啟，就會發現不報錯了！

4.好了，在第一點中也說到，在app.json中pages的數組裡，第一個代表著啟動時第一個載入的頁面，那好我們把順序調轉一下，就可以驗證我們的結論了

二、元件的使用和資料的繫結

可以看到API文件詳細的介紹了各種元件的使用，要熟悉元件的使用，最好的方式就是多練了!

2.看著文件，把官方文件的例子直接貼進來，然後我們也建立一個text元件，看看效果先吧：

結合程式碼進行分析：

js程式碼：

三、渲染標籤

微信小程式給我提供了兩種渲染標籤：

1.判斷標籤wx:if和wx:else

雖然之前沒有接觸過js，可是程式碼也挺容易理解的，邏輯思維跟Android還是有點像，不過想學好，還是要學下js的，所以最近我也會學下js

最後我們看下效果圖吧，可以看到當位true的時候就顯示1 false時顯示2

2.迴圈標籤（wx:for）

看下迴圈標籤在佈局檔案中的使用吧

看下效果圖：

四、樣式模板的使用

從上面的程式碼就可以看到，一個介面可能會用到很多佈局的程式碼，可是介面與介面之間可能會有很多重複的樣式，然而這些樣式的程式碼，每次都要重新寫就很麻煩了，而且也浪費資源，微信小程式像其他開發一樣，也有樣式模板的使用方式

1.使用include的方式包含模板樣式
例如：<include src="../templates/myText" />
具體的使用看圖片：

使用這種方式引用模板，實際上就是等同於把templates中的myText的程式碼全部複製到include這裡

2.使用import的方式
例如：

<!--模板樣式的使用  底部樣式-->
<import src="../templates/footer"  />
<template is="footer1" />

最後看下效果圖：