1.公眾平臺申請賬號：

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

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

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

登錄后新建項目時，需輸入申請的小程序的 AppID(相當于一個身份證，很多地方需要用到)

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

3.項目里邊生成了不同類型的文件:

.json 后綴的 JSON 配置文件

.wxml 后綴的 WXML 模板文件

.wxss 后綴的 WXSS 樣式文件

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

1.JSON 配置

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

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

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

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

1.app.json 配置項列表

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

pages

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

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

文件名不需要寫文件后綴，因為框架會自動去尋找路徑下 .json, .js, .wxml, .wxss 四個文件進行整合。

window

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

navigationBarBackgroundColor HexColor #000000 導航欄背景顏色，如"#000000" navigationBarTextStyle String white 導航欄標題顏色，僅支持 black/white navigationBarTitleText String 導航欄標題文字內(nèi)容 navigationStyle String default 導航欄樣式，僅支持 default/custom。custom 模式可自定義導航欄，只保留右上角膠囊狀的按鈕 微信版本 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 是否開啟下拉刷新，詳見頁面相關(guān)事件處理函數(shù) onReachBottomDistance Number 50 頁面上拉觸底事件觸發(fā)時距頁面底部距離，單位為px 復制代碼

tabBar

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

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

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

list 接受一個數(shù)組，數(shù)組中的每個項都是一個對象

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

networkTimeout

可以設置各種網(wǎng)絡請求的超時時間。

request Number 否 wx.request的超時時間，單位毫秒，默認為：60000 connectSocket Number 否 wx.connectSocket的超時時間，單位毫秒，默認為：60000 uploadFile Number 否 wx.uploadFile的超時時間，單位毫秒，默認為：60000 downloadFile Number 否 wx.downloadFile的超時時間，單位毫秒，默認為：60000 復制代碼

debug

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

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

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

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

2.WXML 模板

WXML 充當?shù)木褪穷愃?HTML 的角色

MVVM 的開發(fā)模式， 不再讓 JS 直接操控 DOM，JS只需要管理狀態(tà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> 復制代碼

小程序的 WXML 用的標簽是 view, button, text 等等

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

<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 wx:for="{{array}}"> {{item}} </view> 復制代碼

條件渲染

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

模板

<!--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> 復制代碼

事件 {{count}}

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

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

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

數(shù)組

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

對象

<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 } 復制代碼

列表渲染 wx:for

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

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

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

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'}], 復制代碼

條件渲染 wx:if

wx:elif 和 wx:else 來添加一個 else 塊

當 wx:if 的條件值切換時，框架有一個局部渲染的過程，因為它會確保條件塊在切換時銷毀或重新渲染。

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

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

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

block wx:if

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

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

模板

1.定義模板

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

2.使用模板

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

is 屬性可以使用 Mustache 語法，來動態(tài)決定具體需要渲染哪個模板：

<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> 復制代碼

3.模板的作用域

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

事件

什么是事件

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

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

事件綁定和冒泡

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

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

事件的捕獲階段

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

在下面的代碼中，點擊 inner view 會先后調(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ā)事件時，邏輯層綁定該事件的處理函數(shù)會收到一個事件對象

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

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

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

detail Object 額外的信息式 復制代碼

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

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

引用

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

在 item.wxml 中定義了一個叫item的template：

<!-- 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 的作用域

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

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

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

3.WXSS 樣式

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

WXSS 擴展的特性有

尺寸單位

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

樣式導入

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

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

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

style：靜態(tài)的樣式統(tǒng)一寫到 class 中。style 接收動態(tài)的樣式，在運行時會進行解析，請盡量避免將靜態(tài)的樣式寫進 style 中，以免影響渲染速度。

選擇器

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

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

全局樣式與局部樣式

定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，并會覆蓋 app.wxss 中相同的選擇器。

4.JS 交互邏輯

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

<button bindtap="clickMe">點擊我</button> 復制代碼

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

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

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

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

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

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

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

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

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

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

onTabItemTap 當前是 tab 頁時，點擊 tab 時觸發(fā)

總結(jié)

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

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