微信小程序，開發大起底

作者簡介：張智超，北京微函工坊開發工程師，CSDN微信開發知識庫特邀編輯。微信小程序愛好者。

感謝@翟東平 @qq_31383345 @nigelyq 等熱情參與和共建

責編：CSDN知識圖譜小助手

「小程序」是什么

張小龍在朋友圈里這樣解釋道：小程序是一種不需要下載安裝即可使用的應用，它實現了應用「觸手可及」的夢想，用戶掃一掃或搜一下即可打開應用。也體現了「用完即走」的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。

微信小程序是一種全新的連接用戶與服務的方式，它可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。

我們將從以下幾個角度來起底小程序開發

「微信開發」知識圖譜

微信開發需要學習哪些知識點，點擊看具體內容

入口文件

首先從官方文檔給的框架說起,微信小程序官方文檔給出了app.js, app.json, app.wxss，先從這三個文件說起.

• app.json 可以對小程序進行全局配置,決定頁面文件的路徑,窗口表現,設置網絡超時時間,設置多tab等.
• app.js 整個小程序的入口文件,開發者的邏輯代碼在這里面實現,同時在這個文件夾里面可以定義全局變量.
• app.wxss 小程序的公共樣式表.(為了適應廣大的前端開發者，我們的 WXSS 具有 CSS 大部分特性。 同時為了更適合開發微信小程序，我們對 CSS 進行了擴充以及修改。)

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

首先是配置文件 app.json

下面是官方給出的例子

{
  quot;pagesquot;: [
    quot;pages/index/indexquot;,
    quot;pages/logs/indexquot;
  ],
  quot;windowquot;: {
    quot;navigationBarTitleTextquot;: quot;Demoquot;
  },
  quot;tabBarquot;: {
    quot;listquot;: [{
      quot;pagePathquot;: quot;pages/index/indexquot;,
      quot;textquot;: quot;首頁quot;
    }, {
      quot;pagePathquot;: quot;pages/logs/logsquot;,
      quot;textquot;: quot;日志quot;
    }]
  },
  quot;networkTimeoutquot;: {
    quot;requestquot;: 10000,
    quot;downloadFilequot;: 10000
  },
  quot;debugquot;: true
}

官方給出了app.json五個配置項列表.( pages(Array), window(Object), tabBar(Object), networkTimeout(Object), debug(Boolean) ),接著我們就詳細的分下一下這幾個配置項.

1. pages

quot;pagesquot;: [ 

                       quot;pages/index/indexquot;, 

                       quot;pages/logs/indexquot; 

                      ]

2. window

這個配置項是用來設置小程序的狀態欄、導航條、標題、窗口背景色。

他給出了六個屬性( navigationBarBackgroundColor(HexColor), navigationBarTextStyle(String-(black,white)), navigationBarTitleText(String), backgroundColor(HexColor), backgroundTextStyle(String-(dark,light)), enablePullDownRefresh(Boolean) ),開發者可以根據自己的需求來進行配置.

我們詳細說一下這幾個屬性分別的功能:

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

{
  quot;windowquot;:{
    quot;navigationBarBackgroundColorquot;: quot;#ffffffquot;,
    quot;navigationBarTextStylequot;: quot;blackquot;,
    quot;navigationBarTitleTextquot;: quot;微信接口功能演示quot;,
    quot;backgroundColorquot;: quot;#eeeeeequot;,
    quot;backgroundTextStylequot;: quot;lightquot;
  }
}

顯示效果

3.tabBar

這個配置項是用來配置頁面底部的tab欄的,開發者可以根據自己的需求來進行配置.

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

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

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

• 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圖片的路徑,這個屬性定義的圖片大小不超過40kb

  selectedIconPath定義的是當選中按鈕之后顯示的圖片,同樣圖片的大小不能超過40kb.

  下面是官方給出的效果圖:

  

4.networkTimeout

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

5.ebug

如果在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及lt; navigator/gt;中的query.
• onReady - 同樣是生命周期函數,用來監聽頁面初次渲染完成,一個頁面只會調用一次,代表頁面已經準備妥當,可以和視圖層進行交互.對頁面的設置請在onReady之后設置,如wx.setNavigationBarTitle.
• onShow - 生命周期函數,用來監聽頁面顯示,每次頁面打開都會調用一次.
• onHide - 生命周期函數,監聽頁面隱藏”,當wx.navigateTo或者底部tab切換之后調用.
• onUpload - 生命周期函數,用來監聽頁面卸載.當wx.navigateTo和 navigateBack的時候調用.
• onPullDownRefresh - 頁面相關事件處理函數,用來監聽用戶的下拉動作.但是需要在config的window選項中開啟enablePullDownRefresh,當數據刷新完成之后,可以用wx.stopPullDownRefresh停止當前頁面的下拉刷新.
  下面是微信給出的官方代碼:

