微信小程序筆記

部份內容來自微信小程序官方文檔，主要是對微信小程序一個系統的認識和總結

 

 

1、指南

2） 介紹小程序代碼構成 app.json 、 app.js 和 app.wxss ， 2-1) 介紹小程序頁面構成 page.js 、 page.wxml 、 page.json 、 page.wxss 、page.wxs，3） 爲 project.config.json 項目配置信息，4） 爲 sitemap.json 小程序索引配置

1）.小程序與普通網頁開發的區別

​小程序的主要開發語言是 JavaScript。

網頁開發渲染線程和腳本線程是互斥的，長時間的腳本運行可能會致使頁面失去響應，而在小程序中，兩者是分開的，分別運行在不一樣的線程中。

網頁開發者可使用到各類瀏覽器暴露出來的 DOM API，進行 DOM 選中和操做。而如上文所述，小程序的邏輯層和渲染層是分開的，邏輯層運行在 JSCore 中，並無一個完整瀏覽器對象，於是缺乏相關的DOM API和BOM API。這一區別致使了前端開發很是熟悉的一些庫，例如 jQuery、 Zepto 等，在小程序中是沒法運行的。同時 JSCore 的環境同 NodeJS 環境也是不盡相同，因此一些 NPM 的包在小程序中也是沒法運行的。

​網頁開發者須要面對的環境是各式各樣的瀏覽器，PC 端須要面對 IE、Chrome、QQ瀏覽器等，在移動端須要面對Safari、Chrome以及 iOS、Android 系統中的各式 WebView 。而小程序開發過程當中須要面對的是兩大操做系統 iOS 和 Android 的微信客戶端，以及用於輔助開發的小程序開發者工具，小程序中三大運行環境也是有所區別的

運行環境	邏輯層	渲染層
iOS	JavaScriptCore	WKWebView
安卓	V8	chromium定製內核
小程序開發者工具	NWJS	Chrome WebView

 

2）.小程序代碼構成

小程序包含一個描述總體程序的app和多個描述各自頁面的page。

一個小程序主體部分由三個文件組成，必須放在項目的根目錄，以下：

文件	必需	做用
app.js	是	小程序邏輯
app.json	是	小程序公共配置
app.wxss	否	小程序公共樣式表（注1）

　　注1：

　　　　做用於全局的樣式表，同CSS用法同樣，若在任意Page頁寫了同名Class則覆蓋此處的樣式。

　　　　行內樣式 > Page.css > app.css

 

 

 

　　小程序全局配置 app.json

　　app.json是當前小程序的全局配置，包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等

// 小程序配置app.json
// JSON 配置

// JSON 是一種數據格式，並非編程語言，在小程序中，JSON扮演的靜態配置的角色
/*
JSON 語法

注意事項：

JSON文件都是被包裹在一個大括號中 {}，經過key-value的方式來表達數據。JSON的Key必須包裹在一個雙引號中，在實踐中，編寫 JSON 的時候，忘了給 Key 值加雙引號或者是把雙引號寫成單引號是常見錯誤。

JSON的值只能是如下幾種數據格式，其餘任何格式都會觸發報錯，例如 JavaScript 中的 undefined。

數字，包含浮點數和整數
字符串，須要包裹在雙引號中
Bool值，true 或者 false
數組，須要包裹在方括號中 []
對象，須要包裹在大括號中 {}
Null
還須要注意的是 JSON 文件中沒法使用註釋，試圖添加註釋將會引起報錯。
*/

{
  //pages用於指定小程序由哪些頁面組成，每一項都對應一個頁面路徑（文件名） 信息。文件名不須要寫文件後綴，框架會自動去尋找對於位置的 .json, .js, .wxml, .wxss 四個文件進行處理。數組的第一項表明小程序的初始頁面（首頁）。小程序中新增/減小頁面，都須要對 pages 數組進行修改。
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],



  //window對象。設置小程序全局的狀態欄、導航條、標題、窗口背景色。
  "window": {
    //導航欄背景顏色,十六進制顏色
    "navigationBarBackgroundColor": "#ffffff",
    //導航欄標題顏色    僅包含black （黑色）/ white（白色）
    "navigationBarTextStyle": "black",
    //導航欄標題文字內容
    "navigationBarTitleText": "聽風吟",
    //導航欄樣式    僅包含default（默認）/custom（清空以前的全部樣式設置）
    "navigationStyle": "default",
    //窗口的背景色    （未發現明顯改變）
    "backgroundColor": "#eeeeee",
    //下拉 loading 的樣式    僅支持 dark（刷新時改成三個 ·） / light(無特殊屬性)需開啓enablePullDownRefresh下拉刷新
    "backgroundTextStyle": "light",
    //開啓/關閉全局下拉刷新   僅true/false
    "enablePullDownRefresh": true,
    //頁面上拉觸底事件觸發時距頁面底部距離，單位爲 px。
    "onReachBottomDistance": 30,

    // 響應顯示區域變化
    //屏幕旋轉設置，支持 auto (自動)/ portrait(豎屏) / landscape (2.5.0支持固定橫屏顯示)
    "pageOrientation": "portrait",
    // iPad 上啓用屏幕旋轉支持
    "resizable": true
  },



  //tabBar若是小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄能夠切換頁面），能夠經過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面(指定頁面欄目最少2個最多5個並配置樣式)
  "tabBar": {
    //tab 上的文字默認顏色，僅支持十六進制顏色
    "color": "#ffffff",
    //tab 上的文字選中時的顏色，僅支持十六進制顏色
    "selectedColor": "#00ffff",
    //tab 的背景色，僅支持十六進制顏色
    "backgroundColor": "#000000",
    //tabbar 上邊框的顏色， 僅支持 black / white
    "borderStyle": "black",
    //tab的列表項接受一個數組，配置最少 2 個、最多 5 個 tab
    "list": [
      {
        //頁面路徑，必須在 pages 中先定義
        "pagePath": "pages/index/index",
        //tab 上按鈕文字
        "text": "首頁",
        //圖片路徑，icon 大小限制爲 40kb，建議尺寸爲 81px * 81px，不支持網絡圖片。當 position 爲 top 時，不顯示 icon。
        "iconPath": "../images/xxx.ico",
        //選中時的圖片路徑,限制同上
        "selectedIconPath": "../images/xxx2.ico"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日誌",
        "iconPath": "../images/xxx.ico",
        "selectedIconPath": "../images/xxx2.ico"
      }
    ],
    // tabBar 的位置，僅支持 bottom / top
    "position":"bottom",
    //自定義 tabBar 用自定義組件的方式編寫便可，該自定義組件徹底接管 tabBar 的渲染。另外，自定義組件新增 getTabBar 接口，可獲取當前頁面下的自定義 tabBar 組件實例
    //添加自定義目錄custom-tab-bar
    "custom":true
  },



  //networkTimeout各種網絡請求的超時時間，單位均爲毫秒。
  //默認均爲60s
  "networkTimeout": {
    //wx.request 的超時時間，單位：毫秒。
    "request": 10000,
    //wx.downloadFile 的超時時間，單位：毫秒。
    "downloadFile": 10000,
    //wx.connectSocket 的超時時間，單位：毫秒。
    "connectSocket": 10000,
    //wx.uploadFile  的超時時間，單位：毫秒。
    "uploadFile": 10000
  },



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



  //要在插件中調用插件功能頁，須要先激活插件全部者小程序的功能頁
  "functionalPages": {
    "independent": true
  },



  //subpackages申明項目分包結構
  /**某些狀況下，開發者須要將小程序劃分紅不一樣的子包，在構建時打包成不一樣的分包，用戶在使用時按需進行加載。

在構建小程序分包項目時，構建會輸出一個或多個分包。每一個使用分包小程序一定含有一個主包。所謂的主包，即放置默認啓動頁面/TabBar 頁面，以及一些全部分包都需用到公共資源/JS 腳本；而分包則是根據開發者的配置進行劃分。

在小程序啓動時，默認會下載主包並啓動主包內頁面，當用戶進入分包內某個頁面時，客戶端會把對應分包下載下來，下載完成後再進行展現。

目前小程序分包大小有如下限制：

整個小程序全部分包大小不超過 8M
單個分包/主包大小不能超過 2M
對小程序進行分包，能夠優化小程序首次啓動的下載時間，以及在多團隊共同開發時能夠更好的解耦協做。*/
/**
打包原則
聲明 subpackages 後，將按 subpackages 配置路徑進行打包，subpackages 配置路徑外的目錄將被打包到 app（主包） 中
app（主包）也能夠有本身的 pages（即最外層的 pages 字段）
subpackage 的根目錄不能是另一個 subpackage 內的子目錄
tabBar 頁面必須在 app（主包）內
*/
/*
引用原則

packageA 沒法 require packageB JS 文件，但能夠 require app、本身 package 內的 JS 文件
packageA 沒法 import packageB 的 template，但能夠 require app、本身 package 內的 template
packageA 沒法使用 packageB 的資源，但可使用 app、本身 package 內的資源*/
/*
低版本兼容

由微信後臺編譯來處理舊版本客戶端的兼容，後臺會編譯兩份代碼包，一份是分包後代碼，另一份是整包的兼容代碼。 新客戶端用分包，老客戶端仍是用的整包，完整包會把各個 subpackage 裏面的路徑放到 pages 中。
*/
"subpackages": [
  {
    //分包跟目錄
    "root": "packageA",
    //分包別名，分包預加載時可用
    "name": "pack1",
    //分包頁面路徑，相對於分包跟目錄，使用同pages同樣
    "pages": [
      "pages/test/test"
    ],
    //是否爲獨立分包
    /*
    獨立分包

微信客戶端 6.7.2，基礎庫 2.3.0 及以上版本開始支持。開發者工具請使用 1.02.1808300 及以上版本，可點此下載。

獨立分包是小程序中一種特殊類型的分包，能夠獨立於主包和其餘分包運行。從獨立分包中頁面進入小程序時，不須要下載主包。當用戶進入普通分包或主包內頁面時，主包纔會被下載。

開發者能夠按需將某些具備必定功能獨立性的頁面配置到獨立分包中。當小程序從普通的分包頁面啓動時，須要首先下載主包；而獨立分包不依賴主包便可運行，能夠很大程度上提高分包頁面的啓動速度。

一個小程序中能夠有多個獨立分包
    */
    /*
    限制

獨立分包屬於分包的一種。普通分包的全部限制都對獨立分包有效。獨立分包中插件、自定義組件的處理方式同普通分包。

此外，使用獨立分包時要注意：

一、獨立分包中不能依賴主包和其餘分包中的內容，包括js文件、template、wxss、自定義組件、插件等。主包中的app.wxss對獨立分包無效，應避免在獨立分包頁面中使用 app.wxss 中的樣式；
二、App 只能在主包內定義，獨立分包中不能定義 App，會形成沒法預期的行爲；
三、獨立分包中暫時不支持使用插件
*/
/*
關於 getApp()

與普通分包不一樣，獨立分包運行時，App 並不必定被註冊，所以 getApp() 也不必定能夠得到 App 對象：

當用戶從獨立分包頁面啓動小程序時，主包不存在，App也不存在，此時調用 getApp() 獲取到的是 undefined。 當用戶進入普通分包或主包內頁面時，主包纔會被下載，App 纔會被註冊。
當用戶是從普通分包或主包內頁面跳轉到獨立分包頁面時，主包已經存在，此時調用 getApp() 能夠獲取到真正的 App。
因爲這一限制，開發者沒法經過 App 對象實現獨立分包和小程序其餘部分的全局變量共享。

爲了在獨立分包中知足這一需求，基礎庫 2.2.4 版本開始 getApp支持 [allowDefault
]參數，在 App 未定義時返回一個默認實現。當主包加載，App 被註冊時，默認實現中定義的屬性會被覆蓋合併到真正的 App 中
定義方法：
const app = getApp({allowDefault: true})
*/
/*
關於 App 生命週期

當從獨立分包啓動小程序時，主包中 App 的 onLaunch 和首次 onShow 會在從獨立分包頁面首次進入主包或其餘普通分包頁面時調用。

因爲獨立分包中沒法定義 App，小程序生命週期的監聽可使用 wx.onAppShow，wx.onAppHide 完成。App 上的其餘事件可使用 wx.onError，wx.onPageNotFound 監聽
*/
    "independent":false
  },
  {
    "root": "packageB",
    "name": "pack2",
    "pages": [
      "pages/demo/demo"
    ],
    "independent": false
  }
],

