微信小程序開發(fā)體驗
|
最近公司準(zhǔn)備將產(chǎn)品部分功能遷移到微信小程序，為此從微信小程序官網(wǎng)教程學(xué)習(xí)了小程序開發(fā)，用了一個下午的時間開發(fā)了一個簡單的體質(zhì)指數(shù)計算器的小程序，這里聊聊小程序的開發(fā)體驗。本博文不會注重講解開發(fā)的技術(shù)過程。 1、開發(fā)工具 微信為了幫助開發(fā)者簡單和高效地開發(fā)微信小程序，開發(fā)了微信web開發(fā)工具，下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html
開發(fā)工具里面有編輯功能，也有調(diào)試功能，簡單來說，就是集合了sublime這種富文本編輯器 + 自帶調(diào)試功能和運行環(huán)境的類chrome。編輯功能通過有代碼自動提示和一些簡單的快捷鍵，調(diào)試功能有界面的展示，UI調(diào)試以及邏輯代碼的端點調(diào)試，只要熟悉web調(diào)試功能的開發(fā)者，可以做到馬上上手，無縫對接。 2、一鍵式框架搭建 通過添加項目操作，開發(fā)工具會自動化生成整個小程序的開發(fā)目錄結(jié)構(gòu)，后續(xù)的開發(fā)只要按照對應(yīng)的目錄結(jié)構(gòu)擴(kuò)展以及修改就OK了。用戶無需自己組織整個程序的目錄結(jié)構(gòu)，多人協(xié)作也可以按照這種約定俗成的目錄結(jié)構(gòu)進(jìn)行開發(fā)，規(guī)范了開發(fā)流程。 | img --圖片文件 | page -- 頁面文件 | |index -- 單個頁面文件 | | |index.js -- index頁面js | | |index.json -- index頁面配置 | | |index.wxml -- index頁面結(jié)構(gòu) | | |index.wxss -- index頁面樣式 |app.js --小程序入口 |app.json --小程序整體配置 |app.wxss --小程序整體樣式
這些都是小程序的基本文件，頁面會將頁面文件夾路徑作為頁面標(biāo)志，程序或默認(rèn)的讀取頁面路徑下的wxml文件作為結(jié)構(gòu)，解析wxss和js文件，以及讀取文件夾下面的json配置文件。一個基本的頁面都是要按照這些規(guī)則去添加的。 3、配置式的界面展示 小程序里面每一部分都有一個json文件，這個json文件不是一個數(shù)據(jù)文件，而是一個配置文件。這個配置文件既可以配置程序的展示，比如菜單欄，整個顏色布局，頭部的bar等，也可以配置窗口的狀態(tài)，比如是否允許下拉，還可以配置一些網(wǎng)絡(luò)狀態(tài)，比如規(guī)定超時時間。 比如我們簡單配置app.json的 
"tabBar": {
"selectedColor": "#ff0000",
"list": [{
"pagePath": "pages/recommend/recommend",
"text": "讀創(chuàng)獨創(chuàng)",
"iconPath": "img/icon_tab_shouye_normal@3x.png",
"selectedIconPath": "img/icon_tab_shouye_pressed@3x.png"
},
{
"pagePath": "pages/video/video",
"text": "原創(chuàng)視頻",
"iconPath": "img/icon_tab_shipin_normal@3x.png",
"selectedIconPath": "img/icon_tab_shipin_pressed@3x.png"
}
]
}
屬性
底部的bar條直接就能展示，不用我們代碼實現(xiàn)。從個人的理解來說，小程序通過配置來實現(xiàn)一些通過的界面，有利于微信控制小程序的整體風(fēng)格。 4、自定義的組件 小程序自定義了組件標(biāo)簽，HTML的大部分標(biāo)簽在小程序中無法使用，它有自己的一套標(biāo)簽系統(tǒng)，基本用法跟HTML標(biāo)簽差不多，但對比HTML標(biāo)簽，他在標(biāo)簽內(nèi)為開發(fā)者內(nèi)部實現(xiàn)的功能更強(qiáng)，標(biāo)簽在實現(xiàn)上也針對了移動端的一些常用操作設(shè)置。比如實現(xiàn)了 scrollview，用于滾動視圖 Swiper，用于輪播 這些組件的實現(xiàn)，大大提高了我們的開發(fā)效率。 另外一點，小程序不像vue和react等現(xiàn)在框架，允許開發(fā)者自定義組件，開發(fā)者不能夠自定義組件標(biāo)簽。 5、響應(yīng)的數(shù)據(jù)綁定 幾乎現(xiàn)在流行的框架都采用了數(shù)據(jù)驅(qū)動視圖的方式，小程序的實現(xiàn)也不例外。整個系統(tǒng)分為兩塊，視圖層（view）和邏輯層（APP Service）?？蚣芸梢宰寯?shù)據(jù)和視圖非常簡單地保持同步。當(dāng)數(shù)據(jù)修改的時候，只需要在邏輯層修改數(shù)據(jù)，視圖層就會做相應(yīng)的更新。 小程序更新數(shù)據(jù)的時候需要手動的調(diào)用更新數(shù)據(jù)的函數(shù)setData，這個與vue有比較大的區(qū)別。Vue會在內(nèi)部對數(shù)據(jù)進(jìn)行監(jiān)控，當(dāng)數(shù)據(jù)檢測到發(fā)生變化的時候自動更新。 另外小程序?qū)?shù)據(jù)沒有實現(xiàn)雙向綁定，所以在一些表單數(shù)據(jù)操作的時候會比較麻煩，需要監(jiān)控表單輸入的數(shù)據(jù)，及時更新綁定數(shù)據(jù)。 6、自適應(yīng)的尺寸單位rpx 小程序定義了一套WXSS（WeiXin Style Sheets）樣式語言，其實說白了，就是CSS樣式語言。大部分CSS特性WXSS都有。比較大的區(qū)別就是擴(kuò)展了尺寸單位rpx（responsive pixel）, 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，規(guī)定屏幕寬度為750rpx。這種方式有效解決了自適應(yīng)的問題。 7、脫離DOM和BOM對象 雖然我們的開發(fā)環(huán)境有點像瀏覽器，但是小程序運行的容器并不是瀏覽器，微信在小程序的實現(xiàn)上不是簡單的將微信套上一個瀏覽器那么簡單。既然不是瀏覽器，也就沒有我們在web開發(fā)中常用的DOM對象和BOM對象。 8、豐富的API 雖然不能用DOM對象和BOM對象，但是微信還是提供了很多的API接口，包括網(wǎng)絡(luò)請求，媒體操作，文件操作，緩存控制，以及微信開放的一些功能。調(diào)用起來很方便。
總的來說，小程序開發(fā)沿用了傳統(tǒng)的web開發(fā)，WXML負(fù)責(zé)結(jié)構(gòu)-WXSS負(fù)責(zé)樣式-js負(fù)責(zé)邏輯。只要熟悉web開發(fā)的開發(fā)者，上手沒有任何難度。 最后附上用了半天時間試驗小程序開發(fā)的體質(zhì)計算器源碼，有想了解的話可以點擊查看> |
