微信小程序介紹

時間 2019-11-10

標籤微信程序介紹简体版

原文原文鏈接

首先從官方文檔給的框架提及,微信小程序官方文檔給出了app.js, app.json, app.wxss. 先從這三個文件提及. - app.js 這個文件是整個小程序的入口文件,開發者的邏輯代碼在這裏面實現,同時在這個文件夾裏面能夠定義全局變量. - app.json 這個文件能夠對小程序進行全局配置,決定頁面文件的路徑,窗口表現,設置網絡超時時間,設置多tab等. - app.wxss 是小程序的公共樣式表.(爲了適應廣大的前端開發者，咱們的 WXSS 具備 CSS 大部分特性。同時爲了更適合開發微信小程序，咱們對 CSS 進行了擴充以及修改。)javascript

接着咱們就結合官方給出的代碼具體說一下上面提到的三個文件.php

首先說的是配置文件app.json.下面是官方給出的例子.
```
{
"pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首頁" }, { "pagePath": "pages/logs/logs", "text": "日誌" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true }
```
官方給出了app.json五個配置項列表.(pages(Array), window(Object), tabBar(Object), networkTimeout(Object), debug(Boolean)),接着咱們就詳細的分下一下這幾個配置項.
pages
它的做用是配置小程序的頁面,這個配置項是必填的,它接受一個數組,裏面的每一項都是字符串,從上面給出的代碼: "pages": [ "pages/index/index", "pages/logs/index" ] 能夠看出,每一項分別對應的都是實現文件的路徑以及他的文件名. 注意:這個配置裏面的第一行配置是它的初始頁面,例如上面代碼的初始頁面就是index

window

這個配置項是用來設置小程序的狀態欄、導航條、標題、窗口背景色。他給出了六個屬性(navigationBarBackgroundColor(HexColor), navigationBarTextStyle(String-(black,white)), navigationBarTitleText(String), backgroundColor(HexColor), backgroundTextStyle(String-(dark,light)), enablePullDownRefresh(Boolean)),開發者能夠根據本身的需求來進行配置.
咱們詳細說一下這幾個屬性分別的功能:css

navigationBarBackgroundColor 它是用來設置導航欄背景顏色,這個屬性要輸入的是十六進制顏色值.
navigationBarTextStyle 它是用來導航欄標題顏色的,它的輸入類型是字符串(String),可是如今官網給出的文檔目前僅支持(black和white)這兩種顏色.
navigationBarTitleText 這個屬性是顯示導航欄標題內容的,開發者能夠根據本身的須要來進行設置. - backgroundColor 這個屬性是設置窗口的背景色的,它須要輸入的也是十六進制顏色值的.
backgroundTextStyle 這個屬性個人理解是設置窗口內容的樣式的,官方給出的標準說明是下拉背景字體、loading 圖的樣式,這個屬性同navigationBarTextStyle屬性同樣目前僅支持兩種顏色(dark和light).
enablePullDownRefresh 這個屬性是設置是否開啓下拉刷新,默認是開啓的,注意: 在這個配置文件(app.json)中若是關閉了下拉刷新,當你在你本身開發的頁面中想要設置下拉刷新也是行不通的,也就是說若是你想要在之後頁面中使用下拉刷新這個功能,就必須保證這個配置文件中的這一項設置是打開的.
上面給出的示例代碼:
```
{
"window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" } }
```
顯示出來的效果是這樣的:

這裏寫圖片描述

tabBar

這個配置項是用來配置頁面底部的tab欄的,開發者能夠根據本身的需求來進行配置.html

注意: tabBar是一個數組,只能配置最少2個,最多5個,並且tab欄的順序是按照數組的排序來的.前端

tabBar官方給出了一下五個屬性(color(HexColor), selectedColor(HexColor), backgroundColor(HexColor), borderStyle(String), list(Array) ).java

接下來講說我對這五個屬性的理解:django

color 設置tab上的文字默認顏色
selectedColor 設置tab上的文字選中的顏色
backgroundColor 設置tab的背景顏色
borderStyle 設置邊框的顏色,如今僅支持(black和white)
上面這四個屬性就是按照官方給出的API來設置就能夠,下面說一下list屬性.list屬性接受的是一個數組(Array),在list下面配置的每一項都是一個對象,他們都有如下這四個屬性(pagePath(String), text(String), iconPath( String), selectedIconPath(String)).
pagePath 這個定義的是頁面的路徑,可是這個屬性定義的路徑必須是在pages上定義過的.
text 設置的是按鈕上的文字
iconPath 是定義icon圖片的路徑,這個屬性定義的圖片大小不超過40kbselectedIconPath 定義的是當選中按鈕以後顯示的圖片,一樣圖片的大小不能超過40kb.
下面是官方給出的效果圖:編程

