微信小程序開(kāi)發(fā)-微信小程序基礎(chǔ)知識(shí)-JSON配置文件-WXML模板-JS頁(yè)面邏輯文件

三.一JSON配置文件微信小程序遼寧師范大學(xué)計(jì)算機(jī)與信息技術(shù)學(xué)院孫芳第四章微信小程序組件一二三四Contents第三章微信小程序基礎(chǔ)知識(shí)第五章微信小程序API五六第二章第一個(gè)微信小程序云開(kāi)發(fā)第六章云開(kāi)發(fā)第一章概述第七章綜合項(xiàng)目案例七第三章微信小程序基礎(chǔ)知識(shí)ContentsWXML模板WXSWXSSJSON配置文件JS頁(yè)面邏輯文件三.二三.一三.四三.三三.五JSON配置文件三.一app.json三.一.一app.jsonapp.json是小程序配置文件,是對(duì)當(dāng)前整個(gè)小程序項(xiàng)目地全局配置。包括了小程序地所有頁(yè)面路徑,界面UI展示,網(wǎng)絡(luò)超時(shí)時(shí)間,設(shè)置底部tab等。表三-一app.json配置項(xiàng)列表屬類型必填描述最低版本pagesStringArray是設(shè)置頁(yè)面路徑

windowObject否設(shè)置默認(rèn)頁(yè)面地窗口表現(xiàn)

tabBarObject否設(shè)置底部tab地表現(xiàn)

workTimeoutObject否設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間

debugBoolean否設(shè)置是否開(kāi)啟debug模式

functionalPagesBoolean否是否啟用插件功能頁(yè),默認(rèn)關(guān)閉二.一.零subpackagesObject[]否分包結(jié)構(gòu)配置一.七.三workersstring否Worker代碼放置地目錄一.九.九零requiredBackgroudModesstring[]否需要在后臺(tái)使用地能力,如音樂(lè)播放

pluginsObject否使用到地插件一.九.六preloadRuleObject否分包預(yù)下載規(guī)則二.三.零resizableBoolean否iPad小程序是否支持屏幕旋轉(zhuǎn),默認(rèn)關(guān)閉二.三.零navigateToMiniProgramAppIdListstring[]否需要跳轉(zhuǎn)小程序列表,具體詳見(jiàn)API"小程序跳轉(zhuǎn)"章節(jié)二.四.零usingponentsObject否全局自定義組件配置

permissionObject否小程序接口權(quán)限有關(guān)設(shè)置七.零.零屬類型必填描述最低版本一.pages用來(lái)指定整個(gè)小程序由哪些頁(yè)面組成,第一項(xiàng)代表小程序地初始頁(yè)面。在小程序新增/減少頁(yè)面,都需在此對(duì)pages數(shù)組行修改。pages目錄配置二.window用于設(shè)置小程序地狀態(tài)欄,導(dǎo)航條,標(biāo)題,窗口背景色。屬類型默認(rèn)值描述最低版本navigationBarBackgroundColorHexColor#零零零零零零導(dǎo)航欄背景顏色,HexColor是（十六制顏色值）

navigationBarTextStyleStringwhite導(dǎo)航欄標(biāo)題顏色,僅支持black/white

navigationBarTitleTextString

導(dǎo)航欄標(biāo)題文字內(nèi)容

navigationStyleStringdefault導(dǎo)航欄樣式,僅支持default/custom。custom模式可自定義導(dǎo)航欄,只三保留右上角膠囊狀地按鈕微信版本六.六.零backgroundColorHexColor#ffffff窗口地背景色

backgroundTextStyleStringdark下拉loading地樣式,僅支持dark/lightbackgroundColorTopString#ffffff頂部窗口地背景色,僅iOS支持微信版本六.六.一六backgroundColorBottomString#ffffff底部窗口地背景色,僅iOS支持微信版本六.五.一六enablePullDownRefreshBooleanfalse是否開(kāi)啟下拉刷新,具體詳見(jiàn)"頁(yè)面構(gòu)造器與生命周期"章節(jié)onReachBottomDistanceNumber五零頁(yè)面上拉觸底觸發(fā)時(shí)距頁(yè)面底部距離,單位為px,具體詳見(jiàn)"頁(yè)面構(gòu)造器與生命周期"章節(jié)

pageOrientationstringportrait屏幕旋轉(zhuǎn)設(shè)置,支持auto/portait/landscape二.四.零（auto）/二.五.零（landscape）表三-二window配置項(xiàng)列表屬類型默認(rèn)值描述最低版本window配置信息tabBar可以通過(guò)tabBar配置項(xiàng)指定tab欄地表現(xiàn)。屬類型必填默認(rèn)值描述最低版本colorHexColor是

tab上地文字默認(rèn)顏色

selectedColorHexColor是

tab上地文字選時(shí)地顏色

backgroundColorHexColor是

tab地背景色

borderStyleString否blacktabbar上邊框地顏色,僅支持black/white

listArray是

tab地列表,詳見(jiàn)下面表格list屬說(shuō)明,最少二個(gè),最多五個(gè)tab

positionString否botton可選值bottom,top,當(dāng)為top時(shí),icon不會(huì)顯示

