1.公眾平臺(tái)申請(qǐng)賬號(hào)：

mp.weixin.qq.com/wxopen/ware…

你可以管理你的小程序的權(quán)限，查看數(shù)據(jù)報(bào)表，發(fā)布小程序等操作。 在設(shè)置”-“開發(fā)設(shè)置” 可以看到小程序的 AppID ,在本地開發(fā)新建項(xiàng)目時(shí)必須輸入自己賬號(hào)的AppID

2.安裝開發(fā)者工具

登錄后新建項(xiàng)目時(shí)，需輸入申請(qǐng)的小程序的 AppID(相當(dāng)于一個(gè)身份證，很多地方需要用到)

勾選 "創(chuàng)建 QuickStart 項(xiàng)目" (注意: 你要選擇一個(gè)空的目錄才會(huì)有這個(gè)選項(xiàng))

3.項(xiàng)目里邊生成了不同類型的文件:

.json 后綴的 JSON 配置文件

.wxml 后綴的 WXML 模板文件

.wxss 后綴的 WXSS 樣式文件

.js 后綴的 JS 腳本邏輯文件

1.JSON 配置

QuickStart 項(xiàng)目里邊的 app.json 配置內(nèi)容如下： pages String Array 是 設(shè)置頁(yè)面路徑

window Object 否 設(shè)置默認(rèn)頁(yè)面的窗口表現(xiàn)tabBar Object 否 設(shè)置底部 tab 的表現(xiàn)networkTimeout Object 否 設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間debug Boolean 否 設(shè)置是否開啟 debug 模式 復(fù)制代碼

pages字段 —— 用于描述當(dāng)前小程序所有頁(yè)面路徑，這是為了讓微信客戶端知道當(dāng)前你的小程序頁(yè)面定義在哪個(gè)目錄。

window字段 —— 小程序所有頁(yè)面的頂部背景顏色，文字顏色定義在這里的。

1.app.json 配置項(xiàng)列表

{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "demo1","navigationBarTextStyle":"black"} } 復(fù)制代碼

pages

數(shù)組的第一項(xiàng)代表小程序的初始頁(yè)面。小程序中新增/減少頁(yè)面，都需要對(duì) pages 數(shù)組進(jìn)行修改，只有在此聲明才能創(chuàng)建頁(yè)面

在 pages 字段的第一個(gè)頁(yè)面就是這個(gè)小程序的首頁(yè)(打開小程序看到的第一個(gè)頁(yè)面)。

文件名不需要寫文件后綴，因?yàn)榭蚣軙?huì)自動(dòng)去尋找路徑下 .json, .js, .wxml, .wxss 四個(gè)文件進(jìn)行整合。

window

用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。

navigationBarBackgroundColor HexColor #000000 導(dǎo)航欄背景顏色，如"#000000" navigationBarTextStyle String white 導(dǎo)航欄標(biāo)題顏色，僅支持 black/white navigationBarTitleText String 導(dǎo)航欄標(biāo)題文字內(nèi)容 navigationStyle String default 導(dǎo)航欄樣式，僅支持 default/custom。custom 模式可自定義導(dǎo)航欄，只保留右上角膠囊狀的按鈕 微信版本 6.6.0 backgroundColor HexColor #ffffff 窗口的背景色 backgroundTextStyle String dark 下拉背景字體、loading 圖的樣式，僅支持 dark/light backgroundColorTop String #ffffff 頂部窗口的背景色，僅 iOS 支持 微信版本 6.5.16 backgroundColorBottom String #ffffff 底部窗口的背景色，僅 iOS 支持 微信版本 6.5.16 enablePullDownRefresh Boolean false 是否開啟下拉刷新，詳見頁(yè)面相關(guān)事件處理函數(shù) onReachBottomDistance Number 50 頁(yè)面上拉觸底事件觸發(fā)時(shí)距頁(yè)面底部距離，單位為px 復(fù)制代碼

tabBar

如果小程序是一個(gè)多 tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁(yè)面），可以通過(guò) tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面

當(dāng)==設(shè)置 position 為 top 時(shí)，將不會(huì)顯示 icon== tabBar 中的 ==list 是一個(gè)數(shù)組==，只能配置==最少2個(gè)、最多5個(gè)== tab，tab 按數(shù)組的順序排序。