Page({
  data: {
    text: quot;This is page data.quot;
  },
  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的生命周期的圖片:

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

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

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

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

• wx.on 開頭的API是監聽某個事件發生的API接口,接受一個CALLBACK函數作為參數,當事件觸發時,會調用CALLBACK函數.
• 如未有特殊約定,其他API接口都接受一個object作為參數.
• OBJECT 可以指定success,fail,complete來接受接口調用結果.
  

API的具體調用請看 微信小程序API文檔

因為現在微信小程序還在內測期間,我也沒有內測號,所以具體的調用API代碼需要在微信小程序開放之后,根據具體的邏輯進行實現.而且微信API文檔已經給的非常清楚,相信調用不會太過困難.

「小程序」頁面渲染

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

在微信小程序中采用了微信自己原生的渲染方式。微信小程序的頁面布局采用的是wxml，然后結合基礎組件，事件系統構建出來頁面的結構。

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

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

lt;viewgt; {{ message }} lt;/viewgt;

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

從上面的代碼可以看出來在視圖層接受邏輯層的代碼的時候需要用2個大括號把數據的鍵值包起來就可以得到數據的值。當然在視圖層還可以進行運算（三元運算，算術運算），邏輯判斷，字符串運算，而且還可以在大括號里面進行組合（數組，對象（ 雖然可以隨意組合，但是如果后面的變量名和前面的變量名相同的話，那么后面的會覆蓋前面的 ））。

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

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

因為wx:if之中也可能包含數據綁定，所以當wx:if的條件值切換時，框架有一個局部渲染的過程，他會確保條件在切換是銷毀或者重新渲染。同時wx:if也是有惰性的，如果初始渲染條件為false,框架什么也不會做，只有在條件第一次變為真的時候才會開始渲染。相比之下hidden就簡單的多，組件始終都會被渲染，只是簡單的控制顯示和隱藏，一般來說，wx：if 有更高的切換消耗，而hidden有更高的初始渲染消耗，你可以根據自己的需求來調用。

lt;view wx:for=quot;{{items}}quot;gt;
  {{index}}: {{item.message}}
lt;/viewgt;

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

lt;view wx:for=quot;{{array}}quot; wx:for-index=quot;idxquot; wx:for-item=quot;itemNamequot;gt;
  {{idx}}: {{itemName.message}}
lt;/viewgt;

模版

WXML提供模版(template),可以在模版中定義代碼片段,然后在不同的地方調用.微信小程序的模版可以用name來命名它的名字,在使用的時候用is來聲明使用的模版,然后將模版所需要的data傳入即可,下面我們用官方文檔給的代碼來看一下如何聲明及調用模版.

lt;!--
  index: int
  msg: string
  time: string
--gt;
lt;template name=quot;msgItemquot;gt;
  lt;viewgt;
    lt;textgt; {{index}}: {{msg}} lt;/textgt;
    lt;textgt; Time: {{time}} lt;/textgt;
  lt;/viewgt;
lt;/templategt;

上面這段代碼可以看到模版的名字是”msgItem”.

lt;template is=quot;msgItemquot; data=http://www.tuicool.com/articles/quot;{{...item}}quot;/gt;

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

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

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

當然如果模版的功能僅僅是這樣,那么他的可用性就太差了,事實當然不會是這樣,模版也可以根據你自己的條件來判斷在那種情況下渲染那種模版,下面我們就看一下官方給出的代碼.

lt;template name=quot;oddquot;gt;
  lt;viewgt; odd lt;/viewgt;
lt;/templategt;
lt;template name=quot;evenquot;gt;
  lt;viewgt; even lt;/viewgt;
lt;/templategt;

lt;block wx:for=quot;{{[1, 2, 3, 4, 5]}}quot;gt;
    lt;template is=quot;{{item % 2 == 0 ? 'even' : 'odd'}}quot;/gt;
lt;/blockgt;

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

在這兒再多說一句模版也有自己的作用域,只能使用data傳入的數據,當然data傳入的數據可以是你自己新建的數據,也可以是你在配置中寫好的初始化數據.

好了現在我們說完模版了,可能有的同學就該想了,我寫好模版之后該如何調用它,如果他們是在一個頁面那肯定沒問題,但是這樣的話可用性還是很差啊,如果我想把模版單獨放在一個頁面,在調用它的時候該怎么辦啊?沒關系,微信小程序早就考慮到了,那么我們接下來就說說 引用 .

引用

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

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

lt;!-- item.wxml --gt;
lt;template name=quot;itemquot;gt;
  lt;textgt;{{text}}lt;/textgt;
lt;/templategt;

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

lt;import src=http://www.tuicool.com/articles/quot;item.wxmlquot;/gt;
lt;template is=quot;itemquot; data=quot;{{text:'forbar'}}quot;/gt;

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

上面說了import是如何引用的,那么我們接著看一下include是怎么引用的.

include引用和import唯一不同點就是他的引用相當于復制,他會復制lt; templategt;里面的全部內容,但是不包含lt; templategt;,看一下代碼相信你可以理解的更加明白.

lt;!-- index.wxml --gt;
lt;include src=http://www.tuicool.com/articles/quot;header.wxmlquot;/gt;
lt;viewgt; body lt;/viewgt;
lt;include src=quot;footer.wxmlquot;/gt;

lt;!-- header.wxml --gt;
lt;viewgt; header lt;/viewgt;

lt;!-- footer.wxml --gt;
lt;viewgt; footer lt;/viewgt;

「小程序」的事件

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

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

事件就是一種頁面到邏輯層的通訊方式,比如說你的操作想得到機器的反饋,這時候就用到事件了.事件可以將用戶的行為反饋到邏輯層進行處理.

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

「小程序」的組件

可能有人看完剛才的一段就說了,好了,你剛才說的事件解釋的差不多了,可是你為什么有冒出一個 組件 ,這讓我這么理解?

既然說到組件了,我們就先簡單的了解一下,在之后的組件板塊再詳說,先保證大家能看懂什么是事件就好了.

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

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

lt;tagname property=quot;valuequot;gt;
  Content goes here ...
lt;/tagenamegt;

在這里需要注意一點,組件和屬性都是小寫,并且以”-“進行連接.

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

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

現在微信小程序給出的冒泡事件僅僅有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。用一段代碼來說話相信大家就更清楚了.

lt;view data-alpha-beta=quot;1quot; data-alphaBeta=quot;2quot; bindtap=quot;bindViewTapquot;gt; DataSet Test lt;/viewgt;

Page({
  bindViewTap:function(event){
    event.target.dataset.alphaBeta == 1 // - 會轉為駝峰寫法
    event.target.dataset.alphabeta == 2 // 大寫會轉為小寫
  }
})

我不知道大家感覺怎么樣,要是我自己剛開始看我寫的這一大段內容,我感覺我就該罵娘了,不是說么NO圖NO BB,下面我就給大家上代碼,相信看完之后事件這一塊基本上就明白了.

//視圖層的事件綁定
lt;view id=quot;tapTestquot; data-hi=quot;MINAquot; bindtap=quot;tapNamequot;gt; Click me! lt;/viewgt;

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

//邏輯層的事件處理函數輸出的信息
{
quot;typequot;: quot;tapquot;,
quot;timeStampquot;: 1252,
quot;targetquot;: {
  quot;idquot;: quot;tapTestquot;,
  quot;offsetLeftquot;: 0,
  quot;offsetTopquot;: 0,
  quot;datasetquot;: {
   quot;hiquot;: quot;MINAquot;
  }
},
quot;currentTargetquot;: {
  quot;idquot;: quot;tapTestquot;,
  quot;offsetLeftquot;: 0,
  quot;offsetTopquot;: 0,
  quot;datasetquot;: {
    quot;hiquot;: quot;MINAquot;
  }
},
quot;touchesquot;: [{
  quot;pageXquot;: 30,
  quot;pageYquot;: 12,
  quot;clientXquot;: 30,
  quot;clientYquot;: 12,
  quot;screenXquot;: 112,
  quot;screenYquot;: 151
}],
quot;detailquot;: {
  quot;xquot;: 30,
  quot;yquot;: 12
}
}

「小程序」的樣式設置

在WXSS中引入了新的 尺寸單位 rpx 它規定1rpx=0.5px = 1物理像素

WXSS的樣式導入使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。剩下的內容基本上和css相差不大,有興趣的可以看一下官方文檔 WXSS

「小程序」精品資源推薦

小程序案例分析解讀@ qq_31383345 專欄

小程序源碼下載@nigelyq 代碼包

小程序精品課程@翟東平 系列課程

如果你有更好的微信小程序內容分享，歡迎訪問CSDN微信開發知識庫

覆蓋50個領域，精品內容一鍵直達