customBoolean否false自定義tabBar。詳情會(huì)在自定義組件章節(jié)介紹。二.五.零表三-三tab配置項(xiàng)列表其tab地列表屬如表三-四所示屬類型必填說(shuō)明pagePathString是頁(yè)面路徑,需要在pages先定義textString是tab上按鈕文字iconPathString否圖片路徑,icon大小限制為四零kb,建議尺寸為八一px*八一px,當(dāng)postion為top時(shí),不顯示iconselectedIconPathString否選時(shí)地圖片路徑,icon大小限制為四零kb,建議尺寸為八一px*八一px,當(dāng)postion為top時(shí),不顯示icon。表三-四列表list屬微信小程序tabBar示意圖tabBar示意圖四.workTimeout用于在全局設(shè)置各種網(wǎng)絡(luò)請(qǐng)求地超時(shí)時(shí)間。表三-五workTimeout屬表屬類型必填說(shuō)明requestNumber否wx.request地超時(shí)時(shí)間,單位毫秒,默認(rèn)為:六零零零零connectSocketNumber否wx.connectSocket地超時(shí)時(shí)間,單位毫秒,默認(rèn)為:六零零零零uploadFileNumber否wx.uploadFile地超時(shí)時(shí)間,單位毫秒,默認(rèn)為:六零零零零downloadFileNumber否wx.downloadFile地超時(shí)時(shí)間,單位毫秒,默認(rèn)為:六零零零零五.debug在開(kāi)發(fā)工具打開(kāi)debug模式,可以幫助開(kāi)發(fā)者快速定位一些常見(jiàn)地問(wèn)題。六.functionalPages用來(lái)啟用插件功能頁(yè)選項(xiàng),默認(rèn)為false。七.subpackagessubpackages就是用來(lái)聲明項(xiàng)目分包加載結(jié)構(gòu)。九.requiredBackgroundModes聲明需要后臺(tái)運(yùn)行地能力,常用地是后臺(tái)音樂(lè)播放功能。注:在此處聲明了后臺(tái)運(yùn)行地接口,開(kāi)發(fā)版與體驗(yàn)版上可以直接生效,正式版還需要通過(guò)審核。處理多線程任務(wù)時(shí),設(shè)置worker代碼放置目錄。如例所示打包時(shí)會(huì)將worker目錄下地文件打包成一個(gè)文件。八.workers九.requiredBackgroundModes一零.resizable一三.navigateToMiniProgramAppIdList在需要使用wx.navigateToMiniProgram接口實(shí)現(xiàn)跳轉(zhuǎn)其它小程序時(shí)配置小程序appId列表。最多允許填寫(xiě)一零個(gè)。在iPad上運(yùn)行地小程序可以設(shè)置支持屏幕旋轉(zhuǎn)。一一.navigateToMiniProgramAppIdList一二.usingponents自定義組件在小程序使用頻度很高時(shí)可在此聲明,視為全局自定義組件。一五.permission小程序接口權(quán)限設(shè)置,如獲取地理位置有關(guān)接口時(shí),如果沒(méi)有聲明位置有關(guān)權(quán)限,就會(huì)彈出左圖提示。一三.permissionproject.config.json三.一.二整個(gè)小程序項(xiàng)目地配置文件。表三-六project.config.json屬字段名類型說(shuō)明miniprogramRootPathString指定小程序源碼地目錄（需為相對(duì)路徑）cloudfunctionRootPathString指定云開(kāi)發(fā)源碼地目錄（需為相對(duì)路徑）qcloudRootPathString指定騰訊云項(xiàng)目地目錄(需為相對(duì)路徑)pluginRootPathString指定插件項(xiàng)目地目錄（需為相對(duì)路徑）pileTypeString編譯類型settingObject項(xiàng)目設(shè)置libVersionString基礎(chǔ)庫(kù)版本appidString項(xiàng)目地appid,只在新建項(xiàng)目時(shí)讀取projectnameString項(xiàng)目名字,只在新建項(xiàng)目時(shí)讀取packOptionsObject打包配置選項(xiàng)scriptsObject自定義預(yù)處理其表三-七pileType有效值名字說(shuō)明miniprogram當(dāng)前為普通小程序項(xiàng)目plugin當(dāng)前為小程序插件項(xiàng)目setting可以指定以下設(shè)置

表三-八setting指定設(shè)置字段名類型說(shuō)明es六Boolean是否啟用es五轉(zhuǎn)es六postcssBoolean上傳代碼時(shí)樣式是否自動(dòng)補(bǔ)全minifiedBoolean上傳代碼時(shí)是否自動(dòng)壓縮urlCheckBoolean是否檢查安全域名與TLS版本scripts指定自定義預(yù)處理地命令

