微信小程序 學習筆記

一、pages

　　主要存放小程序的頁面文件，其中每一個文件夾爲一個頁面，每一個頁面包含四個文件，

　　（1）.wxml文件是界面文件；

　　（2）.js是事件交互文件，用於處理界面的點擊事件等功能；

　　（3）.wxss爲界面美化文件，讓界面顯示的更加美觀；

　　（4）.json爲配置文件，用於修改導航欄顯示樣式等

　　注意：

　　　　（1）小程序每一個頁面必須有.wxml和.js文件，其餘兩種類型的文件能夠不須要

　　　　（2）文件名稱必須與頁面的文件夾名稱相同，如index文件夾，文件只能是index.wxml、index.wxss、index.js和index.json.

二、utils

　　該文件件主要用於存放全局的一些.js文件，公共用到的一些事件處理代碼文件能夠放到該文件夾下，用於全局調用。

　　對於容許外部調用的方法，須要用module.exports聲明，才能在其餘js文件中使用

module.exports = {  
  util: util
}  


其餘文件引入：
var util = require('../../utils/util.js')  

三、app.js

　　app.js : 系統的方法處理文件，主要處理程序的聲明週期的一些方法；例如：程序剛開始運行時事件處理等

　　App()：函數用來註冊一個小程序，接受一個object參數，其指定小程序的生命週期函數等

　　

　　    前臺、後臺定義： 

　　　　　　當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信，小程序並無直接銷燬，而是進入了後臺；當再次進入微信或再次打開小程序，又會從後臺進入前臺。須要注意的是：只有當小程序進入後臺必定時間，或者系統資源佔用太高，纔會被真正的銷燬。

　　　onPageNotFound（基礎庫 1.9.90 開始支持，低版本需作兼容處理）

　　　getApp()： 

　　　　注意：

• App() 必須在 app.js 中註冊，且不能註冊多個。
• 不要在定義於 App() 內的函數中調用 getApp() ，使用 this 就能夠拿到 app 實例。
• 不要在 onLaunch 的時候調用 getCurrentPages()，此時 page 尚未生成。
• 經過 getApp() 獲取實例以後，不要私自調用生命週期函數。

四、app.json

　　app.json : 系統全局配置文件，設置導航頭的顏色，字體大小，下面有沒有tabbar等功能，具體頁面的配置在頁面的json文件中單獨修改；

　　

　　（1）pages:用於設置頁面的路徑，接受數組，每一項都是字符串，每一項是路徑加文件名，可是不須要寫文件後綴，由於框架會自動去尋找路徑

　　（2）window: 用於設置小程序的狀態欄、導航欄、標題、窗口背景色

　　　　navigationBarBackgroundColor（#000000）、navigationBarTextStyle(僅支持 black/white)、navigationBarTitleText(導航欄標題文字內容)、navigationStyle(導航欄樣式，僅支持 default/custom。custom 模式可自定義導航欄，只保留右上角膠囊狀的按鈕)、backgroundColor(串口的背景色)、backgroundTextStyle(下拉 loading 的樣式，僅支持 dark/light)、backgroundColorTop（#ffffff,頂部窗口的背景色，僅 iOS 支持）、backgroundColorBottom（#ffffff,底部窗口的背景色，僅 iOS 支持）、enablePullDownRefresh（false/true,是否開啓下拉刷新）、onReachBottomDistance（50，頁面上拉觸底事件觸發時距頁面底部距離，單位爲px）

　　　　注：navigationStyle 只在 app.json 中生效。

　　　　　　開啓 custom 後，低版本客戶端須要作好兼容。開發者工具基礎庫版本切到 1.7.0（不表明最低版本，只供調試用） 可方便切到舊視覺

　　（3）tabBar

　　　　  

　　　　

　　　　注意：　　　

　　　　　　<1> 當設置 position 爲 top 時，將不會顯示 icon

　　　　　　<2>tabBar 中的 list 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序。

　　　（4）networkTimeout:能夠設置各類網絡請求的超時時間。

　　　　　　

　　　　（5）debug

　　　　　　能夠在開發者工具中開啓 debug 模式，在開發者工具的控制檯面板，調試信息以 info 的形式給出，其信息有Page的註冊，頁面路由，數據更新，事件觸發\

　　　　（6）單獨頁面上的.json文件

