【摘要】微信小程序

Render 發布于2019-08-20 11:40 / 2607人閱讀

摘要：月日凌晨，微信公眾平臺對個服務號發送了微信小程序的測試邀請。同時為了更適合開發微信小程序，我們對進行了擴充以及修改。組件文檔微信小程序官方文檔傳送門

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

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

開發工具下載

目錄結構

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

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

文件類型	作用	必填
js	頁面邏輯	yes
wxml	頁面結構	yes
wxss	頁面樣式	no
json	頁面配置	no

配置

使用app.json文件來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。

每一個小程序頁面也可以使用.json文件來對本頁面的窗口表現進行配置。頁面的配置比app.json全局配置簡單得多，只是設置 app.json 中的 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

邏輯層 1.注冊程序

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

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.注冊頁面

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

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.模塊化

可以將一些公共的代碼抽離成為一個多帶帶的 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語法（雙大括號）將變量包起來:

 {{ message }}

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

WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式。
WXSS 用來決定 WXML 的組件應該怎么顯示。
WXSS 具有 CSS 大部分特性。同時為了更適合開發微信小程序，我們對 CSS 進行了擴充以及修改。
與 CSS 相比我們擴展的特性有：

尺寸單位

樣式導入

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

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

GPU云服務器云服務器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80693.html

10分鐘上線 - 利用函數計算構建微信小程序的Server端

摘要：摘要阿里云函數計算是一個事件驅動的全托管計算服務。微信小程序是一種不需要下載安裝即可使用的應用，它可以在微信內被便捷地獲取和傳播。本文以開發一個類似語音口令紅包小程序為例，向您講解如何使用阿里云函數計算快速構建微信小程序的服務端。摘要：阿里云函數計算是一個事件驅動的全托管計算服務。通過函數計算，您無需管理服務器等基礎設施，只需編寫代碼并上傳。微信小程序是一種不需要下載安裝即可使用的...

geekzhou 2019-07-30 15:38 評論0 收藏0
10分鐘上線 - 利用函數計算構建微信小程序的Server端

摘要：摘要阿里云函數計算是一個事件驅動的全托管計算服務。微信小程序是一種不需要下載安裝即可使用的應用，它可以在微信內被便捷地獲取和傳播。本文以開發一個類似語音口令紅包小程序為例，向您講解如何使用阿里云函數計算快速構建微信小程序的服務端。摘要：阿里云函數計算是一個事件驅動的全托管計算服務。通過函數計算，您無需管理服務器等基礎設施，只需編寫代碼并上傳。微信小程序是一種不需要下載安裝即可使用的...

galois 2019-06-24 17:58 評論0 收藏0
微信小程序從入坑到放棄之坑八：textarea在蘋果手機中的大Bug

摘要：順便補充一句，微信官方提供的判斷依舊不全面，最新出來的蘋果手機還沒有完全支持相關的坑可以在官方社區的問答中找到。首次在這里寫點東西，還請各位大佬擔待點。摘要：昨天的placeholder-class只是希望各位看官注意，而今天的textarea就絕對是一個超級大坑！而且如果看官手中沒有蘋果手機測試的話，這個可就真的是個坑了！為啥？難道要等到用戶向你反饋你們產品有bug？？？.......

dantezhao 2019-08-26 13:24 評論0 收藏0
【微信小程序】采坑之scroll-view組件

摘要：使用中文類的組件時候也就是需要呈現中文的組件，不限于組件是會自動換行的，這時候需求在中強制不換行。在使用非中文組件時候就一切正常。至于為啥使用中文組件會有一部分留白，這個我不知道是個例還是，反正只需要用相對定位移一下就可以了。? 一、摘要　　今天在使用scroll-view組件的時候發現結果跟預想的不一樣。其實也不是第一次用了，同樣的寫法卻出現了意料之外的效果，所以認定是bug了。博主使用...

張憲坤 2019-04-23 13:23 評論0 收藏0
微信小程序國密算法實現庫sm-crypto

摘要：該算法不公開，調用該算法時，需要通過加密芯片的接口進行調用。為非對稱加密，基于。無線局域網標準的分組數據算法。對稱加密，密鑰長度和分組長度均為位。可以在微信小程序中實現國密算法。國密算法是國家密碼局制定標準的一系列算法，主要有SM1，SM2，SM3，SM4，密鑰長度和分組長度均為128位。其中： SM1 為對稱加密。其加密強度與AES相當。該算法不公開，調用該算法時，需要通過加密芯...

姘存按 2019-08-23 12:31 評論0 收藏0