//preloadRule分包預下載
/*
進入小程序某個頁面時，由框架自動預下載可能須要的分包，提高進入後續分包頁面時的啓動速度。對於獨立分包，也能夠預下載主包

預下載分包行爲在進入某個頁面時觸發，經過在 app.json 增長 preloadRule 配置來控制。
*/
"preloadRule": {
  //頁面路徑
  "pages/index/index": {
    //預下載配置
    //在指定網絡下預下載，可選值爲：all: 不限網絡 wifi: 僅wifi下預下載
    "network": "all",
    //進入頁面後預下載分包的 root 或 name。__APP__ 表示主包
    "packages": [
      "packageA"
    ]
  },
  "pages/logs/logs": {
    "network": "wifi",
    "packages": [
     "__APP__",
     "packageA",
     "packageB"
    ]
  }
},
//多線程workers
/*
一些異步處理的任務，能夠放置於 Worker 中運行，待運行結束後，再把結果返回到小程序主線程。Worker 運行於一個單獨的全局上下文與線程中，不能直接調用主線程的方法。

Worker 與主線程之間的數據傳輸，雙方使用 Worker.postMessage() 來發送數據，Worker.onMessage() 來接收數據，傳輸的數據並非直接共享，而是被複制的
*/
"workers": "workers",
/*在app.js中建立worker實例，只能建立一個
Worker wx.createWorker(string scriptPath)

監聽主線程/Worker 線程向當前線程發送的消息的事件
worker.onMessage(function (res) {console.log(res)})

向主線程/Worker 線程發送的消息
worker.postMessage({msg: 'hello worker'})   須要發送的消息，必須是一個可序列化的 JavaScript key-value 形式的對象（JSON格式）

Worker.terminate()
結束當前 Worker 線程。僅限在主線程 worker 對象上調用
*/



//requiredBackgroundModes申明須要後臺運行的能力，類型爲數組。目前支持如下項目：audio: 後臺音樂播放  location: 後臺定位
//在此處申明瞭後臺運行的接口，開發版和體驗版上能夠直接生效，正式版還需經過審覈。
"requiredBackgroundModes": [
  "audio",
  "location"
],


// 使用插件
/*
 plugins 定義段中能夠包含多個插件聲明，每一個插件聲明以一個使用者自定義的插件引用名做爲標識，並指明插件的 appid 和須要使用的版本號。其中，引用名（如上例中的 myPlugin）由使用者自定義，無需和插件開發者保持一致或與開發者協調。在後續的插件使用中，該引用名將被用於表示該插件
*/
"plugins": {
  "myPlugin": {
    "version": "1.0.0",
    "provider": "wxidxxxxxxxxxxxxxxxx"
  }
},


// 當小程序須要使用 wx.navigateToMiniProgram 接口跳轉到其餘小程序時，須要先在配置文件中聲明須要跳轉的小程序 appId 列表，最多容許填寫 10 個。
"navigateToMiniProgramAppIdList":[
"wxcbe110fu2xaxedfu",
"wxfb1ff0f3u0abe913",
"wxc1b5d81exdad1efe",
"wxu8caa30cd32c1fb9",
"wx52axxb89fx3xe23c"
],



// usingComponents
// 在此處聲明的自定義組件視爲全局自定義組件，在小程序內的頁面或自定義組件中能夠直接使用而無需再聲明


// 受權permission
// 部分接口須要通過用戶受權贊成才能調用。咱們把這些接口按使用範圍分紅多個 scope ，用戶選擇對 scope 來進行受權，當受權給一個 scope 以後，其對應的全部接口均可以直接使用。
// 獲取用戶受權設置
// wx.getSetting
// 打開設置界面
// wx.openSetting
// 提早發起受權請求
// wx.authorize 
/*
scope 列表
scope.userInfo                  wx.getUserInfo                                              用戶信息
scope.userLocation              wx.getLocation, wx.chooseLocation                            地理位置
scope.userLocationBackground    wx.userLocationBackground                                    後臺定位
scope.address                    wx.chooseAddress                                            通信地址
scope.invoiceTitle              wx.chooseInvoiceTitle                                        發票擡頭
scope.invoice                    wx.chooseInvoice                                            獲取發票
scope.werun                      wx.getWeRunData                                              微信運動步數
scope.record                    wx.startRecord                                              錄音功能
scope.writePhotosAlbum          wx.saveImageToPhotosAlbum, wx.saveVideoToPhotosAlbum        保存到相冊
scope.camera                    camera                                                    組件    攝像頭

*/
"permission": {
  "scope.userLocation": {
    "desc": "你的位置信息將用於小程序位置接口的效果展現" // 高速公路行駛持續後臺定位
  }
},

