摘要:月日凌晨,微信公眾平臺(tái)對(duì)個(gè)服務(wù)號(hào)發(fā)送了微信小程序的測(cè)試邀請(qǐng)。同時(shí)為了更適合開發(fā)微信小程序,我們對(duì)進(jìn)行了擴(kuò)充以及修改。組件文檔微信小程序官方文檔傳送門
9月22日凌晨,微信公眾平臺(tái)對(duì)200個(gè)服務(wù)號(hào)發(fā)送了“微信小程序”的測(cè)試邀請(qǐng)。微信方面表示,“小程序”目前只是測(cè)試階段,未來此類“小程序”的主體比較廣泛,不管是個(gè)人、政府、企業(yè)、媒體,抑或是其他組織開發(fā)者,均可以申請(qǐng)注冊(cè)和使用“小程序”,“小程序”發(fā)布后,在業(yè)內(nèi)掀起了較大的反響。
下面是我初步探究所做的簡(jiǎn)單整理。
目錄結(jié)構(gòu)開發(fā)工具下載
我們?cè)谖⑿盘峁┑拈_發(fā)工具中新建一個(gè)項(xiàng)目,開發(fā)工具會(huì)給我們建立一個(gè)最基本的目錄結(jié)構(gòu)和示例Demo代碼,結(jié)構(gòu)如下:
結(jié)構(gòu)很簡(jiǎn)單,程序主體部分由app.js,app.json,app.wxss三個(gè)文件組成,而且必須放在項(xiàng)目的根目錄。
頁面由四個(gè)文件組成,分別是:
文件類型 | 作用 | 必填 |
---|---|---|
js | 頁面邏輯 | yes |
wxml | 頁面結(jié)構(gòu) | yes |
wxss | 頁面樣式 | no |
json | 頁面配置 | no |
使用app.json文件來對(duì)微信小程序進(jìn)行全局配置,決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。
每一個(gè)小程序頁面也可以使用.json文件來對(duì)本頁面的窗口表現(xiàn)進(jìn)行配置。 頁面的配置比app.json全局配置簡(jiǎn)單得多,只是設(shè)置 app.json 中的 window 配置項(xiàng)的內(nèi)容,頁面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。
邏輯層 1.注冊(cè)程序App() 函數(shù)用來注冊(cè)一個(gè)小程序。接受一個(gè) object 參數(shù),其指定小程序的生命周期函數(shù)等。
示例:
App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: function() { // Do something when hide. }, globalData: "I am global data" })2.注冊(cè)頁面
Page() 函數(shù)用來注冊(cè)一個(gè)頁面。接受一個(gè) object 參數(shù),其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
Page({ data: { text: "This is page data." }, onLoad: function(options) { // Do some initialize when page load. }, onReady: function() { // Do something when page ready. }, onShow: function() { // Do something when page show. }, onHide: function() { // Do something when page hide. }, onUnload: function() { // Do something when page close. }, onPullDownRefresh: function() { // Do something when pull down }, // Event handler. viewTap: function() { this.setData({ text: "Set some data for updating view." }) } });3.模塊化
可以將一些公共的代碼抽離成為一個(gè)多帶帶的 js 文件,作為一個(gè)模塊。模塊只有通過 module.exports 或者 exports 才能對(duì)外暴露接口。
需要注意的是:
exports 是 module.exports 的一個(gè)引用,因此在模塊里邊隨意更改 exports 的指向會(huì)造成未知的錯(cuò)誤。所以我們更推薦開發(fā)者采用 module.exports 來暴露模塊接口,除非你已經(jīng)清晰知道這兩者的關(guān)系。
小程序目前不支持直接引入 node_modules , 開發(fā)者需要使用到 node_modules 時(shí)候建議拷貝出相關(guān)的代碼到小程序的目錄中。
4.API小程序開發(fā)框架提供豐富的微信原生 API,可以方便的調(diào)起微信提供的能力,如獲取用戶信息,本地存儲(chǔ),支付功能等。
5.ES6 轉(zhuǎn) ES5微信小程序運(yùn)行在三端:iOS、Android 和用于調(diào)試的開發(fā)者工具
在 iOS 上,小程序的 javascript 代碼是運(yùn)行在 JavaScriptCore 中
在 Android 上,小程序的 javascript 代碼是運(yùn)行在 X5 內(nèi)核中
在 開發(fā)工具上, 小程序的 javascript 代碼是運(yùn)行在 nwjs(chrome) 中
雖然三個(gè)運(yùn)行環(huán)境在大部分情況下是相似的,但是還有一些細(xì)微的區(qū)別,為了幫助開發(fā)者解決這種區(qū)別帶來的困擾,開發(fā)工具會(huì)自動(dòng)幫助開發(fā)者將 ES6 的代碼轉(zhuǎn)為 ES5 的代碼。
對(duì)于使用其他構(gòu)建工具的開發(fā)者,可以在項(xiàng)目也開中關(guān)掉這個(gè)功能,使用自己的構(gòu)建和轉(zhuǎn)碼工具。
視圖層和我之前對(duì)微信小程序的直覺不同,微信小程序不支持也不兼容HTML,而是微信全新定義的規(guī)范,它的視圖文件的后綴名為.wxml,是基于xml進(jìn)行的擴(kuò)展,其樣式表文件也并非CSS,而是.wxss,兼容受限的部分CSS寫法。
視圖渲染時(shí),采用了類似單向數(shù)據(jù)綁定的方式進(jìn)行數(shù)據(jù)綁定,WXML 中的動(dòng)態(tài)數(shù)據(jù)均來自對(duì)應(yīng)Page的data。使用Mustache語法(雙大括號(hào))將變量包起來:
{{ message }}
框架可以讓數(shù)據(jù)與視圖非常簡(jiǎn)單地保持同步。當(dāng)做數(shù)據(jù)修改的時(shí)候,只需要在邏輯層修改數(shù)據(jù),視圖層就會(huì)做相應(yīng)的更新。
支持條件渲染、列表渲染、模板、事件
WXSS(WeiXin Style Sheets)是一套樣式語言,用于描述 WXML 的組件樣式。
WXSS 用來決定 WXML 的組件應(yīng)該怎么顯示。
WXSS 具有 CSS 大部分特性。 同時(shí)為了更適合開發(fā)微信小程序,我們對(duì) CSS 進(jìn)行了擴(kuò)充以及修改。
與 CSS 相比我們擴(kuò)展的特性有:
尺寸單位
樣式導(dǎo)入
框架為開發(fā)者提供了一系列基礎(chǔ)組件,開發(fā)者可以通過組合這些基礎(chǔ)組件進(jìn)行快速開發(fā)。組件文檔
微信小程序官方文檔傳送門
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/80693.html
摘要:摘要阿里云函數(shù)計(jì)算是一個(gè)事件驅(qū)動(dòng)的全托管計(jì)算服務(wù)。微信小程序是一種不需要下載安裝即可使用的應(yīng)用,它可以在微信內(nèi)被便捷地獲取和傳播。本文以開發(fā)一個(gè)類似語音口令紅包小程序?yàn)槔蚰v解如何使用阿里云函數(shù)計(jì)算快速構(gòu)建微信小程序的服務(wù)端。 摘要: 阿里云函數(shù)計(jì)算是一個(gè)事件驅(qū)動(dòng)的全托管計(jì)算服務(wù)。通過函數(shù)計(jì)算,您無需管理服務(wù)器等基礎(chǔ)設(shè)施,只需編寫代碼并上傳。微信小程序是一種不需要下載安裝即可使用的...
摘要:摘要阿里云函數(shù)計(jì)算是一個(gè)事件驅(qū)動(dòng)的全托管計(jì)算服務(wù)。微信小程序是一種不需要下載安裝即可使用的應(yīng)用,它可以在微信內(nèi)被便捷地獲取和傳播。本文以開發(fā)一個(gè)類似語音口令紅包小程序?yàn)槔?,向您講解如何使用阿里云函數(shù)計(jì)算快速構(gòu)建微信小程序的服務(wù)端。 摘要: 阿里云函數(shù)計(jì)算是一個(gè)事件驅(qū)動(dòng)的全托管計(jì)算服務(wù)。通過函數(shù)計(jì)算,您無需管理服務(wù)器等基礎(chǔ)設(shè)施,只需編寫代碼并上傳。微信小程序是一種不需要下載安裝即可使用的...
摘要:順便補(bǔ)充一句,微信官方提供的判斷依舊不全面,最新出來的蘋果手機(jī)還沒有完全支持相關(guān)的坑可以在官方社區(qū)的問答中找到。 首次在這里寫點(diǎn)東西,還請(qǐng)各位大佬擔(dān)待點(diǎn)。 摘要:昨天的placeholder-class只是希望各位看官注意,而今天的textarea就絕對(duì)是一個(gè)超級(jí)大坑!而且如果看官手中沒有蘋果手機(jī)測(cè)試的話,這個(gè)可就真的是個(gè)坑了!為啥?難道要等到用戶向你反饋你們產(chǎn)品有bug???.......
摘要:使用中文類的組件時(shí)候也就是需要呈現(xiàn)中文的組件,不限于組件是會(huì)自動(dòng)換行的,這時(shí)候需求在中強(qiáng)制不換行。在使用非中文組件時(shí)候就一切正常。至于為啥使用中文組件會(huì)有一部分留白,這個(gè)我不知道是個(gè)例還是,反正只需要用相對(duì)定位移一下就可以了。? 一、摘要 今天在使用scroll-view組件的時(shí)候發(fā)現(xiàn)結(jié)果跟預(yù)想的不一樣。其實(shí)也不是第一次用了,同樣的寫法卻出現(xiàn)了意料之外的效果,所以認(rèn)定是bug了。博主使用...
摘要:該算法不公開,調(diào)用該算法時(shí),需要通過加密芯片的接口進(jìn)行調(diào)用。為非對(duì)稱加密,基于。無線局域網(wǎng)標(biāo)準(zhǔn)的分組數(shù)據(jù)算法。對(duì)稱加密,密鑰長(zhǎng)度和分組長(zhǎng)度均為位??梢栽谖⑿判〕绦蛑袑?shí)現(xiàn)國密算法。 國密算法是國家密碼局制定標(biāo)準(zhǔn)的一系列算法,主要有SM1,SM2,SM3,SM4,密鑰長(zhǎng)度和分組長(zhǎng)度均為128位。其中: SM1 為對(duì)稱加密。其加密強(qiáng)度與AES相當(dāng)。該算法不公開,調(diào)用該算法時(shí),需要通過加密芯...
閱讀 1107·2021-11-23 09:51
閱讀 1074·2021-10-18 13:31
閱讀 2967·2021-09-22 16:06
閱讀 4256·2021-09-10 11:19
閱讀 2196·2019-08-29 17:04
閱讀 425·2019-08-29 10:55
閱讀 2472·2019-08-26 16:37
閱讀 3369·2019-08-26 13:29