无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

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

   pages

   它的作用是配置小程序的頁面,這個配置項是必填的,它接受一個數(shù)組,里面的每一項都是字符串,從上面給出的代碼: "pages": [ "pages/index/index", "pages/logs/index" ] 可以看出,每一項分別對應(yīng)的都是實現(xiàn)文件的路徑以及他的文件名. 注意:這個配置里面的第一行配置是它的初始頁面,例如上面代碼的初始頁面就是index

window

這個配置項是用來設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。他給出了六個屬性(navigationBarBackgroundColor(HexColor), navigationBarTextStyle(String-(black,white)), navigationBarTitleText(String), backgroundColor(HexColor), backgroundTextStyle(String-(dark,light)), enablePullDownRefresh(Boolean)),開發(fā)者可以根據(jù)自己的需求來進行配置.
我們詳細說一下這幾個屬性分別的功能:

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

tabBar

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

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

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

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

• color 設(shè)置tab上的文字默認(rèn)顏色
• selectedColor 設(shè)置tab上的文字選中的顏色
• backgroundColor 設(shè)置tab的背景顏色

• borderStyle 設(shè)置邊框的顏色,現(xiàn)在僅支持(black和white)
  上面這四個屬性就是按照官方給出的API來設(shè)置就可以,下面說一下list屬性.list屬性接受的是一個數(shù)組(Array),在list下面配置的每一項都是一個對象,他們都有以下這四個屬性(pagePath(String), text(String), iconPath( String), selectedIconPath(String)).
  pagePath 這個定義的是頁面的路徑,但是這個屬性定義的路徑必須是在pages上定義過的.
  text 設(shè)置的是按鈕上的文字
  iconPath 是定義icon圖片的路徑,這個屬性定義的圖片大小不超過40kb selectedIconPath 定義的是當(dāng)選中按鈕之后顯示的圖片,同樣圖片的大小不能超過40kb.
  下面是官方給出的效果圖:

networkTimeout

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

debug

如果在app.json將debug配置為true,那么在開發(fā)者工具的控制臺面板中可以輸出詳細的調(diào)試信息.
以上就是根據(jù)官方給出的文檔,我學(xué)習(xí)之后對app.json配置一些心得,下面我們在看一下app.js 這個文件.

可以看到app.js這個文件的后綴是js,沒錯,微信小程序的開發(fā)框架在邏輯層用的語言就是JavaScript.但是微信小程序也在JavaScript的基礎(chǔ)上做了一個修改,可以稱之為一個新的輪子.這個框架可以使開發(fā)者更加方便的調(diào)用一些微信的功能,例如掃一掃,微信支付等一些微信特有的功能.

我們接著回到app.js這個文件中來,其他的稍后再說.

這個文件是整個小程序的入口文件,也可以說是控制整個小程序生命周期的文件,那么我們就不難想象,我們在這個文件中應(yīng)該實現(xiàn)的幾個功能,首先我們肯定需要對整個程序進行注冊,正好微信給我們提供了一個app()來實現(xiàn)對整個程序的注冊,同時app()里面還實現(xiàn)了對小程序生命周期的監(jiān)控函數(shù)(onLaunch, onShow, onHide), 其中onLaunch是監(jiān)聽小程序初始化,當(dāng)初始化完成時會觸發(fā)onLaunch,當(dāng)然這個函數(shù)是全局只觸發(fā)一次.onShow是監(jiān)聽小程序的顯示,在小程序啟動時候,或者當(dāng)你從后臺進入到前臺的時候就會觸發(fā)這個函數(shù).而onHide函數(shù)是監(jiān)聽小程序的隱藏的,當(dāng)你從前臺切換到后臺的時候,會觸發(fā)onHide.有了這些一個小程序的實例基本上算是完成了,當(dāng)然為了讓開發(fā)者加入更多自己的邏輯,微信還提供了讓開發(fā)者在app()中加入自己的邏輯,開發(fā)者可以可以添加任意的函數(shù)或數(shù)據(jù)到 Object 參數(shù)中，用 this 可以訪問.

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

當(dāng)在app.js中注冊了實例之后,如果你想在自己的邏輯頁面調(diào)用它,你可以用getApp()這個全局函數(shù),這樣你就可以全局調(diào)用app()里面的數(shù)據(jù).

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

注意:getApp()獲取里實例之后,不要私自調(diào)用生命周期函數(shù). 而且不要在app.js中用getApp()函數(shù),用this就可以調(diào)用app()里面的東西.

基本上app.js就這些東西,還有一些API里面的內(nèi)容會在后面一一介紹.下面我們就看一下app.wxss這個文件,一般來說做過網(wǎng)站開發(fā)的(我自己是用php來開發(fā)的,這是我個人的一點拙見,如有不對請見諒)相信對css寫在單獨的文件中應(yīng)該不會陌生,這個app.wxss也是類似的,不過他的的配置是針對全局的,也就是說如果你在后面的page中沒有重新配置他,那么他就會調(diào)用這個文件中的樣式設(shè)置,但是如果你有個人需求,需要在每個頁面重新寫樣式,那也沒關(guān)系,他會自動覆蓋宰割文件中的樣式.

當(dāng)你重新創(chuàng)建一個微信小程序他就會出現(xiàn)這幾個文件,以上是我結(jié)合官方文檔對他們的一些理解,接下來就是page的邏輯,視圖,配置的一些心得.

page

這一塊就是開發(fā)者自己的業(yè)務(wù)實現(xiàn)文件了. 每一個頁面可以放在一個文件夾中,這個文件夾中一般包括.js, .json, .wxml, .wxss 這四個文件,微信官方還建議這四個文件的名字最好和文件夾的名字一致.這個便于框架自動查找,不需要做更多的配置.