color HexColor 是 tab 上的文字默認(rèn)顏色 selectedColor HexColor 是 tab 上的文字選中時(shí)的顏色 backgroundColor HexColor 是 tab 的背景色 borderStyle String 否 black tabbar上邊框的顏色， 僅支持 black/white list Array 是 tab 的列表，詳見 list 屬性說(shuō)明，最少2個(gè)、最多5個(gè) tab position String 否 bottom 可選值 bottom、top 復(fù)制代碼

list 接受一個(gè)數(shù)組，數(shù)組中的每個(gè)項(xiàng)都是一個(gè)對(duì)象

pagePath String 是頁(yè)面路徑，必須在 pages 中先定義 text String 是 tab 上按鈕文字 iconPath String 否 圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px，當(dāng) postion 為 top 時(shí)，此參數(shù)無(wú)效，不支持網(wǎng)絡(luò)圖片 selectedIconPath String 否選中時(shí)的圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px ，當(dāng) postion 為 top 時(shí)，此參數(shù)無(wú)效 復(fù)制代碼

networkTimeout

可以設(shè)置各種網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間。

request Number 否 wx.request的超時(shí)時(shí)間，單位毫秒，默認(rèn)為：60000 connectSocket Number 否 wx.connectSocket的超時(shí)時(shí)間，單位毫秒，默認(rèn)為：60000 uploadFile Number 否 wx.uploadFile的超時(shí)時(shí)間，單位毫秒，默認(rèn)為：60000 downloadFile Number 否 wx.downloadFile的超時(shí)時(shí)間，單位毫秒，默認(rèn)為：60000 復(fù)制代碼

debug

可以在開發(fā)者工具中開啟 debug 模式，在開發(fā)者工具的控制臺(tái)面板，調(diào)試信息以 info 的形式給出，其信息有Page的注冊(cè)，頁(yè)面路由，數(shù)據(jù)更新，事件觸發(fā) 。 可以幫助開發(fā)者快速定位一些常見的問(wèn)題。

各個(gè)頁(yè)面也可以配置.json，但只能設(shè)置 window 相關(guān)的配置項(xiàng)，以決定本頁(yè)面的窗口表現(xiàn)，所以無(wú)需寫 window 這個(gè)鍵。會(huì)覆蓋全局的app.json的設(shè)置樣式

{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#ccc","navigationBarTitleText": "用戶中心"} 復(fù)制代碼

每一個(gè)小程序頁(yè)面也可以使用.json文件來(lái)對(duì)本頁(yè)面的窗口表現(xiàn)進(jìn)行配置。 只是設(shè)置 app.json 中的 window 配置項(xiàng)的內(nèi)容，頁(yè)面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。 ==頁(yè)面的.json只能設(shè)置 window 相關(guān)的配置項(xiàng)，以決定本頁(yè)面的窗口表現(xiàn)，所以無(wú)需寫 window 這個(gè)鍵==

2.WXML 模板

WXML 充當(dāng)?shù)木褪穷愃?HTML 的角色

MVVM 的開發(fā)模式， 不再讓 JS 直接操控 DOM，JS只需要管理狀態(tài)即可，然后再通過(guò)一種模板語(yǔ)法來(lái)描述狀態(tài)和界面結(jié)構(gòu)的關(guān)系即可

<view class="container"><view class="userinfo"><button wx:if="{{!hasUserInfo && canIUse}}"> 獲取頭像昵稱 </button><block wx:else><image src="{{userInfo.avatarUrl}}" background-size="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view> </view> 復(fù)制代碼

小程序的 WXML 用的標(biāo)簽是 view, button, text 等等

{{ }} 的語(yǔ)法把一個(gè)變量綁定到界面上，需要 if/else, for等控制能力，在小程序里邊，這些控制能力都用 wx: 開頭的屬性來(lái)表達(dá)。

<button wx:if="{{!hasUserInfo && canIUse}}"> 獲取頭像昵稱 </button><block wx:else><image src="{{userInfo.avatarUrl}}" background-size="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block> 復(fù)制代碼

列表渲染

<view wx:for="{{array}}"> {{item}} </view> 復(fù)制代碼

條件渲染

<!--wxml--> <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view> <view wx:elif="{{view == 'APP'}}"> APP </view> <view wx:else="{{view == 'MINA'}}"> MINA </view> 復(fù)制代碼

模板

<!--wxml--> <template name="staffName"><view>FirstName: {{firstName}}, LastName: {{lastName}}</view> </template><template is="staffName" data="{{...staffA}}"></template> <template is="staffName" data="{{...staffB}}"></template> <template is="staffName" data="{{...staffC}}"></template> 復(fù)制代碼

