快速瞭解小程序

時間 2019-11-10

標籤快速瞭解程序简体版

原文原文鏈接

什麼是小程序？

先引用小龍哥的一句話來看看啥是小程序？javascript

小程序是一種不須要下載安裝便可使用的應用，它實現了應用「觸手可及」的夢想，用戶掃一掃或者搜一下便可打開應用。也體現了「用完即走」的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。 - Allen Zhang（張小龍）css

從程序猿的角度來講：小程序就是依賴於微信平臺，利用小程序框架提供視圖層描述語言WXML、WXSS，以及JavaScript來實現一個具有原生體驗的Web應用。微信小程序至關於基於微信平臺造了一個React Native的輪子，經過JS的跨平臺性實現了一套代碼跨平臺部署、運行。html

Hello World

工程結構

首先，咱們先經過微信web開發者工具新建一個項目，項目建成後會自動生成下列文件。下文所有圍繞這個新建的項目來簡單的介紹一下小程序。前端

能夠看出整個工程包括app.js、app.json、app.wxss，以及pages和utils目錄，後面咱們一次介紹各個文件和目錄的做用。java

其中app.js、app.json、app.wxss最爲重要，他們爲對整個小程序進行全局配置。jquery

app.js，聲明小程序的整個生命週期、定義全局變量web
app.json，對整個小程序起全局配置的做用，規定小程序包括哪些頁面、窗口的樣式、底部tab欄的樣式、網絡超時事件、是否開啓debug模式json
app.wxss，這裏的wxss相似於CSS，只不過是針對微信作了一部分拓展，定義了小程序的全局樣式小程序

而pages目錄下面每一子目錄都表明了小程序中的一個頁面，而每個頁面都由*.js、*.json、*.wxml、*.wxss組成，這裏又出現了一個新的後綴wxml，同時再次出現了wxss，後面會解釋他倆是啥用的。先解釋一下，頁面中的這四種文件是幹啥用的？微信小程序

*.js，處理頁面的邏輯
*.json，處理頁面的配置
*.wxml，處理頁面的結構
*.wxss，處理頁面的樣式

爲了減小配置同一個頁面目錄中的文件都須要以同一個名字命名，例如我的習慣將全部頁面目錄下面的文件都用index命名。

`*.json`中我能夠配置什麼？

上面有提到app.json能夠配置頁面的全局配置，而pages目錄下*.json則能夠配置對應頁面window選項（窗口的樣式），那麼咱們到底能夠配置哪些具體內容呢？

// app.json
{
    // 定義小程序中有哪些頁面
    "pages":[
        "pages/index/index",
        "pages/logs/logs"
    ],
    
    // 窗口的樣式
    "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Demo",
        "navigationBarTextStyle":"black",
        "enablePullDownRefresh": true
    },
    
    // 底部tab的內容和樣式
    "tabBar": {
        // tab的具體內容
        "list": [
            {
              "pagePath": "pages/index/index",
              "text": "首頁"
            }, 
            {
              "pagePath": "pages/logs/logs",
              "text": "日誌"
            }
        ]
    },
    
    // 設置不一樣請求的網絡超時
    "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
    },
    
    // 是否開啓debug模式，開啓debug模式以後能夠在微信開發者工具的控制檯中看到整個APP，以及每一個頁面的生命週期日誌
    "debug": true
}

經常使用的配置都在這裏了，根據配置的命名其實已經能夠猜個大概啦，若是猜不出來能夠參考文檔「配置」

什麼是`wxml`？

工程中出現了一個新的後綴*.wxml，而WXML(Weixin Markup Language)是微信小程序框架設計出來的一種標籤語言，你能夠直接把他理解成是微信定義了一套帶有特殊事件、效果、屬性的標籤，但本質上和<div>、<img>、<a>等類似。值得注意的是，在wxml中也可使用HTML的標籤。

數據綁定

WXML中仍是實現瞭如今比較流行的數據綁定的功能，省去了咱們操做DOM元素的煩惱。WXML使用了Mustache語法，即經過2個花括號來包裹某一個屬性，經過修改調用JS來修改對象的屬性，繼而修改頁面中dom元素的值。