微信小程序

networkTimeout

它是用來設置各類網絡請求的超時時間的,單位是毫秒,官方給出了四個屬性(request, connectSocket, uploadFile, downloadFile)這四個屬性分別定義的是wx.request, wx.connectSocket, wx.uploadFile, downloadFile 這四個API的超時時間.json

debug

若是在app.json將debug配置爲true,那麼在開發者工具的控制檯面板中能夠輸出詳細的調試信息.
以上就是根據官方給出的文檔,我學習以後對app.json配置一些心得,下面咱們在看一下app.js 這個文件.小程序

能夠看到app.js這個文件的後綴是js,沒錯,微信小程序的開發框架在邏輯層用的語言就是JavaScript.可是微信小程序也在JavaScript的基礎上作了一個修改,能夠稱之爲一個新的輪子.這個框架可使開發者更加方便的調用一些微信的功能,例如掃一掃,微信支付等一些微信特有的功能.

咱們接着回到app.js這個文件中來,其餘的稍後再說.

這個文件是整個小程序的入口文件,也能夠說是控制整個小程序生命週期的文件,那麼咱們就不難想象,咱們在這個文件中應該實現的幾個功能,首先咱們確定須要對整個程序進行註冊,正好微信給咱們提供了一個app()來實現對整個程序的註冊,同時app()裏面還實現了對小程序生命週期的監控函數(onLaunch, onShow, onHide), 其中onLaunch是監聽小程序初始化,當初始化完成時會觸發onLaunch,固然這個函數是全局只觸發一次.onShow是監聽小程序的顯示,在小程序啓動時候,或者當你從後臺進入到前臺的時候就會觸發這個函數.而onHide函數是監聽小程序的隱藏的,當你從前臺切換到後臺的時候,會觸發onHide.有了這些一個小程序的實例基本上算是完成了,固然爲了讓開發者加入更多本身的邏輯,微信還提供了讓開發者在app()中加入本身的邏輯,開發者能夠能夠添加任意的函數或數據到 Object 參數中，用 this 能夠訪問.

注意:app()只能定義在app.js中,並且不能註冊多個.

當在app.js中註冊了實例以後,若是你想在本身的邏輯頁面調用它,你能夠用getApp()這個全局函數,這樣你就能夠全局調用app()裏面的數據.

微信給出的官方代碼以下:

var appInstance = getApp() console.log(appInstance.globalData) // I am global data

注意:getApp()獲取裏實例以後,不要私自調用生命週期函數. 並且不要在app.js中用getApp()函數,用this就能夠調用app()裏面的東西.

基本上app.js就這些東西,還有一些API裏面的內容會在後面一一介紹.下面咱們就看一下app.wxss這個文件,通常來講作過網站開發的(我本身是用php來開發的,這是我我的的一點拙見,若有不對請見諒)相信對css寫在單獨的文件中應該不會陌生,這個app.wxss也是相似的,不過他的的配置是針對全局的,也就是說若是你在後面的page中沒有從新配置他,那麼他就會調用這個文件中的樣式設置,可是若是你有我的需求,須要在每一個頁面從新寫樣式,那也不要緊,他會自動覆蓋宰割文件中的樣式.

當你從新建立一個微信小程序他就會出現這幾個文件,以上是我結合官方文檔對他們的一些理解,接下來就是page的邏輯,視圖,配置的一些心得.

page

這一塊就是開發者本身的業務實現文件了. 每個頁面能夠放在一個文件夾中,這個文件夾中通常包括.js, .json, .wxml, .wxss 這四個文件,微信官方還建議這四個文件的名字最好和文件夾的名字一致.這個便於框架自動查找,不須要作更多的配置.

當你開始作頁面的功能的時候這個時候在.js,也須要註冊,微信官方給出Page()這個函數來註冊一個頁面,他接受一個object參數,用其來指定頁面的初始數據,生命週期函數,事件處理函數.須要注意的是當你在註冊這個頁面的時候要肯定在最開始的app.json這個配置文件中已經配置過這個頁面,並且當你對程序有所改變的時候也要確保app.json這個文件中的內容也隨之相應改動.

微信給Page()函數一下幾個屬性(data(Object), onLoad(function), onReady(Function), onShow(Function), onHide(Function), onUpload(Function), onPullDownRefresh(Function)),並且你也能夠添加任意函數或者數據到object參數中,在這個頁面用this便可訪問.

下面就簡單的介紹一下這幾個官方給出的屬性:

data - 實現頁面的初始化數據
onLoad - 是生命週期函數,用來監聽頁面加載,一個頁面只會調用一次,它的參數能夠獲取wx.navigateTo和wx.redirectTo及< navigator/>中的query.
onReady - 一樣是生命週期函數,用來監聽頁面初次渲染完成,一個頁面只會調用一次,表明頁面已經準備穩當,能夠和視圖層進行交互.對頁面的設置請在onReady以後設置,如wx.setNavigationBarTitle.
onShow - 生命週期函數,用來監聽頁面顯示,每次頁面打開都會調用一次.
onHide - 生命週期函數,監聽頁面隱藏'',當wx.navigateTo或者底部tab切換以後調用.
onUpload - 生命週期函數,用來監聽頁面卸載.當wx.navigateTo和 navigateBack的時候調用.
onPullDownRefresh - 頁面相關事件處理函數,用來監聽用戶的下拉動做.可是須要在config的window選項中開啓enablePullDownRefresh,當數據刷新完成以後,能夠用wx.stopPullDownRefresh中止當前頁面的下拉刷新.

下面是微信給出的官方代碼:

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.' }) } })

上面說了用data屬性來設置頁面的初始化數據,可是若是咱們想改變數據裏面的值,怎麼辦??那麼咱們就介紹一個微信官方給咱們提供的setData()函數,這個函數能夠將數據從邏輯層發送到數據層,同時還能夠改變this.data的值.

setData()接受一個對象參數,讓數據以key,value的形式表示將this.data中key對應的值改變成value.下面是微信官方給出的page的生命週期的圖片:

page生命週期圖

在小程序中的全部頁面路由所有由框架進行管理,對於路由的觸發方式以及頁面的生命週期函數能夠經過調用API來進行..

下面咱們就簡單的介紹一下微信小程序的API.

微信小程序框架給咱們提供了豐富的微信原生API,能夠方便的調用微信提供的能力,如獲取用戶信息,本地存儲,支付功能等.

下面是微信關於API提供的說明:

wx.on 開頭的API是監聽某個事件發生的API接口,接受一個CALLBACK函數做爲參數,當事件觸發時,會調用CALLBACK函數.
- 如未有特殊約定,其餘API接口都接受一個object做爲參數.
- OBJECT 能夠指定success,fail,complete來接受接口調用結果.
  
  OBJECT參數
  
  API的具體調用請看微信小程序API文檔
  
  由於如今微信小程序還在內測期間,我也沒有內測號,因此具體的調用API代碼須要在微信小程序開放以後,根據具體的邏輯進行實現.並且微信API文檔已經給的很是清楚,相信調用不會太過困難.

上面的這些就是微信小程序page的頁面註冊以及API功能實現，可是咱們知道光有這些是不夠的，在互聯網發展到如今咱們更加註重的是人機交互，讓用戶有一個更好的體驗纔算是一個好的程序，那麼接下來咱們就講講微信小程序是如何對頁面進行渲染的。

在微信小程序中採用了微信本身原生的渲染方式。微信小程序的頁面佈局採用的是wxml，而後結合基礎組件，事件系統構建出來頁面的結構。

wxml中有數據綁定，條件渲染，列表渲染，模版，事件，引用這幾種方式，下面咱們就具體說說這幾種方式。

數據綁定在上面咱們已經說過了在Page()註冊頁面的時候，裏面會有一個data屬性來定義初始化數據，如今頁面渲染的數據綁定的時候就須要調用data裏面的數據了。下面看一下官方給出的例子。

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

Page({ data: { message: 'Hello MINA!' }})

從上面的代碼能夠看出來在視圖層接受邏輯層的代碼的時候須要用2個大括號把數據的鍵值包起來就能夠獲得數據的值。固然在視圖層還能夠進行運算（三元運算，算術運算），邏輯判斷，字符串運算，並且還能夠在大括號裏面進行組合（數組，對象（雖然能夠隨意組合，可是若是後面的變量名和前面的變量名相同的話，那麼後面的會覆蓋前面的））。

條件渲染顧名思義所謂的條件渲染，就是經過條件來判斷是否須要渲染該代碼塊。條件渲染主要是用到wx:if 和 block wx:if 這兩個，第一個相信好理解，第二個是在block裏面進行條件渲染，這裏咱們特別說明一下< block/>並非一個組件，它僅僅是一個包裝元素，不會在頁面中作任何渲染，只接受控制屬性。和咱們之前的邏輯編程相似，既然有了wx:if ，那麼咱們也會有wx:elseif和wx.else，這幾個組合起來，可使條件渲染更加靈活。

