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