// 配置微信小程序內索引
/*
 sitemap.json 用於配置小程序及其頁面是否容許被微信索引，文件內容爲一個 JSON 對象，若是沒有 sitemap.json ，則默認爲全部頁面都容許被索引；
*/
"sitemapLocation": "sitemap.json",

// 微信客戶端 7.0 開始，UI 界面進行了大改版。小程序也進行了基礎組件的樣式升級。app.json 中配置 "style": "v2"可代表啓用新版的組件樣式。本次改動涉及的組件有 button icon radio checkbox switch slider。
"style": "v2"

}

 　　

　　　　小程序app.js

　　　　每一個小程序都須要在app.js中調用 App方法註冊小程序示例，綁定生命週期回調函數、錯誤監聽和頁面不存在監聽函數等

//註冊小程序app.js

/**
 * 
 * App() 必須在 app.js 中調用,必須調用且只能調用一次
 * 
 * 整個小程序只有一個 App 實例，是所有頁面共享的。開發者能夠經過 getApp 方法獲取到全局惟一的 App 示例，獲取App上的數據或調用開發者註冊在 App 上的函數。
 */
App({
  // 生命週期回調——監聽小程序初始化。
  /**
   * 小程序初始化完成時觸發，全局只觸發一次。回調參數也可使用 wx.getLaunchOptionsSync 獲取
   * 返回參數
   * Object
屬性                         類型               說明
path                        string            啓動小程序的路徑
scene                        number            啓動小程序的場景值（具體場景值參考：場景值列表）
query                        Object            啓動小程序的 query 參數
shareTicket                  string            shareTicket，獲取轉發信息（詳見：注1）
referrerInfo                Object            來源信息。從另外一個小程序、公衆號或 App 進入小程序時返回。不然返回 {}。(詳見：注2)
   */
  /**
   * 注1
   * 獲取更多轉發信息
   * 一般開發者但願轉發出去的小程序被二次打開的時候可以獲取到一些信息，例如羣的標識。如今經過調用 wx.showShareMenu 而且設置 withShareTicket 爲 true ，當用戶將小程序轉發到任一羣聊以後，此轉發卡片在羣聊中被其餘用戶打開時，能夠在 App.onLaunch 或 App.onShow 獲取到一個 shareTicket。經過調用 wx.getShareInfo 接口傳入此 shareTicket 能夠獲取到轉發信息
   * 
   * 說人話系列：
   * 便可以經過設置轉發withShareTicket爲true在另外一個頁面中經過shareTicket獲取wx.getShareInfo 接口回調以取得更多轉發信息
   * 如：A用戶在將Test小程序轉發至C微信羣，此時B用戶經過點擊C微信羣中的小程序卡片進入小程序，此時開發者可經過App.onLaunch或wx.getLaunchOptionsSync獲取shareTicket，
   * 而後將shareTicket傳入wx.getShareInfo獲取回調，回調中的敏感數據爲加密的需後臺校驗解密開放數據（解密詳見：服務端獲取開放數據）
   */
  /**
   * 注2
   * referrerInfo 結構
屬性            類型         說明
appId          string      來源小程序、公衆號或 App 的 appId
extraData      Object      來源小程序傳過來的數據，scene=1037或1038時支持

注意：
部分版本在無referrerInfo的時候會返回 undefined，建議使用 options.referrerInfo && options.referrerInfo.appId 進行判斷
   */
  onLaunch: function(options) {
    //小程序初始化完後，打印回調參數，同wx.getLaunchOptionsSync函數同樣
    console.log(options)

    // 展現本地存儲能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登陸
    wx.login({
      success: res => {
        // 發送 res.code 到後臺換取 openId, sessionKey, unionId
      }
    })
    // 獲取用戶信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已經受權，能夠直接調用 getUserInfo 獲取頭像暱稱，不會彈框
          wx.getUserInfo({
            success: res => {
              // 能夠將 res 發送給後臺解碼出 unionId
              this.globalData.userInfo = res.userInfo

              // 因爲 getUserInfo 是網絡請求，可能會在 Page.onLoad 以後才返回
              // 因此此處加入 callback 以防止這種狀況
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })

  },
  // 生命週期回調——監聽小程序啓動或切前臺。
  /**
   * 小程序啓動，或從後臺進入前臺顯示時觸發。也可使用 wx.onAppShow 綁定監聽
   * 回調參數同onLaunch或wx.getLaunchOptionsSync同樣，區別在於 onLaunch 全局只生效一次，而onShow每次進入小程序前臺或啓動都會觸發
   */
  onShow: function(options) {
    console.log("Look Me")
  },

  // 生命週期回調——監聽小程序切後臺
  /**
   * 小程序從前臺進入後臺時觸發。也可使用 wx.onAppHide 綁定監聽
   */
  onHide: function() {
    console.log("awsl")
  },

  // 錯誤監聽函數。
  /**
   * 小程序發生腳本錯誤或 API 調用報錯時觸發。也可使用 wx.onError 綁定監聽
   */
  onError(msg) {
    console.log(msg)
  },
  // 頁面不存在監聽函數
  /**
   * 小程序要打開的頁面不存在時觸發。也可使用 wx.onPageNotFound 綁定監聽
   * 返回參數
   * 
屬性              類型            說明
path            string          不存在頁面的路徑
query            Object          打開不存在頁面的 query 參數
isEntryPage      boolean          是否本次啓動的首個頁面（例如從分享等入口進來，首個頁面是開發者配置的分享頁面）
注意：
開發者能夠在回調中進行頁面重定向，但必須在回調中同步處理，異步處理（例如 setTimeout 異步執行）無效。
若開發者沒有調用 wx.onPageNotFound 綁定監聽，也沒有聲明 App.onPageNotFound，當跳轉頁面不存在時，將推入微信客戶端原生的頁面不存在提示頁面。
若是回調中又重定向到另外一個不存在的頁面，將推入微信客戶端原生的頁面不存在提示頁面，而且再也不第二次回調

（一般能夠在此處配置本身的不存在頁面）
   */
  onPageNotFound(res) {
    wx.redirectTo({
      url: 'pages/...'
    }) // 若是是 tabbar 頁面，請使用 wx.switchTab
  },


  // 其餘    類型：any  非必填     能夠添加任意的函數或數據變量到 Object 參數中，用 this（即app實例） 能夠訪問
  /**
   * 可添加全局函數，獲取app應用實例後便可使用
   * 
   * 以下：
   * const app = getApp()；
   * 
   * app.test(23333)
   * 
   * 控制檯將打印"23333"
   */
  test: function(e) {
    console.log(e)
  },
  //全局變量，全局可用，通常用於保存用戶信息
  globalData: {
    userInfo: null
  }


})

　　

　　小程序全局樣式app.wxss

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

/* app.wxss */

/* 
WXSS 用來決定 WXML 的組件應該怎麼顯示。WXSS 具備 CSS 大部分特性。同時爲了更適合開發微信小程序，WXSS 對 CSS 進行了擴充以及修改。

與 CSS 相比，WXSS 擴展的特性有：

尺寸單位
樣式導入

尺寸單位
rpx（responsive pixel）: 能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

設備               rpx換算px (屏幕寬度/750)            px換算rpx (750/屏幕寬度)
iPhone5            1rpx = 0.42px                       1px = 2.34rpx
iPhone6            1rpx = 0.5px                       1px = 2rpx
iPhone6 Plus      1rpx = 0.552px                     1px = 1.81rpx

樣式導入
使用@import語句能夠導入外聯樣式表，@import後跟須要導入的外聯樣式表的相對路徑，用;表示語句結束。
 */
/* 建議： 開發微信小程序時設計師能夠用 iPhone6 做爲視覺稿的標準。 */

/* 
內聯樣式
框架組件上支持使用 style、class 屬性來控制組件的樣式。

style：靜態的樣式統一寫到 class 中。style 接收動態的樣式，在運行時會進行解析，請儘可能避免將靜態的樣式寫進 style 中，以避免影響渲染速度。
<view style="color:{{color}};" />
class：用於指定樣式規則，其屬性值是樣式規則中類選擇器名(樣式類名)的集合，樣式類名不須要帶上.，樣式類名之間用空格分隔。
<view class="normal_view" />
 */

/* 
選擇器
目前支持的選擇器有：

選擇器                樣例                        樣例描述
.class               .intro                       選擇全部擁有 class="intro" 的組件
#id                   #firstname                   選擇擁有 id="firstname" 的組件
element               view                         選擇全部 view 組件
element, element     view, checkbox               選擇全部文檔的 view 組件和全部的 checkbox 組件
::after               view::after                 在 view 組件後邊插入內容
::before             view::before                 在 view 組件前邊插入內容
 */

/* 
全局樣式與局部樣式
定義在 app.wxss 中的樣式爲全局樣式，做用於每個頁面。在 page 的 wxss 文件中定義的樣式爲局部樣式，只做用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器。
 */
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

 

 

 

 

2-1）.小程序頁面構成

文件類型	必需	做用
js	是	頁面邏輯
wxml	是	頁面結構
json	否	頁面配置
wxss	否	頁面樣式表

　　Page.wxml

　　WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎組件、事件系統，能夠構建出頁面的結構

<!--index.wxml-->
<view class='page'>
  <view class="container">
    <view class="userinfo">
      <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像暱稱 </button>
      <block wx:else>
        <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </block>
    </view>
    <view class="usermotto">
      <text class="user-motto">{{motto}}</text>
    </view>
  </view>
</view>
<!-- WXML -->
<!-- WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎組件、事件系統，能夠構建出頁面的結構。 -->
<!-- 僅介紹基礎語法及事件系統，WXML基礎組件及JS API使用 將由另外的篇幅來寫，內容太多._ ._ ._ ._ ._ ._-->
<!-- 如下將查看數據綁定、列表渲染、條件渲染、模板、引用等頁面能力 
     全部功能測試數據可直接複製至js中使用，對應組件複製到wxml中，終值爲最終顯示的值（或最終運行的結果）
-->

<!-- 數據綁定 -->
<!-- WXML 中的動態數據均來自對應 Page 的 data -->
<!-- 
簡單綁定
數據綁定使用 Mustache 語法（雙大括號）將變量包起來，能夠做用於：
測試數據：
Page({
  data: {
    message: 'Hello WeChat!',
    id: 0,
    condition: true,
    flag: false,
    a:1,
    b:2,
    c:3,
    length:7,
    name:"World",
    object: {
      key: 'Hello '
    },
    array: ['MINA'],
    zero: 0,
    testa: 1,
    testb: 2,
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    },
    foo: 'my-foo',
    bar: 'my-bar',
    obj3: {
      a: 1,
      b: 2
    },
    obj4: {
      b: 3,
      c: 4
    },
    o: 5
    }
  })