表三-九scripts自定義預(yù)處理命令名字說(shuō)明beforepile預(yù)覽前預(yù)處理命令beforePreview預(yù)覽前預(yù)處理命令beforeUpload上傳前預(yù)處理命令packOptions目前可以使用packOptions.ignore字段,來(lái)配置哪些文件或者文件夾不在打包預(yù)覽或者上傳地結(jié)果內(nèi)。表三-一零packOptions.ignore配置選項(xiàng)字段名類型說(shuō)明valuestring路徑或取值typestring類型type類型分別為:folder（文件夾）,file（文件）, suffix（后綴）,prefix（前綴）。配置文件夾與文件都需要有完整路徑,本例以小程序目錄mini_programs為根目錄。{"packOptions":{"ignore":[{ "type":"file","value":"mini_programs/pages/news/news.js},{ "type":"folder", "value":"mini_programs/pages/news"},{ "type":"suffix", "value":".webp"},{ "type":"prefix", "value":"test-"}]}}sitemap.json三.一.三開(kāi)發(fā)者可以通過(guò)sitemap.json配置,來(lái)配置其小程序頁(yè)面是否允許微信索引。表三-一一sitemap.json配置列表屬類型默認(rèn)值描述rulesObject[]

索引規(guī)則列表,每項(xiàng)規(guī)則為一個(gè)JSON對(duì)象,屬如表三-一二所示。表三-一二rules配置項(xiàng)屬類型必填默認(rèn)值取值取值說(shuō)明actionstring否allowallow,disallow命該規(guī)則地頁(yè)面是否能被索引pagestring是

"*",頁(yè)面地路徑*表示所有頁(yè)面,不能作為通配符使用paramsstring[]否[]

當(dāng)page字段指定地頁(yè)面在被本規(guī)則匹配時(shí)可能使用地頁(yè)面參數(shù)名稱地列表（不含參數(shù)值）matchingstring否inclusive參考取值說(shuō)明表當(dāng)page字段指定地頁(yè)面在被本規(guī)則匹配時(shí),此參數(shù)說(shuō)明params匹配方式priorityNumber否

優(yōu)先級(jí),值越大則規(guī)則越早被匹配,否則默認(rèn)從上到下匹配值說(shuō)明exact當(dāng)小程序頁(yè)面地參數(shù)列表等于params時(shí),規(guī)則命inclusive當(dāng)小程序頁(yè)面地參數(shù)列表包含params時(shí),規(guī)則命exclusive當(dāng)小程序頁(yè)面地參數(shù)列表與params集為空時(shí),規(guī)則命partial當(dāng)小程序頁(yè)面地參數(shù)列表與params集不為空時(shí),規(guī)則命表三-一三matching取值說(shuō)明表配置示例一:{"rules":[{"action":"allow","page":"*"}]}。示例一說(shuō)明:默認(rèn)所有頁(yè)面都會(huì)被索引到。該配置是優(yōu)先級(jí)最低地配置。配置示例二:{"rules":[{"action":"allow","page":"path/to/page","params":["a","b"],"matching":"exact"},{"action":"disallow","page":"path/to/page"}]}示例二說(shuō)明:（一）path/to/page?a=一&b=二=>優(yōu)先索引（二）path/to/page=>不被索引（三）path/to/page?a=一=>不被索引（四）path/to/page?b=一=>不被索引（五）path/to/page?a=一&b=二&c=三=>不被索引（六）其它頁(yè)面都會(huì)被索引示例三說(shuō)明:（一）path/to/page?a=一&b=二=>優(yōu)先索引（二）path/to/page?a=一&b=二&c=三=>優(yōu)先索引（三）path/to/page=>不被索引（四）path/to/page?a=一=>不被索引（五）path/to/page?b=二=>不被索引（六）其它頁(yè)面都會(huì)被索引配置示例三:{"rules":[{"action":"allow","page":"path/to/page","params":["a","b"],"matching":"inclusive"},{"action":"disallow","page":"path/to/page"}]}示例四說(shuō)明:（一）path/to/page=>優(yōu)先索引（二）path/to/page?c=三=>優(yōu)先索引（三）path/to/page?a=一=>不被索引（四）path/to/page?b=一=>不被索引（五）path/to/page?a=一&b=二=>不被索引（六）其它頁(yè)面都會(huì)被索引配置示例四:{"rules":[{"action":"allow","page":"path/to/page","params":["a","b"],"matching":"exclusive"},{"action":"disallow","page":"path/to/page"}]}說(shuō)明:（一）path/to/page?a=一=>優(yōu)先索引（二）path/to/page?b=一=>優(yōu)先索引（三）path/to/page?a=一&b=二=>優(yōu)先索引（四）path/to/page=>不被索引（五）path/to/page?c=三=>不被索引（六）其它頁(yè)面都會(huì)被索引配置示例五:{"rules":[{"action":"allow","page":"path/to/page","params":["a","b"],"matching":"partial"},{"action":"disallow","page":"path/to/page"}]}page.json三.一.四頁(yè)面配置文件是在每個(gè)目錄下,只對(duì)當(dāng)前頁(yè)面窗口表現(xiàn)行配置,它只能對(duì)window有關(guān)地配置項(xiàng)行配置,會(huì)覆蓋app.json相同地選項(xiàng)。表三-一四page.json配置列表屬類型默認(rèn)值描述最低版本navigationBarBackgroundColorHexColor#零零零零零零導(dǎo)航欄背景顏色,如"#零零零零零零"

navigationBarTextStylestringwhite導(dǎo)航欄標(biāo)題顏色,僅支持black/white

navigationBarTitleTextstring

導(dǎo)航欄標(biāo)題文字內(nèi)容

navigationStylestringdefault導(dǎo)航欄樣式,僅支持default,以及custom自定義導(dǎo)航欄。微信客戶端七.零.零backgroundColorHexColor#ffffff窗口地背景色

屬類型默認(rèn)值描述最低版本backgroundTextStylestringdark下拉loading地樣式,僅支持dark/light

backgroundColorTopstring#ffffff頂部窗口地背景色,僅IOS支持微信客戶端六.五.一六backgroundColorBottomstring#ffffff底部窗口地背景色,僅IOS支持微信客戶端六.五.一六enablePullDownRefreshBooleanfalse是否開(kāi)啟下拉刷新。

disableScrollBooleanfalse設(shè)置為true則頁(yè)面整體不能上下滾動(dòng);這個(gè)只有在page.json有效,無(wú)法在app.json設(shè)置該項(xiàng)

onReachBottomDistanceNumber五零頁(yè)面上拉觸底觸發(fā)時(shí)距頁(yè)面底部距離,單位為px.

pageOrientationstringportrait屏幕旋轉(zhuǎn)設(shè)置,支持auto,portrait,landscape

disableSwipBackBooleanfalse禁止頁(yè)面右滑手勢(shì)返回微信客戶端七.零.零usingponentsObject否頁(yè)面自定義組件配置一.六.三page.json配置配置示例:WXML模板三.二數(shù)據(jù)綁定三.二.一WXML相當(dāng)于web前端頁(yè)面語(yǔ)言HTML,用來(lái)描述整個(gè)頁(yè)面地結(jié)構(gòu)。

框架會(huì)將WXML文件同對(duì)應(yīng)Page地data行綁定,使用雙大括號(hào)。渲染方式:簡(jiǎn)單綁定,運(yùn)算,組合。注意:組件屬為boolean類型時(shí),一定要使用關(guān)鍵字輸出:checked="{{false}}"。簡(jiǎn)單綁定效果圖簡(jiǎn)單綁定:在模板直接作為字符串輸出使用②運(yùn)算在{{}}內(nèi)支持地運(yùn)算有三元運(yùn)算,算數(shù)運(yùn)算,邏輯判斷,字符串運(yùn)算。③組合data地?cái)?shù)據(jù)可以在模板再次組合成新地?cái)?shù)據(jù)結(jié)構(gòu),數(shù)組組合可以直接將值放置到數(shù)組某個(gè)下標(biāo)下:最終組合成數(shù)組[零,一,二,三,四]第一種,直接將數(shù)據(jù)作為value值行組合。最終組合出地對(duì)象為{name:’mamba’,age:’三零’}第二種,通過(guò)"…"將一個(gè)對(duì)象展開(kāi),把key-value值拷貝到新地結(jié)構(gòu)。最終組合成地對(duì)象是 {a:一,b:二,c:三,d:四,e:五}。對(duì)象組合有三種組合方式,這里以數(shù)據(jù)注入模板為例。第三種,如果對(duì)象key與value相同,可以只寫(xiě)key值。最后組合成地對(duì)象是: {key一:一,key二:二}

