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