1. 程式人生 > >小程式學習筆記(一)

小程式學習筆記(一)

關於小程式的認知,

  小程式作為微信為載體的負載應用,擁有廣大的潛在流量群,在現在app氾濫與手機記憶體嚴重被閒置app佔用的浪潮中,輕量化的整合應用成為主流,而小程式集合了廣流量平臺、輕應用以及web App的優勢於一身,必將擁有廣闊的前景,所以對於我們這些猿猿來說,學習小程式能讓我們在行業中擁有更強的競爭力。

學習之前先附上小程式的官方文件,一些基本的註冊流程及配置都在官方文件有詳細說明,在此不做過多介紹!

淺談小程式核心思想

① 小程式定義了自己的標籤語言WXML,類似html的標記語言,標籤是小程式的核心,我們通過標籤將page物件中的data資料渲染到頁面,但我們無法用js操作標籤中的資料。

② 小程式定義了自己的樣式語言WXSS,類似於css,less等檔案。

③ 每個頁面有一個json配置檔案,通過配置此檔案我們可以設定當前page的頂部bar的文字、樣式以及按鈕(如返回按鈕)

④通過編寫頁面的js檔案來處理使用者的操作,整個檔案。

⑤對於小程式的單個頁面,一般由以上四個同名的檔案組成,我們將頁面的四個同名檔案放在同一資料夾中作為一個頁面模組,再在app.js主檔案中的pages陣列中配置頁面路由(即加入對應頁面的路徑,注:檔案不需要加檔案字尾,因為我們的四個檔案是同名檔案),這樣在編譯的時候四個同名檔案會被後臺解析模組關聯起來共同組成我們的小程式頁面而不需要對它們的依賴關係進行引入。

 

學習過vue的同學應該對資料的雙向繫結比較熟悉,而小程式每個page的data中的資料也有此特性,利用這一大特性,我們就可以解決js不能操作dom的問題。對於小程式的dom操作我們會結合官方API和資料雙向繫結的特性,通過資料來驅動dom的操作。

 我們通過一個簡單的例子來探討下:

Page({
  data: {
    show:true
  },
  toggle:function(event){
  this.show = !this.show;
 } })
<view wx:if="{{show}}">內容</view>
<view bindtap="toggle">切換按鈕</view>

我們通過對布林資料show的轉換來實現內容區域的顯示與隱藏,從而實現了資料對於dom的驅動而擺脫了我們無法直接操控dom的困境。