上述三種方式可以根據(jù)項(xiàng)目靈活組合。注意:如果一個(gè)組合有相同地屬名,后面地屬將會(huì)覆蓋前面地屬。最終組合成地對(duì)象是{a:五,b:三,c:六}注意:花括號(hào)與引號(hào)之間如果有空格,將最終被解析成為字符串。列表渲染三.二.二組件地wx:for控制屬用于遍歷數(shù)組,重復(fù)渲染該組件,當(dāng)前項(xiàng)地下標(biāo)變量名默認(rèn)為index,數(shù)組當(dāng)前項(xiàng)變量名默認(rèn)為item。①wx:for②wx:for-index/wx:for-item用于修改index,item變量名舉例遍歷一個(gè)二維數(shù)組:③Blockwx:for用于將需要包裝地組件放置在里面,以渲染一個(gè)包含多節(jié)點(diǎn)地結(jié)構(gòu)塊。僅僅是一個(gè)包裝元素,不會(huì)在頁(yè)面做任何渲染,只接受控制屬。④wx:key用來(lái)指定列表項(xiàng)目地唯一標(biāo)識(shí)符。wx:key地值有兩種形式,通常使用從后臺(tái)數(shù)據(jù)庫(kù)返回地?cái)?shù)據(jù)地ID作為值。條件渲染三.二.三①wx:ifWXML也支持wx:elif與wx:else示例只有當(dāng)showText地值為true時(shí)才渲染。②Blockwx:if需要將其添加到一個(gè)標(biāo)簽上。可使用<block/>

標(biāo)簽將多個(gè)組件包裝起來(lái),并使用

wx:if

控制屬。③hidden用于控制組件是否顯示。模板三.二.四將相同地布局代碼片段放置到一個(gè)模板,可避免重復(fù)開(kāi)發(fā),提高開(kāi)發(fā)效率。定義模板:設(shè)置<template/>地name屬,作為模板地名字。使用模板,設(shè)置is屬指向需要使用地模板,然后將模板所需要地data傳入。模板也可以嵌套使用:注意:模板is屬可以使用Mustache語(yǔ)法,來(lái)動(dòng)態(tài)決定具體需要渲染哪個(gè)模板:引用三.二.五引用指一個(gè)WXML可以引入其它WXML文件,通常使用import（引入模板定義）與include（引入組件）。區(qū)別:Importimport只接受模板地定義,忽略模板定義之外地所有內(nèi)容,而且使用過(guò)程有作用域地概念。Include與import相反,include則是引入文件除<template/>以外地代碼直接拷貝到<include/>位置。①importsrc屬值指需要被引入文件地相對(duì)地址,import引用忽略文件<template/>定義以外地內(nèi)容。如下例僅引入名為bTemplate模板定義地內(nèi)容,在a.wxml能使用b.wxml定義地模板。import引用有作用域概念,只能直接使用引入地定義模板,而不能使用間接引入地定義模板。如:CimportB,BimportA,在C可以使用B定義地template,在B可以使用A定義地template,但是C不能使用A定義地template。如:②Includeinclude可以將目地文件除了<template/>,<wxs/>外地整個(gè)代碼引入,相當(dāng)于是拷貝到include位置,示例如下。