當(dāng)你開始做頁面的功能的時候這個時候在.js,也需要注冊,微信官方給出Page()這個函數(shù)來注冊一個頁面,他接受一個object參數(shù),用其來指定頁面的初始數(shù)據(jù),生命周期函數(shù),事件處理函數(shù).需要注意的是當(dāng)你在注冊這個頁面的時候要確定在最開始的app.json這個配置文件中已經(jīng)配置過這個頁面,而且當(dāng)你對程序有所改變的時候也要確保app.json這個文件中的內(nèi)容也隨之相應(yīng)改動.

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

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

• data - 實現(xiàn)頁面的初始化數(shù)據(jù)
• onLoad - 是生命周期函數(shù),用來監(jiān)聽頁面加載,一個頁面只會調(diào)用一次,它的參數(shù)可以獲取wx.navigateTo和wx.redirectTo及< navigator/>中的query.
• onReady - 同樣是生命周期函數(shù),用來監(jiān)聽頁面初次渲染完成,一個頁面只會調(diào)用一次,代表頁面已經(jīng)準(zhǔn)備妥當(dāng),可以和視圖層進行交互.對頁面的設(shè)置請在onReady之后設(shè)置,如wx.setNavigationBarTitle.
• onShow - 生命周期函數(shù),用來監(jiān)聽頁面顯示,每次頁面打開都會調(diào)用一次.
• onHide - 生命周期函數(shù),監(jiān)聽頁面隱藏'',當(dāng)wx.navigateTo或者底部tab切換之后調(diào)用.
• onUpload - 生命周期函數(shù),用來監(jiān)聽頁面卸載.當(dāng)wx.navigateTo和 navigateBack的時候調(diào)用.
• onPullDownRefresh - 頁面相關(guān)事件處理函數(shù),用來監(jiān)聽用戶的下拉動作.但是需要在config的window選項中開啟enablePullDownRefresh,當(dāng)數(shù)據(jù)刷新完成之后,可以用wx.stopPullDownRefresh停止當(dāng)前頁面的下拉刷新.

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

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

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

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

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

列表渲染 -- wx:for

下面我們就說說wx:for的用法，wx:for綁定一個數(shù)組，就可使用數(shù)組中各項數(shù)據(jù)重復(fù)渲染該組件，注意默認(rèn)數(shù)組的當(dāng)前項的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項的變量名為item，，當(dāng)然你也可以根據(jù)自己的需要來重新定義這兩個名字，使用wx:for-item可以指定數(shù)組當(dāng)前元素的變量名，wx:for-index可以指定數(shù)組當(dāng)前下標(biāo)的變量名，wx:for也可以嵌套，這個時候就需要改變默認(rèn)框架給定義的名字了。

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

模版

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

<!--

  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}}"/>

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

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

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

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

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

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

引用

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

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

<!-- 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目標(biāo)文件中定義的template,而不會import目標(biāo)文件import中的template.簡而言之就是import只能引用template而不能引用import.

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

include引用和import唯一不同點就是他的引用相當(dāng)于復(fù)制,他會復(fù)制< template>里面的全部內(nèi)容,但是不包含< template>,看一下代碼相信你可以理解的更加明白.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

現(xiàn)在微信小程序給出的冒泡事件僅僅有6個(touchstart,touchmove, touchcancel,touchend,tap, longtap),下圖是他們分別對應(yīng)的觸發(fā)條件.

冒泡事件類型

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

接下來我們就說說事件怎么用?

事件是通過事件綁定來實現(xiàn)的.它的寫法是以key,value的形式來寫的.key以bind 和catch 開頭,然后跟上事件的類型. value 是一個字符串,需要在對應(yīng)的page中定義同名的函數(shù),不然當(dāng)觸發(fā)事件的時候會報錯.(bind 事件綁定不會阻止冒泡事件向上冒泡,而catch 可以阻止冒泡事件向上冒泡).

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

事件對象屬性

• type得到的是通用事件類型,例如tap.
• timeStamp是頁面打開到事件觸發(fā)所經(jīng)過的毫秒數(shù).
• target觸發(fā)事件的源組件,它包括事件源組件的id,data-開頭自定義屬性的組成的集合(dataset),以及他在坐標(biāo)系統(tǒng)中的偏移量.
• currentTarget 觸發(fā)事件的當(dāng)前事件,它包括的內(nèi)容與target相同.

其他的屬性按照上面的說明簡單了解即可,在這里我們說一下target和currentTarget中的dataset,我們知道在組件中可以定義數(shù)據(jù),這些數(shù)據(jù)會通過事件傳遞給 SERVICE書寫方式： 以data-開頭，多個單詞由連字符-鏈接，不能有大寫(大寫會自動轉(zhuǎn)成小寫)如data-element-type，最終在 event.target.dataset 中會將連字符轉(zhuǎn)成駝峰elementType。用一段代碼來說話相信大家就更清楚了.

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

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

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

//視圖層的事件綁定

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>

//邏輯層的事件處理函數(shù)

Page({ 
  tapName: function(event) { 
    console.log(event)
 }
})

//邏輯層的事件處理函數(shù)輸出的信息

//邏輯層的事件處理函數(shù)輸出的信息
{
"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}}

到這兒WXML的頁面結(jié)構(gòu)就說完了,接著我們簡單說說WXSS就基本說完了.

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

WXSS的樣式導(dǎo)入使用@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑，用;表示語句結(jié)束.剩下的內(nèi)容基本上和css相差不大,有興趣的可以看一下官方文檔WXSS