一扫责、創(chuàng)建項目
首先要有一個小程序開發(fā)者賬號事镣，可以通過官網(wǎng)教程去了解一下
https://mp.weixin.qq.com/debug/wxadoc/dev/index.html
然后可以在 “開發(fā)設(shè)置” 中獲取到AppID
婚夫，然后打開微信web開發(fā)者工具創(chuàng)建項目
下面是微信web開發(fā)者工具的下載地址：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
打開后可以看到創(chuàng)建項目的界面澄步，需要建空目錄供項目存放裸违，還有就是需要上面所說的AppID
可以選擇模板創(chuàng)建普通及插件快速啟動模板呢岗，還有用nodejs和php創(chuàng)建有后臺模板湃鹊，不過需要綁定騰訊云儒喊。
一個 AppId 可以開發(fā)多個小程序，不過發(fā)布的時候只能發(fā)布一個
生成的項目結(jié)構(gòu)如下：
其中 project.config.json 是整個項目的配置文件币呵，里面包含了微信（小程序基礎(chǔ)庫）版本怀愧、appid 等信息
具體配置項可以參考 https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html
utils 文件夾用于存放一些公用腳本，pages 文件夾存放頁面文件余赢，app.js芯义、app.json、app.wxss 構(gòu)成程序主體
二妻柒、app全局配置
項目根目錄下的app.json扛拨、app.js、app.wxss都是做為全局配置的存在
app.json里面有配置頁面路徑列表的pages举塔、配置全局默認窗口的window绑警、及配置底部菜單的tabBar
app.js 里面的App() 函數(shù)可以用來注冊一個小程序，它可以監(jiān)聽app在運行時的事件央渣，例如程序的初始化计盒、頁面的進入及跳轉(zhuǎn)、觸發(fā)腳本出錯時的信息等等芽丹，還可以定義一些全局數(shù)據(jù)globalData北启，方便其余頁面調(diào)用
app.wxss 就是全局的css了，里面設(shè)置的樣式將會運用在所有的頁面里面
想了解更多可以看看下面的文檔志衍，里面還有對以上配置的詳解
https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
三暖庄、頁面結(jié)構(gòu)
從創(chuàng)建的項目中我們可以看得出來，微信小程序中采用 WXML + WXSS + JS + JSON 的方式渲染頁面楼肪，在pages里面每個頁面都是一個單獨的文件夾存放著這四種文件
1. WXML 網(wǎng)頁模板培廓，用于編譯小程序的 html 部分*
微信小程序也采用了MVVM的形式，所以 WXML 實際寫法更類似于 Vue
比如常見的用 {{ }} 綁定數(shù)據(jù)
// 基礎(chǔ)綁定
<view> {{ message }} </view>
// 組件屬性
<view id="item-{{id}}"> </view>
// 控制屬性
<view wx:if="{{condition}}"> </view>
WXML 還可以實現(xiàn)列表渲染春叫、自定義模板肩钠，詳情可以查看文檔中關(guān)于WXML的介紹
需要留意的是泣港，小程序底層將 html 元素都封裝成了組件
所以不能在 WXML 文件中直接使用 div、p价匠、span 等標簽当纱，而是使用組件
2. WXSS 樣式語言，基于CSS擴展*
可以直接寫CSS樣式踩窖，但是只支持部分選擇器坡氯，比如 * 和 > 選擇器都是不支持的
另外只有 app.wxss 中的樣式是全局樣式，對所有組件生效洋腮。pages 目錄下的 wxss 僅對當前組件生效
WXSS 中還新增了尺寸單位 rpx箫柳，并規(guī)定屏幕寬度固定為750rpx
所以在寬度為 750px 的設(shè)計稿中，1rpx = 750/750 = 1px啥供，
如果是寬度為 640px 的設(shè)計稿悯恍，1rpx = 750/640 = 1.17px
3. js 還需要解釋么*
微信小程序中沒有再對 js 進行擴展，只是在觸發(fā)事件的時候伙狐，分為 bind 和 catch 兩種形式
<view id="outer" bind:tap="handleTap1">
outer view
<view id="middle" catch:tap="handleTap2">
middle view
<view id="inner" bind:tap="handleTap3">
inner view
</view>
</view>
</view>
二者的區(qū)別在于涮毫，bind 不會阻止冒泡事件向上冒泡，catch 可以阻止冒泡事件向上冒泡
另外贷屎，bind 和 catch 后面的冒號可以省略
4. json 頁面配置文件*
app.json 是小程序的全局配置文件罢防，包括了小程序的所有頁面路徑、界面表現(xiàn)等
詳細配置信息可以查看這里：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
pages 目錄下的 json 文件和 app.json 類似豫尽，但是 page.json 只對當前組件生效
四篙梢、頁面配置
假如有個文件夾index
那么里面的index.json 就是用于設(shè)置小程序的狀態(tài)欄顷帖、導(dǎo)航條美旧、標題、窗口背景色
需要注意的是贬墩，這個json里面不能加注釋榴嗅，否則會文件解析錯誤
另外就是index.js文件
js里面的 Page(Object) 函數(shù)用來注冊一個頁面。接受一個 Object 類型參數(shù)陶舞，其指定頁面的初始數(shù)據(jù)嗽测、生命周期函數(shù)、事件處理函數(shù)等肿孵。