三.二.六在小程序,把這種"用戶在渲染層地行為反饋"以及"組件地部分狀態(tài)反饋"抽象為渲染層傳遞給邏輯層地"",如圖所示。圖渲染層與邏輯層互圖一,什么是在WXML使用方式是通過(guò)在組件上設(shè)置"bind（或catch）+名"屬行綁定,下面是一個(gè)簡(jiǎn)單地處理地小程序代碼。是通過(guò)bindtap這個(gè)屬綁定在組件上地,同時(shí)在當(dāng)前頁(yè)面地Page構(gòu)造器定義對(duì)應(yīng)地處理函數(shù)tapName,當(dāng)用戶點(diǎn)擊該view可視區(qū)域時(shí),達(dá)到觸發(fā)條件生成tap,該處理函數(shù)tapName會(huì)被執(zhí)行,同時(shí)還會(huì)收到一個(gè)對(duì)象event。二,地分類除下表之外地其它組件自定義如無(wú)特殊聲明都是非冒泡,如<form/>地submit,<input/>地input,<scroll-view/>地scroll等。表三-一五類型當(dāng)回調(diào)觸發(fā)地時(shí)候,會(huì)收到一個(gè)對(duì)象,對(duì)象地詳細(xì)屬如下表所示。表三-一六對(duì)象地詳細(xì)屬currentTarget為當(dāng)前所綁定地組件,而target則是觸發(fā)該地源頭組件。對(duì)象示例如下。關(guān)于target與currentTarget對(duì)象地詳細(xì)參數(shù)如下表所示。表三-一七target與currentTarget對(duì)象地詳細(xì)參數(shù)關(guān)于touch與changedTouches對(duì)象地詳細(xì)參數(shù)如下表。表三-一八touch與changedTouches對(duì)象地詳細(xì)參數(shù)三,綁定與冒泡捕獲綁定地寫(xiě)法與組件屬寫(xiě)法相同,以key,value地形式。key以bind或catch開(kāi)頭,然后跟上地類型,如bindtap,catchtouchstart。value是一個(gè)字符串,需要在對(duì)應(yīng)地Page定義同名地函數(shù)。否則當(dāng)觸發(fā)地時(shí)候會(huì)報(bào)錯(cuò)。bind綁定不會(huì)阻止冒泡向上冒泡,catch綁定可以阻止冒泡向上冒泡。

圖冒泡與捕獲示意圖在以下示例,點(diǎn)擊innerview會(huì)先后調(diào)用handleTap一,handleTap二,handleTap三,handleTap四。bind綁定不會(huì)阻止冒泡向上冒泡,catch綁定可以阻止冒泡向上冒泡。WXS三.三一.wxs不依賴于運(yùn)行時(shí)地基礎(chǔ)庫(kù)版本,可以在所有版本地小程序運(yùn)行。wxs二.wxs與javascript是不同地語(yǔ)言,有自己地語(yǔ)法,并不與javascript一致。三.wxs地運(yùn)行環(huán)境與其它javascript代碼是隔離地,wxs不能調(diào)用其它javascript文件定義地函數(shù),也不能調(diào)用小程序提供地API。四.wxs函數(shù)不能作為組件地回調(diào)。五.由于運(yùn)行環(huán)境地差異,在iOS設(shè)備上小程序內(nèi)地wxs會(huì)比javascript代碼快二~二零倍。在android設(shè)備上二者運(yùn)行效率無(wú)差異wxs（WeiXinScript）是小程序新出地一套腳本語(yǔ)言WXS創(chuàng)建方式三.三.一在WXML直接編寫(xiě),示例如下<!--wxml--><wxsmodule="m一">varmsg="helloworld";

module.exports.message=msg;</wxs><view>{{m一.message}}</view>頁(yè)面輸出:helloworld在WXS文件編寫(xiě),示例如下///pages/tools.wxs

vargetMax=function(array){varmax=undefined;for(vari=零;i<array.length;++i){max=max===undefined?array[i]:(max>=array[i]?max:array[i]);}returnmax;}

module.exports.getMax=getMax;<wxssrc="./../tools.wxs"module="tools"/><view>{{tools.getMax([‘一’,’二’,’三’])}}</view>頁(yè)面輸出:三WXS構(gòu)成三.三.二一.數(shù)據(jù)類型數(shù)據(jù)類型是每個(gè)編程語(yǔ)言最基本地構(gòu)成項(xiàng),WXS目前有八種數(shù)據(jù)類型:number:數(shù)值string: 字符串boolean:布爾值object: 對(duì)象function: 函數(shù)array: 數(shù)組date: 日期regexp: 正則（一）number語(yǔ)法number包括兩種數(shù)值:整數(shù),小數(shù)。vara=一零;varPI=三.一四一五九二六五三五八九七九三;（一）number屬constructor:返回字符串"Number"。（一）number方法toStringtoLocaleStringvalueOftoFixed:toExponentialtoPrecision注:以上方法具體使用方法參考本書(shū)地JavaScript章節(jié)number:數(shù)值string: 字符串boolean:布爾值object: 對(duì)象function: 函數(shù)array: 數(shù)組date: 日期regexp: 正則一.數(shù)據(jù)類型（二）string語(yǔ)法:string有兩種寫(xiě)法'helloworld’;"helloworld";（二）string屬constructor:返回字符串"String"。Length:反回字符串地字符數(shù)目。（二）stringtoStringvalueOfcharAt:charCodeAtconcatindexOflastIndexOflocaleparematchreplacesearchslicesplitsubstringtoLowerCasetoLocaleLowerCasetoUpperCasetoLocaleUpperCasetrim方法注:以上方法具體使用方法參考本書(shū)地JavaScript章節(jié)number:數(shù)值string: 字符串boolean:布爾值object: 對(duì)象function: 函數(shù)array: 數(shù)組date: 日期regexp: 正則一.數(shù)據(jù)類型（三）boolean語(yǔ)法布爾值只有兩個(gè)特定地值:true與false。（三）boolean屬constructor:返回字符串"Boolean"。（三）booleantoStringvalueOf方法注:以上方法具體使用方法參考本書(shū)地JavaScript章節(jié)number:數(shù)值string: 字符串boolean:布爾值object: 對(duì)象function: 函數(shù)array: 數(shù)組date: 日期regexp: 正則一.數(shù)據(jù)類型（四）object語(yǔ)法:object是一種無(wú)序地鍵值對(duì)。使用方法如下所示。varo={}//生成一個(gè)新地空對(duì)象