　　　（6）golbalData：全局的數據　　　

五、app.wxss

　　app.wxss : 全局的界面美化代碼

六、邏輯層

　　小程序的邏輯層有javascript編寫，邏輯層將數據進行處理後發送給視圖層，同時接受視圖層的事件反饋

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

　　

　　（1）初始化數據： 

　　頁面上<view>{{text}}</view>

page({
   data: {
         text: 'my text'
    }
})        

　　（2）事件處理函數（bindtap）

　　<view bindtap="viewTap"> click me </view>

Page({
  viewTap: function() {
    console.log('view tap')
  }
})

　　（3）獲取當前頁面的路徑

　　　　Page.prototype.route

　　（4）將數據從邏輯層發送到視圖層（異步），同事改變對應的this.data的值

　　　　Page.prototype.setData()

　　　　　

注意：

1. 直接修改 this.data 而不調用 this.setData 是沒法改變頁面的狀態的，還會形成數據不一致。
2. 單次設置的數據不能超過1024kB，請儘可能避免一次設置過多的數據。
3. 請不要把 data 中任何一項的 value 設爲 undefined ，不然這一項將不被設置並可能遺留一些潛在問題。

　　（5）getCurrentPages()

 　　　　函數用於獲取當前頁面棧的實例，以數組形式按棧的順序給出，第一個元素爲首頁，最後一個元素爲當前頁面。

　　　　注意： 不要嘗試修改頁面棧，會致使路由以及頁面狀態錯誤

八、視圖層

　　（1）數據綁定：和vue同樣

　　（2）列表渲染： wx:for="{{array}}"

　　（3）條件渲染：

　　　　　　　　　wx:if="{{view == 'WEBVIEW'}}"  

　　　　　　　　　　wx:elif="{{view == 'APP'}}"

　　　　　　　　　　wx:else="{{view == 'MINA'}}"

　　（4）模板： 

　　　　

　　（5）事件：bindtap

九、WXS：小程序的一套腳本語言，結合WXML能夠構建出頁面的結構

<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

　　在微信開發者工具裏面，右鍵能夠直接建立 .wxs 文件，在其中直接編寫 WXS 腳本。　

在.wxs模塊中引用其餘 wxs 文件模塊，可使用 require 函數。

引用的時候，要注意以下幾點：

• 只能引用 .wxs 文件模塊，且必須使用相對路徑。
• wxs 模塊均爲單例，wxs 模塊在第一次被引用時，會自動初始化爲單例對象。多個頁面，多個地方，屢次引用，使用的都是同一個 wxs 模塊對象。
• 若是一個 wxs 模塊在定義以後，一直沒有被引用，則該模塊不會被解析與運行。

module 屬性值的命名必須符合下面兩個規則：

• 首字符必須是：字母（a-zA-Z），下劃線（_）
• 剩餘字符能夠是：字母（a-zA-Z），下劃線（_）， 數字（0-9）

　　src 屬性能夠用來引用其餘的 wxs 文件模塊。

 

十、WXSS：樣式

　　（1）尺寸單位： rpx,規定屏幕的寬爲750rpx

　　（2）內聯樣式：<view style="color:{{color}};" />

十一、自定義組件（要小程序基礎庫版本 1.6.3開始纔有，否則沒有效果）

　　自定義組件依舊有json wxml wxss js這4個文件組成，要自定義一個組件

　　（1）json文件聲明　　

{
  "component": true
}

　　（2）wxml中定義　

<!-- 這是自定義組件的內部WXML結構 -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>

　　（3）js文件　

Component({
  properties: {
    // 這裏定義了innerText屬性，屬性值能夠在組件使用時指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 這裏是一些組件內部數據
    someData: {}
  },
  methods: {
    // 這裏是一個自定義方法
    customMethod: function(){}
  }
})

　　（4）使用已註冊的自定義組件前，首先要在頁面的 json 文件中進行引用聲明。　

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

　　（5）頁面時使用　　　

<view>
  <!-- 如下是對一個自定義組件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>

　　（6）樣式　　

　　　　（1）注意：組件對應的wxss樣式，不能使用id選擇器、後代選擇器（.a .b{}）、子元素選擇器（.a > .b）、屬性選擇器

　　　　（2）外部樣式類（從小程序基礎庫版本 1.9.90 開始支持）