<view>{{message}}</view>

Page({
    data: {
        message: 'Hello Mina!'
    }
});

列表渲染

而除了提供數據綁定，它還提供了列表渲染、條件渲染、模板、事件、引用等功能。不過語法都比較簡潔，有基礎的同窗基本上均可以快速看懂。

<!-- 列表渲染 -->
<view wx:for="{{array}}">{{item}}</view>

條件渲染

在處理條件渲染時須要注意，小程序中全部的條件判斷表達式、true、false都須要使用{{}}包裹，不然會按照字符串來處理。

<!-- 條件渲染 -->
<view wx:if="{{condition}}">HAHA</view>

模版

WXML提供語法簡潔的前端模版，只須要你經過template中的is屬性來制定須要使用的模版，並傳入須要的參數就能夠開始渲染了。

<!-- 模板 -->
<template name="msgItem">
  <view>
    <text> {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

<!-- 使用模版 -->
<template is="msgItem" data="{{...item}}"/>

引用

小程序提供了兩種不一樣方式的引用import和include，兩者的區別在於：

import會引用目標文件中定義的 template
include會將目標文件中除了template外的全部內容拷貝到include定義的位置

還須要注意的是import存在做用域的概念，即它只會引用目標文件中的template，不會引用目標文件中import的文件。

<!-- import -->
<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>

<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
  <text> B template </text>
</template>

<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

<!-- include -->
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

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

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

事件

這裏單獨說一下WXML中所提到的事件，小程序框架經過事件來保持視圖層和邏輯層的通信，例如，用戶進行點擊行爲，點擊行爲觸發了點擊事件，進而觸發邏輯層中所綁定的函數。

和咱們在瀏覽器中開發JS有區別的是，這裏的事件分兩種：冒泡事件和非冒泡事件。其中冒泡事件包括touchstart、touchmove、touchcancel、touchend、tap、longtap，其他未說起的事件或者自定義事件均爲非冒泡事件。

而在標籤綁定事件函數存在兩種方式bind*、catch*，其中bind*的事件綁定不會阻止冒泡事件向上冒泡，catch*則會阻止冒泡事件向上冒泡至關於直接在函數中執行e.stopPropagation()來阻止事件冒泡。

什麼是`wxss`？

WXSS(WeiXin Style Sheets)是一套樣式語言，咱們能夠簡單理解成CSS的一個拓展，它增長了兩個特性：

尺寸單位
樣式導入

在WXSS中引入了一個新的單位rpx(responsive pixel)，根據屏幕寬度的不一樣rpx表明的實際px也不一樣。WXSS規定一個屏幕的寬度爲750rpx，750恰好是iphone6的物理寬度大小，也是目前大多數設計師出設計稿的標準寬度。也就是說當咱們拿到設計稿的時候，咱們不須要經過百分比、rem，而是直接測量出設計稿上的像素大小並使用微信提供的rpx就能夠知足多屏適配的問題。

除了rpx，WXSS還提供了目前大部分CSS預編譯語言所提供的是樣式導入，即將外聯樣式導入噹噹前文件中

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

App

咱們能夠經過App()來註冊一個小程序，並指定他的生命週期。

App({
    // 監聽小程序初始化，只會在小程序註冊時調用，其中返回值中包括了`path`小程序路徑、`query`打開小程序的query、`scene`場景值
    onLaunch: function (options) {},
    
    // 監聽小程序顯示，當小程序啓動或者從前臺進入後臺時會調用該方法
    onShow: function(options) {},
    
    // 監聽小程序隱藏，當小程序從前臺進入後臺時調用
    onHide: function() {},
    
    // 監聽小程序的錯誤，當小程序發生錯誤時觸發，相似`window.onerror`
    onError: function() {},

    // 全局對象
    globalData: {}
});

// app自己是一個單例在一個程序中只有一個，因此在其它文件中若是想要使用APP對象須要經過下列方法調用
var appInstance = getApp();

這裏所謂的前臺、後臺引用文檔裏面的話來講就是：

當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信，小程序並無直接銷燬，而是進入了後臺；當再次進入微信或再次打開小程序，又會從後臺進入前臺。

不難看出和APP所謂的前臺後臺很相似。

在這裏咱們還須要注意的一點就是場景值，場景值應該是微信所獨有的一個概念，即你經過什麼的方式進入小程序，你能夠是經過「發現欄小程序主入口」，也能夠是經過「單人聊天窗口」等等途徑進入不一樣的方式都對應這個一個固定的值，這樣你就能夠根據不一樣的場景值對用戶做區分、統計，亦或是功能上的區分，這些徹底能夠根據你的應用場景來決定。具體場景值能夠參考文檔「場景值」

Page

和註冊小程序類似，註冊頁面能夠經過Page()去指定頁面的生命週期、事件函數以及初始化數據

Page({
    // 初始化的頁面數據
    data: {
        text: "初始化數據"
    },
    
    // 頁面加載時觸發，這裏的加載指的是第一次加載
    onLoad: function(options) {},
    
    // 頁面渲染完成時觸發
    onReady: function() {},
    
    // 頁面顯示時觸發，每次打開都會觸發
    onShow: function() {},
    
    // 頁面隱藏時觸發
    onHide: function() {},
    
    // 頁面卸載時觸發
    onUnload: function() {},
    
    // 用戶下拉時觸發
    onPullDownRefresh: function() {},
    
    // 用戶上拉觸底時觸發
    onReachBottom: function() {},
    
    // 點擊分享後觸發
    onShareAppMessage: function () {},
    
    // 事件綁定函數
    viewTap: function() {
        // 修改頁面數據
        this.setData({
            text: '啦啦啦啦啦'
        })
    },
    
    // 自定義的對象
    customData: {
        hi: 'MINA'
    }
})

上圖爲頁面生命週期的一個描述，其中onLoad和onUnload對應表明了頁面的生命開始和結束，頁面的生命週期中onLoad、onUnload、onReady只會調用一次，onShow、onHide是能夠屢次調用的。

小程序中全部的頁面都由框架自身維護，而框架則以棧的形式去管理全部的頁面，下表爲路由狀態、頁面的生命週期、頁面棧的表現三者的關係

路由方式	觸發時機	頁面棧表現	路由前頁面	路由後頁面
初始化	在小程序中打開第一個頁面	新頁面入棧	-	onLoad,onShow
打開新頁面	調用`wx.navigateTo`或者使用`navigator`組件跳轉方式爲`navigateTo`	新頁面入棧	onHide	onLoad,onShow
頁面重定向	調用`wx.redirectTo`或者使用`navigator`組件跳轉方式爲`redirectTo`	當前頁面出棧，新頁面入棧	onUnload	onLoad,onShow
頁面返回	調用`wx.navigateBack`或者使用`navigator`組件跳轉類型爲`navigateBack`或者按返回鍵	頁面不斷出棧，直到找到目標頁面	onUnload	onShow
Tab切換	調用`wx.switchTab`或者使用`navigator`組件跳轉類型爲`switchTab`	頁面所有出棧，只留下訪問的tab頁	-	根據跳轉頁面的不一樣而不一樣
重加載	調用`wx.reLaunch`或者使用`navigator`組件跳轉類型爲`reLaunch`	頁面所有出棧，只留下新的頁面	onUnload	onLoad,onShow

固然，若是你以爲上面的表述比較麻煩，你也能夠直接在微信開發者工具中看到當前頁面棧的變化狀況。

框架也爲咱們提供了獲取頁面棧的方法，經過getCurrentPages()咱們能夠以數組的形式得到當前頁面棧的實例，可是不要嘗試修改頁面棧，可能會出現莫名其妙的錯誤。

模塊化

以項目中的utils/utils.js文件爲例，它自己是一個普通工具類，採用了CommonJS的規範將自身特定的函數暴露給外部使用

// utils/utils.js
function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

// logs/logs.js
// 經過require去引用utils.js
var util = require('../../utils/util.js')

在小程序中，基本上一個文件就是一個模塊，並經過module.exports或者exports將想要暴露的對象、函數暴露出去。