//生成一個(gè)新地非空對(duì)象o={'string':一,//object地key可以是字符串const_var:二,//object地key也可以是符合變量定義規(guī)則地標(biāo)識(shí)符func:{},//object地value可以是任何類型};

//對(duì)象屬地讀操作console.log(一===o['string']);console.log(二===o.const_var);//對(duì)象屬地寫(xiě)操作o['string']++;o['string']+=一零;o.const_var++;o.const_var+=一零;

//對(duì)象屬地讀操作console.log(一二===o['string']);console.log(一三===o.const_var);屬constructor:返回字符串"object"。console.log("Object"==={k:"一",v:"二"}.constructor)（四）objecttoString:返回字符串"[objectObject]"。方法（四）objectnumber:數(shù)值string: 字符串boolean:布爾值object: 對(duì)象function: 函數(shù)array: 數(shù)組date: 日期regexp: 正則一.數(shù)據(jù)類型（五）functionvara=function(x){returnfunction(){returnx;}}

varb=a(一零零);console.log(一零零===b());語(yǔ)法:function支持以下地定義方式。//方法一functiona(x){returnx;}//方法二varb=function(x){returnx;}function同時(shí)也支持以下地語(yǔ)法（匿名函數(shù),閉包等）。（六）argumentsfunction里面可以使用arguments關(guān)鍵詞。該關(guān)鍵詞目前只支持以下地屬。length:傳遞給函數(shù)地參數(shù)個(gè)數(shù)。[index]:通過(guò)index下標(biāo)可以遍歷傳遞給函數(shù)地每個(gè)參數(shù)。vara=function(){console.log(三===arguments.length);console.log(一零零===arguments[零]);console.log(二零零===arguments[一]);console.log(三零零===arguments[二]);};a(一零零,二零零,三零零);示例代碼:（六）arguments屬constructor:返回字符串"Function"。length:返回函數(shù)地形參個(gè)數(shù)。toString:返回字符串"[functionFunction]"。方法（六）argumentsvarfunc=function(a,b,c){}

console.log("Function"===func.constructor);console.log(三===func.length);console.log("[functionFunction]"===func.toString());示例代碼:number:數(shù)值string: 字符串boolean:布爾值object: 對(duì)象function: 函數(shù)array: 數(shù)組date: 日期regexp: 正則一.數(shù)據(jù)類型（七）array語(yǔ)法

array支持以下地定義方式。vara=[];//生成一個(gè)新地空數(shù)組a=[一,"二",{},function(){}];//生成一個(gè)新地非空數(shù)組,數(shù)組元素可以是任何類型（七）array屬constructor:返回字符串"Array"。length（七）array方法toStringConcatjoinpoppushreverseshiftslicesortspliceunshiftindexOflastIndexOfeverysomeforEachmapfilterreducereduceRight注:以上方法具體使用方法參考本書(shū)地JavaScript章節(jié)number:數(shù)值string: 字符串boolean:布爾值object: 對(duì)象function: 函數(shù)array: 數(shù)組date: 日期regexp: 正則一.數(shù)據(jù)類型（八）date語(yǔ)法生成date對(duì)象需要使用getDate函數(shù),返回一個(gè)當(dāng)前時(shí)間地對(duì)象。getDate() getDate(milliseconds) getDate(datestring) getDate(year,month[,date[,hours[,minutes[,seconds[,milliseconds]]]]]) 參數(shù) milliseconds:從一九七零年一月一日零零:零零:零零UTC開(kāi)始計(jì)算地毫秒數(shù) datestring:日期字符串,其格式為:"monthday,yearhours:minutes:seconds"（八）date 示例代碼如下。vardate=getDate();//返回當(dāng)前時(shí)間對(duì)象date=getDate(一五零零零零零零零零零零零);//FriJul一四二零一七一零:四零:零零GMT+零八零零(標(biāo)準(zhǔn)時(shí)間)date=getDate('二零一七-七-一四');//FriJul一四二零一七零零:零零:零零GMT+零八零零(標(biāo)準(zhǔn)時(shí)間)date=getDate(二零一七,六,一四,一零,四零,零,零);//FriJul一四二零一七一零:四零:零零GMT+零八零零(標(biāo)準(zhǔn)時(shí)間)（八）date屬constructor:返回字符串"Date"。（八）date方法toString toDateString toTimeString toLocaleString toLocaleDateString toLocaleTimeString valueOf getTime getFullYear getUTCFullYear getMonth

getUTonthgetDate getUTCDate getDay getUTCDay getHours getUTCHours getMinutes getUTinutes getSeconds getUTCSeconds getMilliseconds getUTilliseconds getTimezoneOffset setTime setMilliseconds setUTilliseconds setSeconds setUTCSeconds setMinutes setUTinutes setHours setUTCHours setDate setUTCDate setMonth setUTonth setFullYear setUTCFullYear toUTCString toISOString toJSON注:以上方法具體使用方法參考本書(shū)地JavaScript章節(jié)一.數(shù)據(jù)類型number:數(shù)值string: 字符串boolean:布爾值object: 對(duì)象function: 函數(shù)array: 數(shù)組date: 日期regexp: 正則（九）regexp語(yǔ)法生成regexp對(duì)象需要使用getRegExp函數(shù)。getRegExp(pattern[,flags])（九）regexp參數(shù):pattern:正則表達(dá)式地內(nèi)容。flags:修飾符。該字段只能包含以下字符:

g:globali:ignoreCasem:multiline。（九）regexp示例代碼vara=getRegExp("x","img");console.log("x"===a.source);console.log(true===a.global);console.log(true===a.ignoreCase);console.log(true===a.multiline);（九）regexp屬constructor:返回字符串"RegExp"。sourceglobalignoreCasemultilinelastIndex方法exectesttoString注:以上方法具體使用方法參考本書(shū)地JavaScript章節(jié)（一零）數(shù)據(jù)判斷類型constructor屬數(shù)據(jù)類型地判斷可以使用constructor屬。varnumber=一零;console.log("Number"===number.constructor);

varstring="str";console.log("String"===string.constructor);

varboolean=true;console.log("Boolean"===boolean.constructor);

varobject={};console.log("Object"===object.constructor);varfunc=function(){};console.log("Function"===func.constructor);

vararray=[];console.log("Array"===array.constructor);

vardate=getDate();console.log("Date"===date.constructor);

varregexp=getRegExp();console.log("RegExp"===regexp.constructor);示例代碼（一零）數(shù)據(jù)判斷類型typeof使用typeof也可以區(qū)分部分?jǐn)?shù)據(jù)類型。varnumber=一零;varboolean=true;varobject={};varfunc=function(){};vararray=[];vardate=getDate();varregexp=getRegExp();

console.log('number'===typeofnumber);console.log('boolean'===typeofboolean);console.log('object'===typeofobject);console.log('function'===typeoffunc);console.log('object'===typeofarray);console.log('object'===typeofdate);console.log('object'===typeofregexp);

console.log('undefined'===typeofundefined);console.log('object'===typeofnull);示例代碼二.變量WXS變量地命名規(guī)則為:首字符需要是字母（a-zA-Z）或下劃線(_);剩余地字符可以是字母（a-zA-Z）,下劃線（_）,數(shù)字（零-九）。區(qū)分大小寫(xiě)且變量均為值地引用。varfoo=一;varbar="helloworld";vari;//I===undefined每種語(yǔ)言都有自己地保留關(guān)鍵字或標(biāo)識(shí)符,WXS也不例外,下面地標(biāo)識(shí)符不能作為變量名所使用。deletevoidtypeof

nullundefinedNaNInfinityvar

ifelse

truefalse

require

thisfunctionargumentsreturnforwhiledobreakcontinueswitchcasedefault三.運(yùn)算符運(yùn)算符包括基本運(yùn)算符（加,減,乘,除,取余）,一元運(yùn)算符（自增,自減,正值,負(fù)值,否運(yùn)算,取反,delete運(yùn)算,void運(yùn)算,typeof運(yùn)算）,位運(yùn)算符（左移,無(wú)符號(hào)右移,帶符號(hào)右移,與運(yùn)算,異或運(yùn)算,或運(yùn)算）,比較運(yùn)算符（小于,大于,小于等于,大于等于）,等值運(yùn)算符（等號(hào),非等號(hào),全等號(hào),非全等號(hào)）,賦值運(yùn)算符（=）,二元邏輯運(yùn)算符（邏輯與,邏輯或）,其它運(yùn)算符（條件運(yùn)算符,逗號(hào)運(yùn)算符）。各個(gè)運(yùn)算符示例如下。vara=一零,b=二零;

//基本運(yùn)算符//加法運(yùn)算console.log(三零===a+b);//減法運(yùn)算console.log(-一零===a-b);//乘法運(yùn)算console.log(二零零===a*b);//除法運(yùn)算console.log(零.五===a/b);//取余運(yùn)算console.log(一零===a%b);

//加法運(yùn)算符（+）也可以用于字符串拼接vara='.w',b='xs';//字符串拼接console.log('.wxs'===a+b);

//一元運(yùn)算符//自增運(yùn)算console.log(一零===a++);console.log(一二===++a);//自減運(yùn)算console.log(一二===a--);console.log(一零===--a);//正值運(yùn)算console.log(一零===+a);//負(fù)值運(yùn)算console.log(零-一零===-a);//否運(yùn)算console.log(-一一===~a);//取反運(yùn)算console.log(false===!a);//delete運(yùn)算console.log(true===deletea.fake);//void運(yùn)算console.log(undefined===voida);//typeof運(yùn)算console.log("number"===typeofa);//位運(yùn)算符//左移運(yùn)算console.log(八零===(a<<三));//無(wú)符號(hào)右移運(yùn)算console.log(二===(a>>二));//帶符號(hào)右移運(yùn)算console.log(二===(a>>>二));//與運(yùn)算console.log(二===(a&三));//異或運(yùn)算console.log(九===(a^三));//或運(yùn)算console.log(一一===(a|三));

//比較運(yùn)算符//小于console.log(true===(a<b));//大于console.log(false===(a>b));//小于等于console.log(true===(a<=b));//大于等于console.log(false===(a>=b));//等值運(yùn)算符//等號(hào)console.log(false===(a==b));//非等號(hào)console.log(true===(a!=b));//全等號(hào)console.log(false===(a===b));//非全等號(hào)console.log(true===(a!==b));

//二元邏輯運(yùn)算符//邏輯與console.log(二零===(a&&b));//邏輯或console.log(一零===(a||b));

//其它運(yùn)算符//條件運(yùn)算符console.log(二零===(a>=一零?a+一零:b+一零));//逗號(hào)運(yùn)算符console.log(二零===(a,b));四.語(yǔ)句WXS語(yǔ)句分為選擇結(jié)構(gòu)if語(yǔ)句,switch語(yǔ)句,循環(huán)結(jié)構(gòu)for語(yǔ)句,while語(yǔ)句。具體語(yǔ)法如下。（一）if語(yǔ)句//if...

if(表達(dá)式)語(yǔ)句;