事件 {{count}}

Page({data: {count: 1},add: function(e) {this.setData({count: this.data.count + 1})} }) 復(fù)制代碼

組件屬性(需要在雙引號(hào)之內(nèi))

<view id="item-{{id}}"> </view> Page({data: {id: 0} })<view wx:if="{{condition}}"> </view><checkbox checked="{{false}}"> </checkbox> 特別注意：不要直接寫 checked="false"，其計(jì)算結(jié)果是一個(gè)字符串，轉(zhuǎn)成 boolean 類型后代表真值。<view hidden="{{flag ? true : false}}"> Hidden </view><view>{{"hello" + name}}</view><view>{{object.key}} {{array[0]}}</view> 復(fù)制代碼

數(shù)組

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>Page({data: {zero: 0} }) 最終組合成數(shù)組[0, 1, 2, 3, 4] 復(fù)制代碼

對(duì)象

<template is="objectCombine" data="{{for: a, bar: b}}"></template> a:1,b:2 {for: 1, bar: 2}<template is="objectCombine" data="{{foo, bar}}"></template>foo: 'my-foo',bar: 'my-bar'{foo: 'my-foo', bar:'my-bar'}<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template> obj1:{a:1,b:2 } 復(fù)制代碼

列表渲染 wx:for

<view wx:for="{{array}}"> {{index}}: {{item.message}} </view>array: [{message: 'foo', }, {message: 'bar' }] 復(fù)制代碼

{{idx}}: {{itemName.message}}

<block wx:for="{{[1, 2, 3]}}"><view> {{index}}: </view><view> {{item}} </view> </block> 復(fù)制代碼

wx:key

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>objectArray: [{id: 5, unique: 'unique_5'},{id: 4, unique: 'unique_4'}], 復(fù)制代碼

條件渲染 wx:if

wx:elif 和 wx:else 來(lái)添加一個(gè) else 塊

當(dāng) wx:if 的條件值切換時(shí)，框架有一個(gè)局部渲染的過(guò)程，因?yàn)樗鼤?huì)確保條件塊在切換時(shí)銷毀或重新渲染。

wx:if 也是惰性的，如果在初始渲染條件為 false，框架什么也不做，在條件第一次變成真的時(shí)候才開始局部渲染

hidden 就簡(jiǎn)單的多，組件始終會(huì)被渲染，只是簡(jiǎn)單的控制顯示與隱藏。 如果需要頻繁切換的情景下，用 hidden 更好，如果在運(yùn)行時(shí)條件不大可能改變則 wx:if 較好。

<view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view> 復(fù)制代碼

block wx:if

并不是一個(gè)組件，它僅僅是一個(gè)包裝元素，不會(huì)在頁(yè)面中做任何渲染，只接受控制屬性。

<block wx:if="{{true}}"><view> view1 </view><view> view2 </view> </block> 復(fù)制代碼

模板

1.定義模板

使用 name 屬性，作為模板的名字

2.使用模板

使用 is 屬性，聲明需要的使用的模板，然后將模板所需要的 data 傳入

is 屬性可以使用 Mustache 語(yǔ)法，來(lái)動(dòng)態(tài)決定具體需要渲染哪個(gè)模板：

<template is="msgItem" data="{{...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> 復(fù)制代碼

3.模板的作用域

模板擁有自己的作用域，只能使用 data 傳入的數(shù)據(jù)以及模版定義文件中定義的 模塊。

事件

什么是事件

事件是視圖層到邏輯層的通訊方式。 事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。 事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。 事件對(duì)象可以攜帶額外信息，如 id, dataset, touches 復(fù)制代碼

1.事件的使用方式 在組件中綁定一個(gè)事件處理函數(shù)。

事件綁定和冒泡

key 以bind或catch開頭，然后跟上事件的類型，如bindtap、catchtouchstart，bind和catch后可以緊跟一個(gè)冒號(hào)，其含義不變，如bind:tap、、catch:touchstart。

bind事件綁定不會(huì)阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

事件的捕獲階段

捕獲階段位于冒泡階段之前，且在捕獲階段中，事件到達(dá)節(jié)點(diǎn)的順序與冒泡階段恰好相反。需要在捕獲階段監(jiān)聽事件時(shí)，可以采用capture-bind、capture-catch關(guān)鍵字，后者將中斷捕獲階段和取消冒泡階段。