可將內容複製到index.js的data中如下內容複製到wxml中便可查看效果
注：template組件因未存在相應模板將不會顯示，自行調整代碼以展現效果（添加對應模板文件，在模板文件中渲染數據便可）


-內容
  <view> {{ message }} </view>
  -終值：Hello WeChat!

-組件屬性
  <view id="item-{{id}}"> </view>
  -終值：<view id="item-0"> </view>

-控制屬性
  <view wx:if="{{condition}}">此組件將會顯示</view>
  -終值：此組件將會顯示

-關鍵字
  <checkbox checked="{{false}}"> </checkbox>
  //true：boolean 類型的 true，表明真值。
  //false： boolean 類型的 false，表明假值。
  //特別注意：不要直接寫 checked="false"，其計算結果是一個字符串，轉成 boolean 類型後表明真值
  -終值：組件未選中
  

-運算（支持簡單運算）
  -三元運算
  <view hidden="{{flag ? true : false}}"> Hidden </view>
  -終值：Hidden（組件顯示）

  -算數運算
  <view> {{a + b}} + {{c}} + d </view>
  -終值：3 + 3 + d

  -邏輯判斷
  <view wx:if="{{length > 5}}">大於5</view>
  -終值：大於5

  -字符串運算
  <view>{{"hello" + name}}</view>
  -終值：hello World

  -數據路徑
  <view>{{object.key}} {{array[0]}}</view>
  -終值：Hello MINA

  -組合
  //能夠在 Mustache 內直接進行組合，構成新的對象或者數組
  <view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
  -終值：（依次打印數組內容"0"、"1"、"2"、"3"、"4"）

  -對象
  <template is="objectCombine" data="{{for: testa, bar: testb}}"></template>
  -終值：（向模板'objectCombine'傳遞對象{for: 1, bar: 2}）
  
  -擴展運算符 ...
  //將當前對象展開
  <template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
  -終值：（向模版'objectCombine'傳遞對象{a: 1, b: 2, c: 3, d: 4, e: 5}）

  <template is="objectCombine" data="{{foo, bar}}"></template>
  -終值：（向模版'objectCombine'傳遞對象{foo: 'my-foo', bar:'my-bar'}）
  
  //注意： 
  上述方式擴展運算符能夠隨意組合，可是若有存在變量名相同的狀況，後邊的數據會覆蓋前面的數據
  <template is="objectCombine" data="{{...obj3, ...obj4, o, c: 6}}"></template>
  -終值：(向模版'objectCombine'傳遞對象{a: 5, b: 3, c: 6})

  花括號和引號之間若是有空格，將最終被解析成爲字符串
  <view wx:for="{{[1,2,3]}} ">
  {{item}}
  </view>
  -終值：（頁面依次循環輸出for中的數據"1"、","、"2"、","、"3"、" "最後將輸出6個view）

 -->


<!-- 
 列表渲染
  測試數據
  Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }],
    condition2:true,
    length:4,
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ],
  }，
  switch: function(e) {
    const length = this.data.objectArray.length
    for (let i = 0; i < length; ++i) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  },
})

-wx:for
  在組件上使用 wx:for 控制屬性綁定一個數組，便可使用數組中各項的數據重複渲染該組件。
  默認數組的當前項的下標變量名默認爲 index，數組當前項的變量名默認爲 item
  <view wx:for="{{array}}">
  {{index}}: {{item.message}}
  </view>
  -終值：0:foo 1:bar
  //可以使用 wx:for-item 指定數組當前元素的變量名
  //可以使用 wx:for-index 指定數組當前下標的變量名
  //如<view wx:for="{{array}}" wx:for-item="inde" wx:for-index="indexx">
  //{{indexx}}: {{inde.message}}
  //</view>
  //最終結果是同樣的
  //注：當 wx:for 的值爲字符串時，會將字符串解析成字符串數組（將整個字符串，逐行打印）
  //注：花括號和引號之間若是有空格，將最終被解析成爲字符串

-wx:for 嵌套，下邊是一個九九乘法表
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
  </view>

-wx:key
  若是列表中項目的位置會動態改變或者有新的項目添加到列表中，而且但願列表中的項目保持本身的特徵和狀態（如 input 中的輸入內容，switch 的選中狀態），須要使用 wx:key 來指   定列表中項目的惟一的標識符。

  wx:key 的值以兩種形式提供
  字符串，表明在 for 循環的 array 中 item 的某個 property，該 property 的值須要是列表中惟一的字符串或數字，且不能動態改變。
  保留關鍵字 *this 表明在 for 循環中的 item 自己，這種表示須要 item 自己是一個惟一的字符串或者數字，如：
  當數據改變觸發渲染層從新渲染的時候，會校訂帶有 key 的組件，框架會確保他們被從新排序，而不是從新建立，以確保使組件保持自身的狀態，而且提升列表渲染時的效率。

  如不提供 wx:key，會報一個 warning， 若是明確知道該列表是靜態，或者沒必要關注其順序，能夠選擇忽略.
  <switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
  <button bindtap="switch"> Switch </button>
  <switch wx:for="{{objectArray}}" style="display: block;"> {{item.id}} </switch>
  //以上代碼來自官方，本身作了些調整，更加直觀，也可直接去官方查看：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html
  //說人話系列：簡單來講，當你的數據源發生改變時，添加了wx:key的循環體會被從新排序（已添加的數據不會被改變），而不是從新建立（初始化全部數據）
  -->


