基本框架：json
.wxml ：頁面骨架小程序
.wxss ：頁面樣式微信小程序
.js ：頁面邏輯 描述一些行爲微信
.json ：頁面配置app
建立一個小程序以後，app.js,app.json,app.wxss是必須的，並且名字也不能隨意更改，這些是做用於APP全局的，而用戶建立的一些目錄，這些能夠看作一個個頁面，這些目錄下面也包含上面所說的.wxml文件，.wxss文件，.js文件，.json文件。這些文件和目錄的名字是能夠隨意取的。有的文件不是必須的，能夠參考微信小程序官方文檔。以下：框架
就近關係：對於一個樣式來講，若是既在全局裏配置了，也在某個頁面配置了，那麼以離頁面最近的樣式爲準。好比在全局樣式表裏配置文本顏色是紅色，在某個頁面的樣式表配置了文本顏色是黑色。那麼當打開這個頁面的時候，文本顏色是黑色，而不是紅色。這對於.json文件也是同樣。iphone
應用程序和頁面之間的關係：xss
微信小程序容許縱向級數最高五級，後面會介紹導航組件，設置幾級頁面以及之間的跳轉。工具
代碼實例：佈局
程序目錄爲：
app.json：
1 /*app.json是全局配置文件，在這裏不能隨意添加註釋*/ 2 { 3 "pages": [ 4 "pages/welcome/welcome" /*設置頁面路徑，必定要按照前後順序來寫，否則會報錯。*/ 5 /*會自動關聯以welcome開頭的全部類型文件*/ 6 7 ], 8 9 "window":{ 10 "navigationBarBackgroundColor":"#b3d4db" /*設置導航欄顏色*/ 11 } }
app.wxss：
1 text{ 2 font-family: MicroSoft Yahei; /*配置全局文本字體，通用的配置放在這裏*/ 3 4 }
welcome.wxml：
1 <!--wxml是編寫小程序骨架的文件--> 2 <view class="container"> 3 <image class="userinfo-avatar" 4 src="/images/頭像.jpeg"></image> <text class="user-name"><text style="color:red">hello</text>,morning</text> 5 <!-- style="" 這樣的樣式能夠寫在wxss裏，而後用class調用--> 6 <!--若是是靜態的樣式，寫在wxss裏而後用class調用；若是須要動態修改樣式， 用style實現--> 7 <!--在<text></text> 組件之中的文本，才能夠在手機上長按選中複製；text能夠嵌套使用；在text裏\n是換行而不是字符--> 8 <view class="moto-container"> <text class="moto">開啓小程序之旅</text> </view> </view>
welcome.wxss：
1 /*CSS要有一個總體佈局的思想，把頁面看作一個總體，而後對它進行樣式的配置。而不是把一個頁面中，每一個部分獨立分開排布。*/ 2 .container{ 3 display: flex; /*將容器變成彈性模型*/ 4 flex-direction: column; /*列方向排列*/ 5 align-items: center; /*居中*/ 6 } 7 8 .userinfo-avatar { 9 width: 200rpx; /*開發建議以iphone6，750rpx：1334rpx爲例設計，單位是rpx能夠自適應各類移動端分辨率。*/ 10 height: 200rpx; /*設置寬，高。*/ 11 margin-top: 160rpx;/*設置距離頂部的距離*/ 12 } 13 14 .user-name{ 15 margin-top: 100rpx; 16 font-size: 32rpx; /*字體大小*/ 17 font-weight: bold; /*字體加粗*/ 18 19 } 20 21 .moto-container{ 22 margin-top: 200rpx; 23 border: 1px solid #405f80; /*外邊矩形*/ 24 width: 200rpx; 25 height: 80rpx; 26 border-radius: 5px; /*圓角矩形*/ 27 text-align: center; /*水平居中*/ 28 } 29 30 .moto{ 31 font-size: 22rpx; 32 font-weight: bold; 33 line-height: 80rpx; /*垂直居中，讓文字高度等於容器高度*/ 34 color: #405f80; 35 } 36 37 page{ /*小程序自動在頁面的最外層加了一層<page></page>標籤，咱們的全部組件的標籤都是寫在 這裏面的。因此，若是咱們要對整個頁面進行操做，須要修改page的樣式。*/ 38 height: 100%; /*整個頁面的高度*/ 39 background-color: #b3d4db; /*設置整個頁面的顏色，這樣就算把頁面向下滑動，
整個頁面的背景也是這個顏色的。*/ 40 41 }
整個頁面顯示如圖：
7.7修改：
若是出現此報錯，說明在此目錄下.js文件中沒有對頁面進行任何配置，在老版本的開發工具中不會報錯，而如今會報錯，必須在.js裏進行頁面的配置，哪怕是空配置也能夠。解決以下：
輸入Page出現提示以後，按回車自動會跳出配置模板，不進行任何修改也行。
保存編譯以後報錯消失。