在下面的代碼中，點(diǎn)擊 inner view 會(huì)先后調(diào)用handleTap2、handleTap4、handleTap3、handleTap1。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">outer view<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">inner view</view> </view> 復(fù)制代碼

事件對(duì)象

當(dāng)組件觸發(fā)事件時(shí)，邏輯層綁定該事件的處理函數(shù)會(huì)收到一個(gè)事件對(duì)象

BaseEvent 基礎(chǔ)事件對(duì)象屬性列表：

屬性 類型 說(shuō)明 type String 事件類型 timeStamp Integer 事件生成時(shí)的時(shí)間戳 target Object 觸發(fā)事件的組件的一些屬性值集合 currentTarget Object 當(dāng)前組件的一些屬性值集合 復(fù)制代碼

CustomEvent 自定義事件對(duì)象屬性列表（繼承 BaseEvent）：

detail Object 額外的信息式 復(fù)制代碼

TouchEvent 觸摸事件對(duì)象屬性列表（繼承 BaseEvent）：

屬性 類型 說(shuō)明 touches Array 觸摸事件，當(dāng)前停留在屏幕中的觸摸點(diǎn)信息的數(shù)組 changedTouches Array 觸摸事件，當(dāng)前變化的觸摸點(diǎn)信息的數(shù)組 TouchEvent 觸摸事件對(duì)象屬性列表（繼承 BaseEvent） 復(fù)制代碼

引用

WXML 提供兩種文件引用方式import和include。

在 item.wxml 中定義了一個(gè)叫item的template：

<!-- item.wxml --> <template name="item"><text>{{text}}</text> </template> 復(fù)制代碼

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

<import src="item.wxml"/> <template is="item" data="{{text: 'forbar'}}"/> 復(fù)制代碼

import 的作用域

C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template

include（相當(dāng)于組件的引用） include 可以將目標(biāo)文件除了 template,wxs標(biāo)簽外的整個(gè)代碼引入，相當(dāng)于是拷貝到 include 位置，如：

<!-- index.wxml --> <include src="header.wxml"/> <view> body </view> <include src="footer.wxml"/> 復(fù)制代碼

3.WXSS 樣式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些擴(kuò)充和修改。

WXSS 擴(kuò)展的特性有

尺寸單位

rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

樣式導(dǎo)入

使用@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑

內(nèi)聯(lián)樣式

<view style="color:{{color}};" /> 復(fù)制代碼

style：靜態(tài)的樣式統(tǒng)一寫到 class 中。style 接收動(dòng)態(tài)的樣式，在運(yùn)行時(shí)會(huì)進(jìn)行解析，請(qǐng)盡量避免將靜態(tài)的樣式寫進(jìn) style 中，以免影響渲染速度。

選擇器

::after view::after 在 view 組件后邊插入內(nèi)容

::before view::before 在 view 組件前邊插入內(nèi)容

全局樣式與局部樣式

定義在 app.wxss 中的樣式為全局樣式，作用于每一個(gè)頁(yè)面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對(duì)應(yīng)的頁(yè)面，并會(huì)覆蓋 app.wxss 中相同的選擇器。

4.JS 交互邏輯

一個(gè)服務(wù)僅僅只有界面展示是不夠的，還需要和用戶做交互：微信小程序通過(guò)編寫 JS 腳本文件來(lái)處理用戶的操作。

<button bindtap="clickMe">點(diǎn)擊我</button> 復(fù)制代碼

如上，為button綁定用戶點(diǎn)擊事件，就是在js文件中完成的。 js文件中用Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面，接受一個(gè) object 參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。

我們可以在 JS 中調(diào)用小程序提供的豐富的 API。 page中的函數(shù)有： onLoad 生命周期函數(shù)--監(jiān)聽頁(yè)面加載

onReady 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成

onShow 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示

onHide 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏

onUnload 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載

onPullDownRefresh 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作

onReachBottom 頁(yè)面上拉觸底事件的處理函數(shù)

onShareAppMessage 用戶點(diǎn)擊右上角轉(zhuǎn)發(fā)

onPageScroll 頁(yè)面滾動(dòng)觸發(fā)事件的處理函數(shù)

onTabItemTap 當(dāng)前是 tab 頁(yè)時(shí)，點(diǎn)擊 tab 時(shí)觸發(fā)

總結(jié)

以上是生活随笔為你收集整理的微信小程序项目文件配置介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。