最近公司準(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)擊查看> |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)