小程序的發(fā)展勢(shì)不可擋，也有越來(lái)越多的人加入了小程序開發(fā)，對(duì)于小程序開發(fā)（前端方面），可速云小編從網(wǎng)上搜集了一些開發(fā)資料，希望可以幫到大家。
開發(fā)之前
開發(fā)之前先介紹幾個(gè)基本概念，在微信小程序開發(fā)中會(huì)經(jīng)常用到
自定義組件：復(fù)用性高的交互模塊，可以考慮以組件的形式封裝，提高復(fù)用性和開發(fā)效率，但同時(shí)也需注意低版本兼容問(wèn)題.
低版本兼容：某些API是在迭代中新增的，故和小程序版本號(hào)與客戶端版本有關(guān)，故在使用前需進(jìn)行兼容性判斷（如VUE不兼容IE8以下，因?yàn)閂UE基于Object.defineProperty）。
插件：程序基礎(chǔ)庫(kù)版本 1.9.6 開始支持。適合用來(lái)封裝自己的功能或服務(wù)，提供給第三方小程序進(jìn)行展示和使用。
場(chǎng)景值：可以區(qū)分小程序是從哪個(gè)場(chǎng)景打開的，如群聊會(huì)話卡片，發(fā)現(xiàn)欄小程序tab入口，以便做精細(xì)化運(yùn)營(yíng)或數(shù)據(jù)區(qū)分。
WXS：WXS（WeiXin Script）是小程序的一套腳本語(yǔ)言，結(jié)合 WXML，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。比如對(duì)金額封裝展示函數(shù)等場(chǎng)景。
代碼結(jié)構(gòu)
.json 后綴的 JSON 配置文件
.wxml 后綴的 WXML 模板文件
.wxss 后綴的 WXSS 樣式文件
.js 后綴的 JS 腳本邏輯文件
JSON 配置: 小程序或頁(yè)面的靜態(tài)配置，具體參見。
app.json：當(dāng)前小程序的全局配置，包括了小程序的所有頁(yè)面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部 tab 等。大致如下：
{
"pages": ["pages/index/index", "pages/logs/logs"],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
}
工具配置 project.config.json：個(gè)性化配置，例如界面顏色、編譯配置等等。
頁(yè)面配置 page.json：獨(dú)立定義每個(gè)頁(yè)面的一些屬性。
需要注意的是 JSON 文件中無(wú)法使用注釋，試圖添加注釋將會(huì)引發(fā)報(bào)錯(cuò)。
WXML 模板
可以理解為傳統(tǒng)Web的HTML，描述頁(yè)面的結(jié)構(gòu)。WXML也由標(biāo)簽、屬性等等構(gòu)成。需要注意以下幾點(diǎn)：
標(biāo)簽名不完全一樣。如HTML的div->WXML的view等，這里按照文檔去寫就行。
多了一些語(yǔ)法糖，可快速實(shí)現(xiàn)傳統(tǒng)HTML元素隱藏，文本展示等。
小程序整體設(shè)計(jì)模式采用MVVM（與當(dāng)代前端三大MVVM框架大同小異）：
M: model（模型）
V：view（視圖）
MV: model-view（模型-視圖驅(qū)動(dòng)器）
WXSS 樣式
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些擴(kuò)充和修改。
新增了尺寸單位rpx。自適應(yīng)各種機(jī)型設(shè)備，開發(fā)者無(wú)需關(guān)心適配問(wèn)題。
提供了全局的樣式和局部樣式。app.wxss為全局生效的樣式，可以理解為傳統(tǒng)網(wǎng)頁(yè)的common.css。每個(gè)頁(yè)面結(jié)構(gòu)下的page.wxss會(huì)覆蓋app.wxss的樣式。
wxss只是css的子集。部分高級(jí)特性可能不支持。
JS 邏輯交互
和傳統(tǒng)web事件響應(yīng)機(jī)制類似，產(chǎn)品的交互行為由.js文件承載，并需要在page()里定義，并且小程序底層提供了豐富的API，可以很方便調(diào)起微信提供的能力。
?
注冊(cè)小程序和頁(yè)面
注冊(cè)小程序：在根目錄下的app.js下定義App實(shí)例，小程序啟動(dòng)之后App中的定義生命周期函數(shù)會(huì)在對(duì)應(yīng)生命周期被執(zhí)行。
注冊(cè)頁(yè)面：與App實(shí)例類似，需再每個(gè)頁(yè)面下定義Page實(shí)例，Page也擁有其data屬性、生命周期函數(shù)、事件等。
組件
官方基于常見的交互，封裝了許多常用的UI組件，可以讓開發(fā)者更聚焦于業(yè)務(wù)和功能開發(fā)。組件提供了一些常用屬性，以應(yīng)對(duì)不同的業(yè)務(wù)場(chǎng)景，如在頁(yè)面內(nèi)引入日期選擇組件，只需如下代碼：
<picker
mode="date"
value="{{date}}"
start="2015-09-01"
end="2017-09-01"
bindchange="bindDateChange"
>
<view class="picker">
當(dāng)前選擇: {{date}}
</view>
</picker>
API
為了讓開發(fā)者可以很方便的調(diào)起微信提供的能力，例如獲取用戶信息、微信支付等等，小程序提供了很多 API 給開發(fā)者去使用。如調(diào)用微信掃一掃功能：
wx.scanCode({
success: (res) => {
console.log(res)
}
})
以上只是對(duì)小程序基礎(chǔ)特性的一個(gè)介紹，還有一些如運(yùn)行環(huán)境、更新機(jī)制、運(yùn)行機(jī)制可以參照官方文檔，不再此贅述。
熱門推薦: 上海微信小程序 小程序開發(fā) 小程序設(shè)計(jì) 支付寶小程序 百度小程序?