<!-- 
條件渲染
-wx:if
  在框架中，使用 wx:if="" 來判斷是否須要渲染該代碼塊：
  <view wx:if="{{condition2}}"> True </view>
  -終值：（此組件將顯示）
  也能夠用 wx:elif 和 wx:else 來添加一個 else 塊：
  <view wx:if="{{length > 5}}"> 1 </view>
  <view wx:elif="{{length > 2}}"> 2 </view>
  <view wx:else> 3 </view>
  -終值：（只顯示2）
  //與js中的if、else if、else相同，只判斷一次，若前者經過，則後者不運行
-block wx:if
  若是要一次性判斷多個組件標籤，可使用一個 <block/> 標籤將多個組件包裝起來，並在上邊使用 wx:if 控制屬性。
  //注： <block/> 並非一個組件，它僅僅是一個包裝元素，不會在頁面中作任何渲染，只接受控制屬性。
-wx:if vs hidden
  由於 wx:if 之中的模板也可能包含數據綁定，因此當 wx:if 的條件值切換時，框架有一個局部渲染的過程，由於它會確保條件塊在切換時銷燬或從新渲染。
  同時 wx:if 也是惰性的，若是在初始渲染條件爲 false，框架什麼也不作，在條件第一次變成真的時候纔開始局部渲染。
  相比之下，hidden 就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。
  通常來講，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。所以，若是須要頻繁切換的情景下，用 hidden 更好，若是在運行時條件不大可能改變則 wx:if 較好。
 -->


<!-- 
模板
WXML提供模板（template），能夠在模板中定義代碼片斷，而後在不一樣的地方調用。
測試數據：
  Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  },
  showmodal: function () {
    wx.showModal({
      title: '提示',
      content: '觸發JS',
    })
  }
  })
-定義模板
  使用 name 屬性，做爲模板的名字。而後在<template/>內定義代碼片斷，如：
  <template name="msgItem">
  <view bindtap="showmodal">
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
  </template>
-使用模板
  使用 is 屬性，聲明須要的使用的模板，而後將模板所須要的 data 傳入，如：
  <template is="msgItem" data="{{...item}}"/>

  //使用不一樣頁面的模板時
  //引入模板文件
  <import src="../template/template.wxml" />
  //相應模板能夠擁有獨立的css
  @import "../template/template.wxss";
  //模板不能獨立建立JS文件，但相應事件能夠在當前頁面中被觸發

-動態渲染
  is 屬性可使用 Mustache 語法，來動態決定具體須要渲染哪一個模板：
  <template name="odd">
    <view> odd </view>
  </template>
  <template name="even">
    <view> even </view>
  </template>

  <block wx:for="{{[1, 2, 3, 4, 5]}}">
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
  </block>
 -->


<!-- 
引用
-import
  import能夠在該文件中使用目標文件定義的template
  //僅引入文件而沒使用，需調用對應組件才能生效
  <import src="../template/template.wxml" />
  做用域：
  import 有做用域的概念，即只會 import 目標文件中定義的 template，而不會 import 目標文件 import 的 template。

-include
  include 能夠將目標文件除了 <template/> <wxs/> 外的整個代碼引入，至關因而拷貝到 include 位置
  <include src="header.wxml"/>
    <view> body </view>
  <include src="footer.wxml"/>

  //header.wxml
    <view> header </view>
  //footer.wxml
    <view> footer </view>
 -->

<!-- 基礎語法 End -->



<!-- 事件系統 -->
<!-- 
-事件
  //事件系統微信官方文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
  事件是視圖層到邏輯層的通信方式。
  事件能夠將用戶的行爲反饋到邏輯層進行處理。
  事件能夠綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。
  事件對象能夠攜帶額外信息，如 id, dataset, touches
  //說人話：事件是一種用戶與程序的互動行爲，當用戶點擊某一個按鈕、圖片等，若是按鈕、圖片綁定了相應事件，用戶的行爲就會觸發事件如：
  測試數據：
  Page({
    tapName: function(e) {
      console.log(e.currentTarget.dataset.hi)
    }
  })

  <view id="tapTest" data-hi="Hi WeChat" bindtap="tapName"> Click me! </view>
  -終值：（控制檯打印）Hi WeChat

-事件分類
  事件分爲冒泡事件和非冒泡事件：
    冒泡事件：當一個組件上的事件被觸發後，該事件會向父節點傳遞。
    非冒泡事件：當一個組件上的事件被觸發後，該事件不會向父節點傳遞。
    如:
    //index.wxml
    <view id="tp1" class="view1" bindtap="tap1">
      <view id="tp2" class="view2" bindtap="tap2">
        <view id="tp3" class="view3" bindtap="tap3">
          <view id="tp4" class="view4" catchtap="tap4">
            <view id="tp5" class="view5" bindtap="tap5">
            </view>
          </view>
        </view>
      </view>
    </view>
  //index.wxss
  .view1 {
  height: 200rpx;
  width: 700rpx;
  background-color: #13c106;
  }
  .view2 {
  height: 200rpx;
  width: 550rpx;
  background-color: #1495e7;
  }
  .view3 {
  height: 200rpx;
  width: 400rpx;
  background-color: #f00;
  }
  .view4 {
  height: 200rpx;
  width: 250rpx;
  background-color: #fff;
  }
  .view5 {
  height: 200rpx;
  width: 100rpx;
  background-color: #ffce44;
  }
  //以上數據展現冒泡事件及非冒泡事件的區別，JS可寫可不寫，開發者工具會發出相應警告，觀察警告條數便可
  //注意tap4事件綁定方式爲catch

  //微信冒泡事件列表：
  類型                      觸發條件                                                                              最低版本
  touchstart                手指觸摸動做開始    
  touchmove                  手指觸摸後移動    
  touchcancel                手指觸摸動做被打斷，如來電提醒，彈窗    
  touchend                  手指觸摸動做結束    
  tap                        手指觸摸後立刻離開    
  longpress                  手指觸摸後，超過350ms再離開，若是指定了事件回調函數並觸發了這個事件，tap事件將不被觸發      1.5.0
  longtap                    手指觸摸後，超過350ms再離開（推薦使用longpress事件代替）    
  transitionend              會在 WXSS transition 或 wx.createAnimation 動畫結束後觸發    
  animationstart            會在一個 WXSS animation 動畫開始時觸發    
  animationiteration        會在一個 WXSS animation 一次迭代結束時觸發    
  animationend              會在一個 WXSS animation 動畫完成時觸發    
  touchforcechange          在支持 3D Touch 的 iPhone 設備，重按時會觸發                                           1.9.90
  //注：除上述以外的其餘組件自定義事件如無特殊聲明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件

-事件綁定
  事件綁定的寫法同組件的屬性，以 key、value 的形式。

  key 以bind或catch開頭，而後跟上事件的類型，如bindtap、catchtouchstart。自基礎庫版本 1.5.0 起，在非原生組件中，bind和catch後能夠緊跟一個冒號，其含義不變，如         bind:tap、catch:touchstart。
  value 是一個字符串，須要在對應的 Page 中定義同名的函數。否則當觸發事件的時候會報錯。基礎庫版本 2.8.1 起，原生組件也支持bind後緊跟冒號的寫法。

  //bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定能夠阻止冒泡事件向上冒泡。
  //具體例子見事件分類

-事件捕獲
  事件的捕獲階段
  自基礎庫版本 1.5.0 起，觸摸類事件支持捕獲階段。捕獲階段位於冒泡階段以前，且在捕獲階段中，事件到達節點的順序與冒泡階段剛好相反。須要在捕獲階段監聽事件時，能夠採用       capture-bind、capture-catch關鍵字，後者將中斷捕獲階段和取消冒泡階段。

  在下面的代碼中，點擊 inner view 會前後調用handleTap二、handleTap四、handleTap三、handleTap1。

  <view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
    outer view
    <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
      inner view
    </view>
  </view>
  若是將上面代碼中的第一個capture-bind改成capture-catch，將只觸發handleTap2。

  <view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
    outer view
    <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
      inner view
    </view>
  </view>

  //說人話：觸摸類的事件在觸發以前會有一個捕獲階段，捕獲階段執行完成後纔會觸發事件，事件觸發順序以下：
  //用戶點擊-捕獲階段（冒泡/非冒泡）-觸發事件（冒泡/非冒泡）
  //注：捕獲階段觸發非冒泡事件，則不會觸發以後的任何事件，且捕獲階段執行節點與冒泡順序相反

