3年前 (2016-11-06) 鐵匠  微信小程序
文章評分 0 次,平均分 0.0

微信小程序之初步探究

9月22日凌晨,微信公眾平臺對200個服務號發送了“微信小程序”的測試邀請。微信方面表示,“小程序”目前只是測試階段,未來此類“小程序”的主體比較廣泛,不管是個人、政府、企業、媒體,抑或是其他組織開發者,均可以申請注冊和使用“小程序”,“小程序”發布后,在業內掀起了較大的反響。

微信小程序之初步探究

9月22日凌晨,微信公眾平臺對200個服務號發送了“微信小程序”的測試邀請。微信方面表示,“小程序”目前只是測試階段,未來此類“小程序”的主體比較廣泛,不管是個人、政府、企業、媒體,抑或是其他組織開發者,均可以申請注冊和使用“小程序”,“小程序”發布后,在業內掀起了較大的反響。

下面是我初步探究所做的簡單整理。

開發工具下載

目錄結構

我們在微信提供的開發工具中新建一個項目,開發工具會給我們建立一個最基本的目錄結構和示例Demo代碼,結構如下:

微信小程序之初步探究

結構很簡單,程序主體部分由app.js,app.json,app.wxss三個文件組成,而且必須放在項目的根目錄。

頁面由四個文件組成,分別是:

微信小程序之初步探究

配置

  • 使用app.json文件來對微信小程序進行全局配置,決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。
  • 每一個小程序頁面也可以使用.json文件來對本頁面的窗口表現進行配置。 頁面的配置比app.json全局配置簡單得多,只是設置 app.json 中的 window 配置項的內容,頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

邏輯層

1.注冊程序

App() 函數用來注冊一個小程序。接受一個 object 參數,其指定小程序的生命周期函數等。

示例:

  1. App({
  2. ??onLaunch:?function()?{
  3. ????//?Do?something?initial?when?launch.
  4. ??},
  5. ??onShow:?function()?{
  6. ??????//?Do?something?when?show.
  7. ??},
  8. ??onHide:?function()?{
  9. ??????//?Do?something?when?hide.
  10. ??},
  11. ??globalData:?'I?am?global?data'
  12. })

2.注冊頁面

Page() 函數用來注冊一個頁面。接受一個 object 參數,其指定頁面的初始數據、生命周期函數、事件處理函數等。

  1. Page({
  2. ??data:?{
  3. ????text:?"This?is?page?data."
  4. ??},
  5. ??onLoad:?function(options)?{
  6. ????//?Do?some?initialize?when?page?load.
  7. ??},
  8. ??onReady:?function()?{
  9. ????//?Do?something?when?page?ready.
  10. ??},
  11. ??onShow:?function()?{
  12. ????//?Do?something?when?page?show.
  13. ??},
  14. ??onHide:?function()?{
  15. ????//?Do?something?when?page?hide.
  16. ??},
  17. ??onUnload:?function()?{
  18. ????//?Do?something?when?page?close.
  19. ??},
  20. ??onPullDownRefresh:?function()?{
  21. ????//?Do?something?when?pull?down
  22. ??},
  23. ??//?Event?handler.
  24. ??viewTap:?function()?{
  25. ????this.setData({
  26. ??????text:?'Set?some?data?for?updating?view.'
  27. ????})
  28. ??}
  29. });

3.模塊化

可以將一些公共的代碼抽離成為一個單獨的 js 文件,作為一個模塊。模塊只有通過 module.exports 或者 exports 才能對外暴露接口。需要注意的是:

  • exports 是 module.exports 的一個引用,因此在模塊里邊隨意更改 exports 的指向會造成未知的錯誤。所以我們更推薦開發者采用 module.exports 來暴露模塊接口,除非你已經清晰知道這兩者的關系。
  • 小程序目前不支持直接引入 node_modules , 開發者需要使用到 node_modules 時候建議拷貝出相關的代碼到小程序的目錄中。

4.API

小程序開發框架提供豐富的微信原生 API,可以方便的調起微信提供的能力,如獲取用戶信息,本地存儲,支付功能等。

5.ES6 轉 ES5

微信小程序運行在三端:iOS、Android 和用于調試的開發者工具

  • 在 iOS 上,小程序的 javascript 代碼是運行在 JavaScriptCore 中
  • 在 Android 上,小程序的 javascript 代碼是運行在 X5 內核中
  • 在 開發工具上, 小程序的 javascript 代碼是運行在 nwjs(chrome) 中

雖然三個運行環境在大部分情況下是相似的,但是還有一些細微的區別,為了幫助開發者解決這種區別帶來的困擾,開發工具會自動幫助開發者將 ES6 的代碼轉為 ES5 的代碼。

對于使用其他構建工具的開發者,可以在項目也開中關掉這個功能,使用自己的構建和轉碼工具。

視圖層

和我之前對微信小程序的直覺不同,微信小程序不支持也不兼容HTML,而是微信全新定義的規范,它的視圖文件的后綴名為.wxml,是基于xml進行的擴展,其樣式表文件也并非CSS,而是.wxss,兼容受限的部分CSS寫法。

視圖渲染時,采用了類似單向數據綁定的方式進行數據綁定,WXML 中的動態數據均來自對應Page的data。使用Mustache語法(雙大括號)將變量包起來:

  1. <view>?{{?message?}}?</view>

框架可以讓數據與視圖非常簡單地保持同步。當做數據修改的時候,只需要在邏輯層修改數據,視圖層就會做相應的更新。支持條件渲染、列表渲染、模板、事件

WXSS(WeiXin Style Sheets)是一套樣式語言,用于描述 WXML 的組件樣式。

WXSS 用來決定 WXML 的組件應該怎么顯示。

WXSS 具有 CSS 大部分特性。 同時為了更適合開發微信小程序,我們對 CSS 進行了擴充以及修改。

與 CSS 相比我們擴展的特性有:

  • 尺寸單位
  • 樣式導入

框架為開發者提供了一系列基礎組件,開發者可以通過組合這些基礎組件進行快速開發。組件文檔

微信小程序官方文檔傳送門

 

除特別注明外,本站所有文章均為鐵匠運維網原創,轉載請注明出處來自http://www.kzrhud.live/12966.html

關于

發表評論

暫無評論

切換注冊

登錄

忘記密碼 ?

您也可以使用第三方帳號快捷登錄

切換登錄

注冊

掃一掃二維碼分享
青海11选5开奖结果走势图