在這裏官方文檔中提到了一個wx:if和hidden的對比，經過合理的運用這兩種方法可使你的程序更優。下面咱們就是說說他們倆的區別：

由於wx:if之中也可能包含數據綁定，因此當wx:if的條件值切換時，框架有一個局部渲染的過程，他會確保條件在切換是銷燬或者從新渲染。同時wx:if也是有惰性的，若是初始渲染條件爲false,框架什麼也不會作，只有在條件第一次變爲真的時候纔會開始渲染。相比之下hidden就簡單的多，組件始終都會被渲染，只是簡單的控制顯示和隱藏，通常來講，wx：if 有更高的切換消耗，而hidden有更高的初始渲染消耗，你能夠根據本身的需求來調用。

列表渲染 -- wx:for

下面咱們就說說wx:for的用法，wx:for綁定一個數組，就可以使用數組中各項數據重複渲染該組件，注意默認數組的當前項的下標變量名默認爲index，數組當前項的變量名爲item，，固然你也能夠根據本身的須要來從新定義這兩個名字，使用wx:for-item能夠指定數組當前元素的變量名，wx:for-index能夠指定數組當前下標的變量名，wx:for也能夠嵌套，這個時候就須要改變默認框架給定義的名字了。

下面是官方給出的事例代碼：

<view wx:for="{{items}}"> {{index}}: {{item.message}}</view>

Page({ data: { items: [{ message: 'foo', }, { message: 'bar' }] }})

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view>

模版

WXML提供模版(template),能夠在模版中定義代碼片斷,而後在不一樣的地方調用.微信小程序的模版能夠用name來命名它的名字,在使用的時候用is來聲明使用的模版,而後將模版所須要的data傳入便可,下面咱們用官方文檔給的代碼來看一下如何聲明及調用模版.

<!-- index: int msg: string time: string --> <template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template>

上面這段代碼能夠看到模版的名字是"msgItem".

<template is="msgItem" data="{{...item}}"/>

在調用的時候使用方法如上,在is屬性加上模版的名字便可.後面還有一個data屬性,而且在裏面還加入數據,下面咱們就看一下下面這段代碼.

Page({ data: { item: { index: 0, msg: 'this is a template', time: '2016-09-15' } }})

也許有的人可能對data屬性裏面數據綁定的內容有點兒疑問,"{{...item}}"這種調用是能夠將上面代碼中的item對象展開,讓數據循環調用該模板.

固然若是模版的功能僅僅是這樣,那麼他的可用性就太差了,事實固然不會是這樣,模版也能夠根據你本身的條件來判斷在那種狀況下渲染那種模版,下面咱們就看一下官方給出的代碼.

<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>

經過上面對條件渲染的介紹,咱們能夠看到在循環掉數組[1,2,3,4,5]以後item數組屬性在三元運算中判斷調用哪個模版.

在這兒再多說一句模版也有本身的做用域,只能使用data傳入的數據,固然data傳入的數據能夠是你本身新建的數據,也能夠是你在配置中寫好的初始化數據.

好了如今咱們說完模版了,可能有的同窗就該想了,我寫好模版以後該如何調用它,若是他們是在一個頁面那確定沒問題,可是這樣的話可用性仍是不好啊,若是我想把模版單獨放在一個頁面,在調用它的時候該怎麼辦啊?不要緊,微信小程序早就考慮到了,那麼咱們接下來就說說引用.

引用

WXML提供兩種引用方式import和include.

接下來咱們就先說說import這種方式,咱們就結合代碼來看,它調用在不一樣頁面的模版消息以下:

<!-- item.wxml --> <template name="item"> <text>{{text}}</text> </template>

在 index.wxml 中引用了 item.wxml，就可使用item模板：

<import src="item.wxml"/> <template is="item" data="{{text: 'forbar'}}"/>

這裏要注意一下,import引用也是有做用域這個概念存在的,它只會定義import目標文件中定義的template,而不會import目標文件import中的template.簡而言之就是import只能引用template而不能引用import.

上面說了import是如何引用的,那麼咱們接着看一下include是怎麼引用的.

include引用和import惟一不一樣點就是他的引用至關於複製,他會複製< template>裏面的所有內容,可是不包含< template>,看一下代碼相信你能夠理解的更加明白.

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

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

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

上面咱們說的視圖層這些方法已經能夠構成一個靜態的頁面了,但咱們如今是21世紀啊,一個沒有人機交互的程序怎麼能在這個世界生存下來了?在用戶體驗至上的今天,微信小程序不可能不考慮到這一點,接下來咱們就說說視圖層的事件方法.