-事件對象
  如無特殊說明，當組件觸發事件時，邏輯層綁定該事件的處理函數會收到一個事件對象。
  BaseEvent 基礎事件對象屬性列表：
  屬性              類型        說明                                基礎庫版本
  type              String      事件類型    
  timeStamp          Integer      事件生成時的時間戳    
  target            Object      觸發事件的組件的一些屬性值集合    
  currentTarget      Object      當前組件的一些屬性值集合    
  mark              Object      事件標記數據                        2.7.1

  CustomEvent 自定義事件對象屬性列表（繼承 BaseEvent）：
  屬性              類型        說明
  detail            Object      額外的信息

  TouchEvent 觸摸事件對象屬性列表（繼承 BaseEvent）：
  屬性              類型        說明
  touches            Array        觸摸事件，當前停留在屏幕中的觸摸點信息的數組
  changedTouches    Array        觸摸事件，當前變化的觸摸點信息的數組

  //特殊事件： canvas 中的觸摸事件不可冒泡，因此沒有 currentTarget

  -對象模型
  {
  //觸發的事件類型
  type:"tap"

  //在基礎庫版本 2.7.1 以上，可使用 mark 來識別具體觸發事件的 target 節點。此外， mark 還能夠用於承載一些自定義數據（相似於 dataset ）。
    當事件觸發時，事件冒泡路徑上全部的 mark 會被合併，並返回給事件回調函數。（即便事件不是冒泡事件，也會 mark 。）
    /*
    //index.wxml
    <view mark:myMark="last" bindtap="bindViewTap">
      <button mark:anotherMark="leaf" bindtap="bindButtonTap">按鈕</button>
    </view>

    //index.js
    Page({
    bindViewTap: function(e) {
      console.log(e)
      console.log(e.mark.myMark === "last") // true
      console.log(e.mark.anotherMark === "leaf") // true
    }
    })
    在上述 WXML 中，若是按鈕被點擊，將觸發 bindViewTap 和 bindButtonTap 兩個事件，事件攜帶的 event.mark 將包含 myMark 和 anotherMark 兩項

    mark 和 dataset 很類似，主要區別在於： mark 會包含從觸發事件的節點到根節點上全部的 mark: 屬性值；而 dataset 僅包含一個節點的 data- 屬性值。
    細節注意事項：
    若是存在同名的 mark ，父節點的 mark 會被子節點覆蓋。(同名時離源組件越近，級別越高)
    在自定義組件中接收事件時， mark 不包含自定義組件外的節點的 mark 。（當使用自定義組件時，自定義組件中的mark是獨立的）
    不一樣於 dataset ，節點的 mark 不會作連字符和大小寫轉換。
    */
  mark:{}
  
  //自定義事件所攜帶的數據，如表單組件的提交事件會攜帶用戶的輸入，媒體的錯誤事件會攜帶錯誤信息，詳見組件定義中各個事件的定義。
    點擊事件的detail 帶有的 x, y 同 pageX, pageY 表明距離文檔左上角的距離
  detail:{}

  //觸發事件的源組件。
  target:{
      //事件源組件的ID
      id:"tapTest"
      //事件源組件上由data-開頭的自定義屬性組成的集合
      //能夠綁定動態數據，如：data-id="{{userid}}"
      /*
      dataset
      在組件節點中能夠附加一些自定義數據。這樣，在事件中能夠獲取這些自定義的節點數據，用於事件的邏輯處理。
      在 WXML 中，這些自定義數據以 data- 開頭，多個單詞由連字符 - 鏈接。這種寫法中，連字符寫法會轉換成駝峯寫法，而大寫字符會自動轉成小寫字符。如：
      data-element-type ，最終會呈現爲 event.currentTarget.dataset.elementType ；
      data-elementType ，最終會呈現爲 event.currentTarget.dataset.elementtype 。
      //index.wxml
      <view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
      //index.js
      Page({
        bindViewTap:function(event){
        console.log(event.currentTarget.dataset.alphaBeta === "1") // 會轉爲駝峯寫法
        console.log(event.currentTarget.dataset.alphabeta === "2") // 大寫會轉爲小寫
        }
        })
      */
      dataset:{hi: "Hi WeChat"}
    }

    //touches 是一個數組，每一個元素爲一個 Touch 對象（canvas 觸摸事件中攜帶的 touches 是 CanvasTouch 數組）。 表示當前停留在屏幕上的觸摸點
  touches:[
    0:{
      //觸摸點標識符
      identifier: 0
      //距離頁面可顯示區域（屏幕除去導航條）左上角距離，橫向爲X軸，縱向爲Y軸
      clientX: 29
      clientY: 411
      force: 1
      //距離文檔左上角的距離，文檔的左上角爲原點 ，橫向爲X軸，縱向爲Y軸
      pageX: 29
      pageY: 517
      }
    ]

  //頁面打開到觸發事件所通過的毫秒數
  timeStamp:1000

  //事件綁定的當前組件
  currentTarget:{
      //當前組件ID（如冒泡事件，此值爲當前組件ID非源組件）
      id: "tapTest"
      //當前組件上由data-開頭的自定義屬性組成的集合（當前組件屬性）
      dataset: {hi: "Hi WeChat"}
    }

  //changedTouches 數據格式同 touches。 表示有變化的觸摸點，如從無變有（touchstart），位置變化（touchmove），從有變無（touchend、touchcancel）
  changedTouches:[{}]

  __proto__: Object
  }
-->

 

　　page.json

　　每個小程序頁面也可使用 .json 文件來對本頁面的窗口表現進行配置。頁面中配置項在當前頁面會覆蓋 app.json 的 window 中相同的配置項。文件內容爲一個 JSON 對象