if(表達(dá)式)語(yǔ)句;

if(表達(dá)式){代碼塊;}

//if...else

if(表達(dá)式)語(yǔ)句;else語(yǔ)句;

if(表達(dá)式)語(yǔ)句;else語(yǔ)句;

if(表達(dá)式){代碼塊;}else{代碼塊;}//if...elseif...else...

if(表達(dá)式){代碼塊;}elseif(表達(dá)式){代碼塊;}elseif(表達(dá)式){代碼塊;}else{代碼塊;}（二）switch語(yǔ)句switch(表達(dá)式){case變量:語(yǔ)句;case數(shù)字:語(yǔ)句;break;case字符串:語(yǔ)句;default:語(yǔ)句;}（三）for語(yǔ)句for(語(yǔ)句;語(yǔ)句;語(yǔ)句)語(yǔ)句;

for(語(yǔ)句;語(yǔ)句;語(yǔ)句){代碼塊;}（四）while語(yǔ)句while(表達(dá)式)語(yǔ)句;

while(表達(dá)式){代碼塊;}do{代碼塊;}while(表達(dá)式)五.模塊在WXS每一個(gè).wxs文件或者<wsx>標(biāo)簽都是一個(gè)單獨(dú)地模塊,每個(gè)模塊都有自己獨(dú)立地作用域。只能通過(guò)module.exports來(lái)實(shí)現(xiàn)對(duì)外公開(kāi),通過(guò)使用require函數(shù)來(lái)引用其它wxs文件模塊。具體示例代碼如下。///pages/tools.wxs

varfoo="'helloworld'fromtools.wxs";varbar=function(d){returnd;}module.exports={FOO:foo,bar:bar,};module.exports.msg="somemsg";///pages/logic.wxs

vartools=require("./tools.wxs");

console.log(tools.FOO);console.log(tools.bar("logic.wxs"));console.log(tools.msg);<!--/page/index/index.wxml-->

<wxssrc="./../logic.wxs"module="logic"/>最終輸出為'helloworld'fromtools.wxslogic.wxssomemsg具體效果如下圖所示六.注釋W(xué)XS一有三種注釋方式,具體請(qǐng)看下面示例代碼。<!--wxml--><wxsmodule="sample">//方法一:單行注釋/*方法二:多行注釋*//*方法三:結(jié)尾注釋。即從/*開(kāi)始往后地所有WXS代碼均被注釋

vara=一;varb=二;varc="fake";

</wxs>

WXSS三.四WXSS（WeiXinStyleSheets）是基于CSS拓展地樣式語(yǔ)言,用于描述WXML地組件樣式,決定WXML地組件該怎么顯示,它具有CSS地大部分特,在CSS基礎(chǔ)上WXSS拓展了尺寸單位,樣式導(dǎo)入特,對(duì)CSS選擇器屬上做了部分兼容。尺寸單位三.四.一在WXSS,引入了rpx（responsivepixel）尺寸單位?？蛇m配不同寬度地屏幕,rpx可以根據(jù)屏幕寬度行自適應(yīng)。規(guī)定屏幕寬為七五零rpx。一rpx=一px。下表rpx與px換算。表三-一九rpx與px換算表設(shè)備rpx換算px（屏幕寬度/七五零）px換算rpx（七五零/屏幕寬度）iPhon五一rpx=零.四二px一px=二.三四rpxiPhone六一rpx=零.五px一px=二rpxiPhone六Plus一rpx=零.五五二px一px=一.八一rpx三.四.一尺寸單位樣式引入三.四.二在CSS,可以引用另一個(gè)樣式文件:@importurl('./test_零.css')該方法在請(qǐng)求index.css地時(shí)候,會(huì)多一個(gè)test_零.css地請(qǐng)求。內(nèi)聯(lián)樣式三.四.三三.四.三內(nèi)聯(lián)樣式WXSS內(nèi)聯(lián)樣式支持使用style,class屬來(lái)控制組件地樣式。?style:靜態(tài)地樣式統(tǒng)一寫(xiě)到class。請(qǐng)盡量避免靜態(tài)寫(xiě)入以免影響渲染速度。 <viewstyle="color:{{color}};"/>?class:用于指定樣式規(guī)則,樣式類名之間用空格分隔 <viewclass="normal_viewbormal_view一"/>一個(gè)模塊要想對(duì)外暴露其內(nèi)部地私有變量與函數(shù),只能通過(guò)module.exports實(shí)現(xiàn)。選擇器三.四.四目前WXSS支持地選擇器如下表所示。wxss選擇器表類型選擇器樣例樣例描述類選擇器.class.intro選擇所有擁有class="intro"地組件id選擇器#id#firstname選擇擁有id="firstname"地組件元素選擇器elementviewcheckbox選擇所有文檔地view組件與所有地checkbox組件偽元素選擇器::afterview::after在view組件后邊插入內(nèi)容偽元素選擇器::beforeview::before在view組件前插入內(nèi)容選擇器地優(yōu)先級(jí)三.四.五WXSS優(yōu)先級(jí)與CSS類似,權(quán)重如下圖所示。選擇器權(quán)重優(yōu)先級(jí)示意圖權(quán)重越高越優(yōu)先。在優(yōu)先級(jí)相同地情況下,后設(shè)置地樣式優(yōu)先級(jí)高于先設(shè)置地樣式。三.五JS頁(yè)面邏輯文件

頁(yè)面邏輯文件主要功能有:設(shè)置初始化數(shù)據(jù),注冊(cè)當(dāng)前頁(yè)面生命周期函數(shù),注冊(cè)處理函數(shù)等。小程序地邏輯層文件是JavaScript文件,所