先來講說什麼是事件,相信有的人看到這兒確定是一臉懵逼,你這說的啥玩意兒,說的這麼專業,我還不如看文檔去.那麼咱們就說說什麼是事件.

事件就是一種頁面到邏輯層的通信方式,好比說你的操做想獲得機器的反饋,這時候就用到事件了.事件能夠將用戶的行爲反饋到邏輯層進行處理.

說到這兒不由又有一個問題,那他是怎麼用的呢? 事件能夠綁定到組件上,當觸發事件,就會執行邏輯層對應的事件處理函數,固然爲了更加方便人機交互,用戶還能夠攜帶額外的信息,如id,data等.

可能有人看完剛纔的一段就說了,好了,你剛纔說的事件解釋的差很少了,但是你爲何有冒出一個組件,這讓我這麼理解?

既然說到組件了,咱們就先簡單的瞭解一下,在以後的組件板塊再詳說,先保證你們能看懂什麼是事件就行了.

爲何要有組件呢?組件是框架爲了開發者進行快速的開發而設計的.

那什麼是組件呢? 組件是視圖層的基本組成單元,在微信小程序中組件自帶一些功能與微信風格的樣式,一個組件一般包括開始標籤和結束標籤,屬性是用來修飾這個組件,內容在兩個標籤以內.

<tagname property="value"> Content goes here ... </tagename>

在這裏須要注意一點,組件和屬性都是小寫,而且以"-"進行鏈接.

簡單的介紹一下組件,那咱們繼續說事件.

事件分爲冒泡事件和非冒泡事件,冒泡事件是當一個組件上的事件被觸發後,該事件會向父節點傳遞,而非冒泡事件則不會.

如今微信小程序給出的冒泡事件僅僅有6個(touchstart,touchmove, touchcancel,touchend,tap, longtap),下圖是他們分別對應的觸發條件.

冒泡事件類型

剩下的都屬於非冒泡事件.

接下來咱們就說說事件怎麼用?

事件是經過事件綁定來實現的.它的寫法是以key,value的形式來寫的.key以bind 和catch開頭,而後跟上事件的類型. value 是一個字符串,須要在對應的page中定義同名的函數,否則當觸發事件的時候會報錯.(bind 事件綁定不會阻止冒泡事件向上冒泡,而catch 能夠阻止冒泡事件向上冒泡).

說完了如何進行事件綁定了,咱們再說說,當事件觸發是邏輯層的事件處理函數會收到什麼? 事件處理函數會收到一個事件對象. 那麼這個事件對象裏面都有什麼屬性呢?? 裏面的屬性有(type, timeStamp, target, currentTarget, touches, detail),下面是他們的一些說明:

事件對象屬性

type獲得的是通用事件類型,例如tap.
timeStamp是頁面打開到事件觸發所通過的毫秒數.
target觸發事件的源組件,它包括事件源組件的id,data-開頭自定義屬性的組成的集合(dataset),以及他在座標系統中的偏移量.
currentTarget 觸發事件的當前事件,它包括的內容與target相同.

其餘的屬性按照上面的說明簡單瞭解便可,在這裏咱們說一下target和currentTarget中的dataset,咱們知道在組件中能夠定義數據,這些數據會經過事件傳遞給 SERVICE書寫方式：以data-開頭，多個單詞由連字符-連接，不能有大寫(大寫會自動轉成小寫)如data-element-type，最終在 event.target.dataset 中會將連字符轉成駝峯elementType。用一段代碼來講話相信你們就更清楚了.

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view> Page({ bindViewTap:function(event){ event.target.dataset.alphaBeta == 1 // - 會轉爲駝峯寫法 event.target.dataset.alphabeta == 2 // 大寫會轉爲小寫 } })

我不知道你們感受怎麼樣,要是我本身剛開始看我寫的這一大段內容,我感受我就該罵娘了,不是說麼NO圖NO BB,下面我就給你們上代碼,相信看完以後事件這一塊基本上就明白了.

//視圖層的事件綁定 <view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>

//邏輯層的事件處理函數 Page({ tapName: function(event) { console.log(event) } })

//邏輯層的事件處理函數輸出的信息
{
"type": "tap", "timeStamp": 1252, "target": { "id": "tapTest", "offsetLeft": 0, "offsetTop": 0, "dataset": { "hi": "MINA" } }, "currentTarget": { "id": "tapTest", "offsetLeft": 0, "offsetTop": 0, "dataset": { "hi": "MINA" } }, "touches": [{ "pageX": 30, "pageY": 12, "clientX": 30, "clientY": 12, "screenX": 112, "screenY": 151 }], "detail": { "x": 30, "y": 12}}