// 頁面配置page.json
// 每個小程序頁面均可以使用 .json 文件來對本頁面的窗口表現進行配置。頁面中配置項在當前頁面會覆蓋 app.json 的 window 中相同的配置項。文件內容爲一個 JSON 對象，有如下屬性
{
  // 導航欄背景顏色 顏色都以十六進制顯示，不然在不一樣設備中可能顯示錯誤
  "navigationBarBackgroundColor": "#13c106",
  // 導航欄標題顏色，僅支持 black / white    (黑/白)
  "navigationBarTextStyle": "black",
  // 導航欄標題文字內容
  "navigationBarTitleText": "聽風吟",
  // 導航欄樣式，僅支持如下值：default 默認樣式 、 custom 自定義導航欄，只保留右上角膠囊按鈕
  "navigationStyle": "default",
  // 窗口的背景色
  "backgroundColor": "#13c106",
  // 下拉 loading 的樣式，僅支持 dark (三個點)/ light    （無特殊展現）
  "backgroundTextStyle": "dark",
  // 頂部窗口的背景色，僅 iOS 支持
  "backgroundColorTop": "#13c106",
  // 底部窗口的背景色，僅 iOS 支持
  "backgroundColorBottom": "#13c106",
  // 控制當前頁下拉刷新
  "enablePullDownRefresh": false,
  // 控制當前頁上拉刷新
  "onReachBottomDistance": false,
  // 控制當前頁屏幕旋轉   支持 auto (自動)/ portrait(豎屏) / landscape (2.5.0支持固定橫屏顯示)
  "pageOrientation": "portrait",
  // 設置爲 true 則頁面總體不能上下滾動。只在頁面配置中有效，沒法在 app.json 中設置
  "disableScroll": true,
  // 頁面自定義組件配置
  /*
  自定義組件
從小程序基礎庫版本 1.6.3 開始，小程序支持簡潔的組件化編程。全部自定義組件相關特性都須要基礎庫版本 1.6.3 或更高。
開發者能夠將頁面內的功能模塊抽象成自定義組件，以便在不一樣的頁面中重複使用；也能夠將複雜的頁面拆分紅多個低耦合的模塊，有助於代碼維護。自定義組件在使用時與基礎組件很是類似
  */
  /*
  // custom-comp
  建立自定義組件
相似於頁面，一個自定義組件由 json wxml wxss js 4個文件組成。要編寫一個自定義組件，首先須要在 json 文件中進行自定義組件聲明（將 component 字段設爲 true 能夠將這一組文件設爲自定義組件） 

// custom-comp.json
  {
    "component": true
  }

在 wxml 文件中編寫組件模板，在 wxss 文件中加入組件樣式，它們的寫法與頁面的寫法相似。

// custom-comp.wxml
  <view class="inner">
    {{innerText}}
  </view>
  <slot></slot>

// custom-comp.wxss
  .inner {
    color: red;
  }
// 注意：在組件wxss中不該使用ID選擇器、屬性選擇器和標籤名選擇器。

在自定義組件的 js 文件中，須要使用 Component() 來註冊組件，並提供組件的屬性定義、內部數據和自定義方法。
組件的屬性值和內部數據將被用於組件 wxml 的渲染，其中，屬性值是可由組件外部傳入的
// custom-comp.js
  Component({
    properties: {
      // 這裏定義了innerText屬性，屬性值能夠在組件使用時指定
      innerText: {
        type: String,
        value: 'default value',
      }
    },
    data: {
      // 這裏是一些組件內部數據
      someData: {}
    },
    methods: {
      // 這裏是一個自定義方法
      customMethod: function(){}
    }
  })
  */

  // 使用自定義組件，使用已註冊的自定義組件前，首先要在頁面的 json 文件中進行引用聲明。此時須要提供每一個自定義組件的標籤名和對應的自定義組件文件路徑：
  "usingComponents": {
    "custom-comp": "./custom-comp"
  }
  /*
  <view>
    <!-- 如下是對一個自定義組件的引用 -->
    <custom-comp inner-text="Some text"></custom-comp>
  </view>
  */
  // 在頁面的 wxml 中就能夠像使用基礎組件同樣使用自定義組件。節點名即自定義組件的標籤名，節點屬性即傳遞給組件的屬性值
  // 自定義組件的 wxml 節點結構在與數據結合以後，將被插入到引用位置內
  /*
  細節注意事項：
由於 WXML 節點標籤名只能是小寫字母、中劃線和下劃線的組合，因此自定義組件的標籤名也只能包含這些字符。
自定義組件也是能夠引用自定義組件的，引用方法相似於頁面引用自定義組件的方式（使用 usingComponents 字段）。
自定義組件和頁面所在項目根目錄名不能以「wx-」爲前綴，不然會報錯。
注意，是否在頁面文件中使用 usingComponents 會使得頁面的 this 對象的原型稍有差別，包括：

  使用 usingComponents 頁面的原型與不使用時不一致，即 Object.getPrototypeOf(this) 結果不一樣。
  使用 usingComponents 時會多一些方法，如 selectComponent 。
  出於性能考慮，使用 usingComponents 時， setData 內容不會被直接深複製，即 this.setData({ field: obj}) 後 this.data.field === obj 。（深複製會在這個值被組件間傳遞時發生。）
  */
}

 

 

 

 

 

3）.項目配置 project.config.json

//工具配置project.config.json
//官方提供的配置很是殘缺。。。
/*
如配置值爲""則爲Sring類型，根據相應路徑或提示更改便可
如配置值爲true則當前配置爲Boolean類型
如配置值爲Object固定選項則會有相應提示
*/
{
  //指定小程序源碼的目錄(需爲相對路徑)--
  "miniprogramRoot": "",
  //指定騰訊雲項目的目錄(需爲相對路徑)--
  "qcloudRoot": "",
  //指定插件項目的目錄(需爲相對路徑)--
  "pluginRoot": "",
  //編譯類型
  /*
  僅包含miniprogram （普通小程序項目）plugin（小程序插件項目）
  */
  "compileType": "miniprogram",
  //項目設置
  "setting": {
    //是否啓用 es6 轉 es5
    "es6": true,
    //上傳代碼時樣式是否自動補全
    "postcss": true,
    //上傳代碼時是否自動壓縮
    "minified": true,
    //是否檢查安全域名和 TLS 版本
    "urlCheck": false,
    //是否進行代碼保護--
    "uglifyFileName": true,
    //是否打開SiteMap索引提示(（默認爲true）
    /*
    微信現已開放小程序內搜索，開發者能夠經過 sitemap.json 配置，或者管理後臺頁面收錄開關來配置其小程序頁面是否容許微信索引。當開發者容許微信索引時，微信會經過爬蟲的形式，爲小程序的頁面內容創建索引。當用戶的搜索詞條觸發該索引時，小程序的頁面將可能展現在搜索結果中。 爬蟲訪問小程序內頁面時，會攜帶特定的 user-agent：mpcrawler 及場景值：1129。須要注意的是，若小程序爬蟲發現的頁面數據和真實用戶的呈現不一致，那麼該頁面將不會進入索引中。
    */
    /*
    說人話系列：
    微信小程序2019/03/29號推出 sitemap 功能，默認收錄全部小程序頁面功能，用於微信場景搜索，以後能夠根據內容來搜索小程序，而不只止於小程序名稱和簡介
    此功能並不是關閉索引，而是關閉索引的提示
    關閉索引請查看 sitemap.json 
    */
    "checkSiteMap": true,
    //是否使用工具渲染 CoverView--
    "coverView": true,
    //是否打開加強編譯--
    "enhance": true,
    //加強編譯下Babel的配置項--
    "babelSetting": {
      //配置須要跳過Babel編譯(包括代碼壓縮)處理的文件或目錄
      "ignore": [],
      //暫無官方說明
      "disablePlugins": [],
      //Babel 輔助函數的輸出目錄，默認爲 @babel/runtime
      "outputPath": ""
    },
    //上傳時是否帶上 sourcemap（默認爲true）
    "uploadWithSourceMap": true,
    //暫無官方說明
    "newFeature": true,
    "autoAudits": false,
    "checkInvalidKey": true,
  },
  //基礎庫版本
  "libVersion": "2.8.0",
  //當前項目appid，只在新建項目時讀取
  "appid": "wx03f53a71c3f1c05c",
  //當前項目名字，只在新建項目時讀取
  "projectname": "XJTest",
  //打包配置項（此項設置需重啓開發者工具纔可生效）
  /*
  packOptions 用以配置項目在打包過程當中的選項。打包是預覽、上傳時對項目進行的必須步驟。

目前能夠指定 packOptions.ignore 字段，用以配置打包時對符合指定規則的文件或文件夾進行忽略，以跳過打包的過程，這些文件或文件夾將不會出如今預覽或上傳的結果內。

packOptions.ignore 爲一對象數組，對象元素類型以下：
字段名    類型    說明
value    string    路徑1或取值
type    string    類型
*/
  /*
type 能夠取的值爲 
folder(文件夾)
file(文件)
suffix(後綴)
prefix(前綴)
regexp2(正則表達式)
glob2(Glob 規則)

全部規則值都會自動忽略大小寫。
注 1: value 字段的值若表示文件或文件夾路徑，以小程序目錄 (miniprogramRoot) 爲根目錄。
注 2: regexp、glob 僅 1.02.1809260 及以上版本工具支持。
*/
  //示例
  "packOptions": {
    "ignore": [
      {
        "type": "file",
        "value": "test/test.js"
      },
      {
        "type": "folder",
        "value": "test"
      },
      {
        "type": "suffix",
        "value": ".webp"
      },
      {
        "type": "prefix",
        "value": "test-"
      },
      {
        "type": "glob",
        "value": "test/**/*.js"
      },
      {
        "type": "regexp",
        "value": "\\.jsx$"
      }
    ]
  },
  //調試配置項
  /*
  debugOptions 用以配置在對項目代碼進行調試時的選項。

目前能夠指定 debugOptions.hidedInDevtools 字段，用以配置調試時於調試器 Sources 面板隱藏源代碼的文件。

hidedInDevtools 的配置規則和 packOptions.ignore 是一致的。

當某個 js 文件符合此規則時，調試器 Sources 面板中此文件源代碼正文內容將被隱藏，顯示爲：
// xxx.js has been hided by project.config.json

注：配置此規則後，可能須要關閉並從新打開項目才能看到效果。
*/
  "debugOptions": {
    "hidedInDevtools": [
      {
        "type": "file",
        "value": "test/test.js"
      },
      {
        "type": "folder",
        "value": "test"
      },
      {
        "type": "suffix",
        "value": ".webp"
      },
      {
        "type": "prefix",
        "value": "test-"
      },
      {
        "type": "glob",
        "value": "test/**/*.js"
      },
      {
        "type": "regexp",
        "value": "\\.jsx$"
      }
    ]
  },
  //自定義預處理
  "scripts": {
    //官方僅如下說明
    /*
    scripts 中指定自定義預處理的命令
    名字    說明
    beforeCompile    編譯前預處理命令
    beforePreview    預覽前預處理命令
    beforeUpload    上傳前預處理命令
    */
  },
  //當前文件描述
  "description": "項目配置文件",
  //是否爲遊客
  "isGameTourist": false,
  //工具類型
  "simulatorType": "wechat",
  //開發者工具插件庫版本
  "simulatorPluginLibVersion": {},
  //暫無官方說明
  "condition": {
    "search": {
      "current": -1,
      "list": []
    },
    "conversation": {
      "current": -1,
      "list": []
    },
    "game": {
      "currentL": -1,
      "list": []
    },
    "miniprogram": {
      "current": -1,
      "list": []
    }
  }
}

 

