微信小程序簡(jiǎn)介

什么是小程序

是一種介于原生App、和Web App的Hybrid。通過(guò)微信進(jìn)行加載，達(dá)到類(lèi)似原生App的流暢體驗(yàn)。相對(duì)原生App來(lái)說(shuō)，小程序更加輕量、能實(shí)時(shí)更新、跨平臺(tái)；相對(duì)Web App來(lái)說(shuō)，小程序資源離線，體驗(yàn)更流暢。

可以歸納為是用類(lèi)ReactNative/Weex框架編寫(xiě)的，在手機(jī)微信環(huán)境中運(yùn)行的應(yīng)用。

小程序的實(shí)現(xiàn)機(jī)制

小程序是基于微信提供的一套框架進(jìn)行開(kāi)發(fā)的。微信通過(guò)封裝微信客戶端提供的文件系統(tǒng)、網(wǎng)絡(luò)通信、任務(wù)管理、數(shù)據(jù)安全等基礎(chǔ)功能，對(duì)上層提供了一套完整的javaScript API，使得開(kāi)發(fā)者能夠非常方便的使用到微信客戶端提供的各種基礎(chǔ)功能，快速構(gòu)建一個(gè)小程序。框架設(shè)計(jì)如下：

框架提供了自己的視圖層描述語(yǔ)言 WXML 和 WXSS，以及基于 javaScript 的應(yīng)用邏輯層。視圖層與邏輯層之間通過(guò)單向數(shù)據(jù)綁定進(jìn)行數(shù)據(jù)傳輸，開(kāi)發(fā)者能更加聚焦于數(shù)據(jù)與邏輯上。

開(kāi)發(fā)者如何編寫(xiě)小程序

微信官方提供了一個(gè)IDE，編碼、調(diào)試、編譯、項(xiàng)目管理、提交等功能都涵蓋在其內(nèi)。

在IDE中新建項(xiàng)目后，會(huì)自動(dòng)初始化幾個(gè)簡(jiǎn)單的代碼文件。最關(guān)鍵也是必不可少的，是 app.js、app.json、app.wxss 這三個(gè)。其中，.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件。微信小程序會(huì)讀取這些文件，并生成小程序?qū)嵗?/p>

app.json 是對(duì)整個(gè)小程序的全局配置。我們可以在這個(gè)文件中配置小程序是由哪些頁(yè)面組成，配置小程序的窗口?背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題等。

app.wxss 可以看做全局的公共樣式表，凡是在這里寫(xiě)過(guò)的CSS樣式，在各自子頁(yè)面里面可以直接使用。寫(xiě)在其他.wxss文件里的樣式是不能跨page使用的，可以通過(guò)@import進(jìn)行樣式導(dǎo)入。

app.js是小程序的腳本代碼。我們可以在這個(gè)文件中監(jiān)聽(tīng)并處理小程序的生命周期函數(shù)、聲明全局變量。通過(guò)js的一個(gè)全局函數(shù)getApp()可以獲得當(dāng)前app實(shí)例對(duì)象。

小程序的每一個(gè)頁(yè)面是由同一路徑下4個(gè)同名但不同后綴的文件組成，如：HomePage.js、HomePage.wxml、HomePage.wxss、HomePage.json。.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁(yè)面結(jié)構(gòu)文件。

HomePage.js 是這個(gè)頁(yè)面的業(yè)務(wù)邏輯，當(dāng)你在空白js里面輸入page的時(shí)候會(huì)自動(dòng)出現(xiàn)代碼補(bǔ)全，幫你補(bǔ)全了一個(gè)page的所有生命周期，onLoad，onHide等。

HomePage.wxss 是這個(gè)頁(yè)面專(zhuān)屬的樣式，別的頁(yè)面不能使用，只在這個(gè)頁(yè)面才可以用，但是可以被import到app.wxss里面，實(shí)現(xiàn)全局通用。wxss的代碼提示非常完善。

HomePage.wxml 描述頁(yè)面的結(jié)構(gòu)，wxml語(yǔ)法雖然乍看與HTML類(lèi)似，但并不是HTML。我們必須用wx提供的wxml相關(guān)組件完全重寫(xiě)，條件渲染，循環(huán)渲染，數(shù)據(jù)綁定，都需要按照微信文檔制定規(guī)則編碼，并且提供了最簡(jiǎn)單的模板模塊功能，實(shí)現(xiàn)一定程度的復(fù)用。

HomePage.json 是頁(yè)面的配置文件： 頁(yè)面的配置文件是非必要的。當(dāng)有頁(yè)面的配置文件時(shí)，配置項(xiàng)在該頁(yè)面會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。如果沒(méi)有指定的頁(yè)面配置文件，則在該頁(yè)面直接使用 app.json 中的默認(rèn)配置。

通過(guò).js和.wxml實(shí)現(xiàn)MVC模型

微信小程序的調(diào)試模式，和Chrome的debug模式基本一模一樣，里面應(yīng)該是封裝一套WebKit，有人在反編譯出的源碼里發(fā)現(xiàn)Chrome Debug tool的js代碼。

小程序開(kāi)發(fā)完成之后，通過(guò)IDE可以將項(xiàng)目代碼文件上傳到微信開(kāi)發(fā)平臺(tái)，具有管理員權(quán)限的用戶登錄平臺(tái)后，可以提交給微信官方審核。

管理員將其他同事微信添加到體驗(yàn)組里后，可以在手機(jī)微信中體驗(yàn)小程序運(yùn)行效果。

主動(dòng)推送模板消息

數(shù)據(jù)統(tǒng)計(jì)

底層API與基礎(chǔ)組件庫(kù)

微信主要為開(kāi)發(fā)者提供了基于微信APP的底層API 和 一套基礎(chǔ)組件庫(kù)。

網(wǎng)絡(luò)：發(fā)起請(qǐng)求、文件上傳與下載、WebSocket

媒體：圖片、錄音、音頻播放控制、音樂(lè)播放控制、文本文件、視頻

數(shù)據(jù)：數(shù)據(jù)緩存同步、摘要、移除

位置：獲取、查看詳情

設(shè)備：網(wǎng)絡(luò)狀態(tài)、系統(tǒng)信息、重力感應(yīng)、羅盤(pán)、撥打電話

界面：交互反饋、設(shè)置導(dǎo)航條、導(dǎo)航、動(dòng)畫(huà)、繪圖

開(kāi)放接口：登錄、用戶信息、微信支付、模板消息

視圖容器：view、scroll-view、swiper

基礎(chǔ)內(nèi)容：icon、text、progress

表單組件：button、checkbox、form、input、label、picker、radio、slider、switch、textarea

操作反饋：action-sheet、modal、toast、loading

導(dǎo)航：navigator

媒體組件：audio、image、video

地圖：map

畫(huà)布：canvas

小程序

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。