　　4）.小程序索引配置sitemap.json

//小程序索引配置sitemap.json
/*
微信現已開放小程序內搜索，開發者能夠經過 sitemap.json 配置，或者管理後臺頁面收錄開關來配置其小程序頁面是否容許微信索引。當開發者容許微信索引時，微信會經過爬蟲的形式，爲小程序的頁面內容創建索引。當用戶的搜索詞條觸發該索引時，小程序的頁面將可能展現在搜索結果中。 爬蟲訪問小程序內頁面時，會攜帶特定的 user-agent：mpcrawler 及場景值：1129。須要注意的是，若小程序爬蟲發現的頁面數據和真實用戶的呈現不一致，那麼該頁面將不會進入索引中。
*/
/*
注：若是沒有 sitemap.json ，則默認爲全部頁面都容許被索引
注：{"action": "allow","page": "*"} 是優先級最低的默認規則，未顯式指明 "disallow" 的都默認被索引
*/
{
  //文件描述
  "desc": "關於本文件的更多信息，請參考文檔 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  // 小程序索引配置
  "rules": [
    {
      // "allow"(容許)、"disallow"(不容許)    命中該規則的頁面是否能被索引
      "action": "allow",
      // "*"  全部頁面/頁面的路徑
      "page": "path/to/page",
      // 當 page 字段指定的頁面在被本規則匹配時可能使用的頁面參數名稱的列表（不含參數值）
      "params": [
        "a",
        "b"
      ],
      // 當 page 字段指定的頁面在被本規則匹配時，此參數說明 params 匹配方式
      /*
exact        當小程序頁面的參數列表等於 params 時，規則命中
inclusive    當小程序頁面的參數列表包含 params 時，規則命中
exclusive    當小程序頁面的參數列表與 params 交集爲空時，規則命中
partial      當小程序頁面的參數列表與 params 交集不爲空時，規則命中
  */
      "matching": "exact"
    },
    {
      "action": "disallow",
      "page": "path/to/page"
    }
  ]
  /*
path/to/page?a=1&b=2 => 優先索引
path/to/page => 不被索引
path/to/page?a=1 => 不被索引
path/to/page?a=1&b=2&c=3 => 不被索引
其餘頁面都會被索引
  */
}

 

 

 

 

 

 

 

 

　　

 

 

　　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2、框架

3、組件

4、API

 

 

 

 

 

 

 

require和import的區別

import和require都是被模塊化所使用。

1-遵循規範
require 是 AMD規範引入方式
import是ES6的一個語法標準，若是要兼容瀏覽器的話必須轉化成ES5的語法

2-調用時間
require是運行時調用，因此require理論上能夠運用在代碼的任何地方
import是編譯時調用，因此必須放在文件開頭

3-本質
require是賦值過程，其實require的結果就是對象、數字、字符串、函數等，再把require的結果賦值給某個變量
import是解構過程，可是目前全部的引擎都尚未實現import，咱們在node中使用babel支持ES6，也僅僅是將ES6轉碼爲ES5再執行，import語法會被轉碼爲require

 

變量聲明（var、let、const）

var：聲明全局變量。換句話理解就是，聲明在for循環中的變量，跳出for循環一樣可使用。

let：聲明塊級變量。即局部變量。（只在let命令所在的代碼塊內有效）

const：聲明一個只讀常量。具備塊級做用域。（一旦聲明即不可更改，聲明時必須賦值）

不存在變量提高

var命令會發生」變量提高「現象，即變量能夠在聲明以前使用，值爲undefined。這種現象多多少少是有些奇怪的，按照通常的邏輯，變量應該在聲明語句以後纔可使用。
爲了糾正這種現象，let命令改變了語法行爲，它所聲明的變量必定要在聲明後使用，不然報錯。

暫時性死區

只要塊級做用域內存在let命令，它所聲明的變量就「綁定」（binding）這個區域，再也不受外部的影響。

 var tmp = 123;

if (true) {

  tmp = 'abc'; // ReferenceError

  let tmp;

}

上面代碼中，存在全局變量tmp，可是塊級做用域內let又聲明瞭一個局部變量tmp，致使後者綁定這個塊級做用域，因此在let聲明變量前，對tmp賦值會報錯。
ES6明確規定，若是區塊中存在let和const命令，這個區塊對這些命令聲明的變量，從一開始就造成了封閉做用域。凡是在聲明以前就使用這些變量，就會報錯。
總之，在代碼塊內，使用let命令聲明變量以前，該變量都是不可用的。這在語法上，稱爲「暫時性死區」（temporal dead zone，簡稱 TDZ）。

不容許重複聲明

let不容許在相同做用域內，重複聲明同一個變量

const本質

const實際上保證的，並非變量的值不得改動，而是變量指向的那個內存地址不得改動。對於簡單類型的數據（數值、字符串、布爾值），值就保存在變量指向的那個內存地址，所以等同於常量。但對於複合類型的數據（主要是對象和數組），變量指向的內存地址，保存的只是一個指針，const只能保證這個指針是固定的，它指向的數據結構是可變的。

 

 

 

JSON

是一種取代XML的一種輕量級的數據交換格式

它獨立於語言的文本格式的的同時還採用了相似於C語言家族的習慣（包括C, C++, C#, Java, JavaScript, Perl, Python等）和xml相比,它更小巧、易於人閱讀和編寫，而且描述能力也不差,同時也易於機器解析和生成。

這些特性使JSON成爲理想的數據交換語言，利於網絡傳輸數據且節省流量而起到加快速度的做用。

書寫格式是：以「{」開始，「}」結束。是一個無序的「‘名稱/值’對」集合。名稱寫在前面（在雙引號中），值對寫在後面(一樣在雙引號中)，中間用冒號隔開。

[若是是字符串,那無論是鍵或值最好都用雙引號引發來]

 

 

 

 

-------------------函數記錄-------------------

獲取當前系統信息

wx.getSystemInfo({

success: function (res) {

console.log(res)

}

})

包含信息：

DKVersion:"2.7.7"　　　　　　　     -SDK版本

batteryLevel:100　　　　　　　　　-電池水平

brand:"devtools"　　　　　　 　　   -品牌

errMsg:"getSystemInfo:ok"　　　　  -errMsg

fontSizeSetting:16　　　　　　　　 -字體大小設置

language:"zh"　　　　　　　　　　 -語言

model:"iPhone 7 Plus"　　　　　　  -模型

pixelRatio:3　　　　　　　　　　    -像素比

platform:"devtools"　　　　　　　    -平臺

screenHeight:736　　　　　　         -屏幕高度

screenWidth:414　　　　　　　　   -屏幕寬度

statusBarHeight:20　　　　　　　   -狀態欄高度

system:"iOS 10.0.1"　　　　　　     -系統

version:"6.6.3"　　　　　　　　       -版本

windowHeight:672　　　　　　        -窗口高度

windowWidth:414　　　　　　　      -窗口寬度