1.目錄結(jié)構(gòu)
前言:小程序包含一個(gè)描述整體程序的
app
和多個(gè)描述各自頁(yè)面的page
汁蝶。
一個(gè)小程序主體部分由三個(gè)文件組件,必須放在項(xiàng)目的根目錄甚颂,如下:
文件 | 必需 | 作用 |
---|---|---|
app.js |
是 | 小程序邏輯 |
app.json |
是 | 小程序公共配置 |
app.wxss |
否 | 小程序公共樣式表 |
一個(gè)小程序page
頁(yè)面由四個(gè)文件組件璧函,分別為:
文件類(lèi)型 | 必需 | 作用 |
---|---|---|
js |
是 | 頁(yè)面邏輯 |
wxml |
是 | 頁(yè)面結(jié)構(gòu) |
json |
否 | 頁(yè)面配置 |
wxss |
否 | 頁(yè)面樣式表 |
注意:為了方便開(kāi)發(fā)者減少配置項(xiàng)泣特,描述頁(yè)面的四個(gè)必須具有相同的路徑與文件名回论。
2.JSON
配置
JSON
是一種數(shù)據(jù)格式散罕,并不是編程語(yǔ)言,在小程序中傀蓉,JSON
扮演的靜態(tài)配置的角色欧漱。在項(xiàng)目的根目錄有一個(gè)app.json
和project.config.json
,此外在每一個(gè)page
文件中有一個(gè)相對(duì)于的json
文件葬燎。
小程序配置app.json
app.json
是當(dāng)前小程序的全局配置误甚,也就是說(shuō)在app.json
中配置的東西會(huì)應(yīng)用在每一個(gè)頁(yè)面中。包括小程序的所有頁(yè)面路徑萨蚕,界面表現(xiàn)靶草,網(wǎng)絡(luò)超時(shí)時(shí)間蹄胰,底部tab等岳遥。
新建的項(xiàng)目里面的app.json
配置內(nèi)容如下:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
}
}
簡(jiǎn)單說(shuō)一下這個(gè)配置各個(gè)項(xiàng)的含義:
-
pages
字段-----用于描述當(dāng)前小程序所有頁(yè)面路徑,這是為了讓微信客戶端知道當(dāng)前你的小程序頁(yè)面定義在哪個(gè)目錄裕寨。 -
window
字段------定義小程序所有頁(yè)面的頂部背景顏色浩蓉,文字顏色定義等派继。 - 其他配置項(xiàng)細(xì)節(jié)參考文檔微信開(kāi)發(fā)文檔配置項(xiàng)
JSON
語(yǔ)法
JSON
文件都是被包裹在一個(gè)大括號(hào)中{},通過(guò)key-value
的方式來(lái)表達(dá)數(shù)據(jù)捻艳,JSON
的key
必須包裹在一個(gè)雙引號(hào)中驾窟,在實(shí)踐中,編寫(xiě)JSON
的時(shí)候认轨,忘了給key
值加雙引號(hào)或者是把雙引號(hào)寫(xiě)成了單引號(hào)是常見(jiàn)的錯(cuò)誤绅络。
JSON
的值只能是以下幾種數(shù)據(jù)格式,其他任何格式都會(huì)觸發(fā)報(bào)錯(cuò)嘁字,列如:js
中的undefined
.
- 數(shù)字恩急,包含浮點(diǎn)數(shù)和整數(shù)
- 字符串,需要包裹在雙引號(hào)中
-
Bool
值纪蜒,true
或者false
- 數(shù)組衷恭,需要包裹在方括號(hào)中[]
- 對(duì)象,需要包裹在大括號(hào)中{}
Null
注意:需要注意的是
JSON
文件中無(wú)法使用注釋?zhuān)砑幼⑨寱?huì)引發(fā)報(bào)錯(cuò)纯续。
wxml
網(wǎng)頁(yè)編輯采用
HTML+CSS+JS
這樣的組合随珠。其中HTML是用來(lái)描述當(dāng)前這個(gè)頁(yè)面的結(jié)構(gòu),CSS
用來(lái)描述頁(yè)面的樣子猬错,JS
通常是用來(lái)處理這個(gè)頁(yè)面和用戶的交互窗看。
WXML和HTML
非常相似,WXML
由標(biāo)簽兔魂,屬性等等構(gòu)成烤芦。但是也有很多不一樣的地方,我們來(lái)一一闡述一下:
1.標(biāo)簽名字有點(diǎn)不一樣:
`HTML`常用到的標(biāo)簽是`div,p,span`析校。開(kāi)發(fā)者在寫(xiě)一個(gè)頁(yè)面的時(shí)候可以根據(jù)這個(gè)基本的標(biāo)簽組合出不一樣的組件构罗。
`WXML`小程序常用到的`view,button,text`等等。這些標(biāo)簽就是小程序給開(kāi)發(fā)者包裝好的基本能力智玻,我們還提供了地圖遂唧,視頻,音頻等等組件能力吊奢。[小程序組件](https://developers.weixin.qq.com/miniprogram/dev/component/)
2.多了一些wx:if
這樣的屬性以及{{ }}這樣的表達(dá)式:
在網(wǎng)頁(yè)的一般開(kāi)發(fā)流程中盖彭,我們通常會(huì)通過(guò)`JS`操作`DOM`(對(duì)應(yīng)HTML的描述產(chǎn)生的樹(shù)),以引起界面的變化響應(yīng)用戶的行為页滚。**例如:用戶點(diǎn)擊某個(gè)按鈕時(shí)召边,`JS`會(huì)記錄一些狀態(tài)到`JS`變量里邊,同時(shí)通過(guò)`DOM API `操控`DOM`的屬性或者行為裹驰,進(jìn)而引起界面變化隧熙。當(dāng)項(xiàng)目越來(lái)越大時(shí),你的代碼會(huì)充斥著非常多的界面交互邏輯喝程序的各種狀態(tài)變量幻林,顯然不是一個(gè)很好的開(kāi)發(fā)模式贞盯,因此就有了`MVVM`的開(kāi)發(fā)模式(如:`React,Vue`),提倡把渲染喝邏輯分離音念。簡(jiǎn)單的說(shuō)就是不要再讓`JS` 直接操控`DOM `,`JS`只需要管理狀態(tài)即可躏敢,然后再通過(guò)一種模板語(yǔ)法來(lái)描述狀態(tài)和界面結(jié)構(gòu)的關(guān)系即可闷愤。**
小程序?qū)⑽谋綡ello World的字符串顯示在界面上。
//WXML這樣編寫(xiě)
<text>{{msg}}</text>
//JS這樣編寫(xiě)
data:{
msg:'Hello World' //初始化定義數(shù)據(jù)
}
通過(guò){{ }}的語(yǔ)法把一個(gè)變量綁定到界面上件余,稱之為“數(shù)據(jù)綁定”.僅僅通過(guò)數(shù)據(jù)綁定還不夠完整的描述狀態(tài)和界面的關(guān)系讥脐,還需要if/else,for
等控制能力,在小程序里邊啼器,這些控制能力都用wx
:開(kāi)頭的屬性來(lái)表達(dá)攘烛。WXML
WXSS
樣式
WXSS
具有CSS
大部分的特性,小程序WXSS
也做了一些擴(kuò)充和修改镀首。
1.新增了尺寸單位:
寫(xiě)`CSS`樣式時(shí)坟漱,開(kāi)發(fā)者需要考慮手機(jī)設(shè)備的屏幕會(huì)有不同的寬度和設(shè)備像素比,采用一些技巧來(lái)?yè)Q算一些像素單位更哄。`WXSS`在底層支持新的尺寸單位`rpx`芋齿,開(kāi)發(fā)者可以免去換算的煩惱,只要交給小程序底層來(lái)?yè)Q算即可成翩,由于換算采用的浮點(diǎn)數(shù)運(yùn)算觅捆,所以運(yùn)算結(jié)果會(huì)和預(yù)期結(jié)果有一點(diǎn)點(diǎn)偏差。
2.提供了全局的樣式和局部樣式:
與前面的app.json;peag.json
的概念相同麻敌,你可以寫(xiě)一個(gè)app.wxss
作為全局樣式栅炒,會(huì)作用于當(dāng)前小程序的所有頁(yè)面,局部頁(yè)面樣式page.wxss
僅對(duì)當(dāng)前頁(yè)面生效术羔。
3.此外WXSS
僅支持部分css
選擇器:
更詳細(xì)參考WXSS
JS
邏輯交互:
一個(gè)服務(wù)僅僅只有界面展示是不夠的赢赊,還需要和用戶做交互:響應(yīng)用戶的點(diǎn)擊,獲取用戶的位置等等级历,在小程序里邊释移,我們就通過(guò)編寫(xiě)JS
腳本來(lái)處理用戶的操作。
<view>{{ msg }}</view>
<button bindtap="clickMe">
點(diǎn)擊
</button>
點(diǎn)擊button按鈕時(shí)寥殖,我們希望把界面上msg
顯示成”Hello World
“玩讳,于是我們?cè)?code>button上聲明一個(gè)屬性:bindtap
,在js
文件里邊聲明了clickMe
方法來(lái)響應(yīng)這次點(diǎn)擊操作:
Page({
data:{
msg:''
},
clickMe(){
this.setData({
msg:'Hello World'
})
}
})
更詳細(xì)參考WXML事件
此外還可以在JS
調(diào)用小程序提供的豐富的API
,利用API
可以方便的調(diào)用微信提供的能力嚼贡。通過(guò)wx.getUserInfo
獲取微信用戶的頭像和昵稱熏纯,最后通過(guò)setData
把獲取到的信息顯示到界面上,更詳細(xì)參考小程序API`
3.util
公共函數(shù)以及讀取
util
目錄下的util.js
文件專(zhuān)用于小程序項(xiàng)目中的公共函數(shù)定義粤策,可以將項(xiàng)目開(kāi)發(fā)過(guò)程中的公共代碼方法提取封裝到util.js
文件中樟澜。
1.util/util.js
中定義公共方法:
const toStr = s =>{
s="你好,"+s;
return s;
}
module.exports = {
formatTime,toStr
}
2.在指定頁(yè)面中的js
中模塊化引入utils
的js
文件:
//通過(guò)require方式引入整個(gè)util
//const util=require("../../utils/util")
//通過(guò)import方式引入整個(gè)util
//import util from "../../utils/util"
//引入指定的模塊
import {formatTime} from "../../utils/util"
采用整體引入方式掐场,在調(diào)用時(shí)請(qǐng)使用實(shí)例名往扔,例如:
util.formatDate(new Date())
3.利用頁(yè)面的onLoad
事件完成數(shù)據(jù)賦值展示:
onLoad() {
this.setData({
loginTime:formatTime(new Date())
});
if (wx.getUserProfile) {
this.setData({
canIUseGetUserProfile: true
})
}
}
4.小程序配置
全局配置:
小程序根目錄下的app.json
文件用來(lái)對(duì)微信小程序進(jìn)行全局配置,決定頁(yè)面文件的路徑熊户,窗口表現(xiàn)萍膛,設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間,設(shè)置tab
等等嚷堡。更詳細(xì)參考小程序全局配置
常用的配置選項(xiàng)app.json
:
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首頁(yè)"
}, {
"pagePath": "pages/logs/index",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}
頁(yè)面配置:
每一個(gè)小程序頁(yè)面也可以使用同名`.json`文件來(lái)對(duì)文本頁(yè)面的窗口表現(xiàn)進(jìn)行配置蝗罗,頁(yè)面中配置會(huì)覆蓋`app.json`的`window`中相同的配置項(xiàng)。
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
配置小程序/sitemap
配置:
微信現(xiàn)在已開(kāi)發(fā)小程序內(nèi)搜索蝌戒,開(kāi)發(fā)者可以通過(guò)`sitemap.json`配置串塑,或者管理后臺(tái)頁(yè)面收錄開(kāi)關(guān)來(lái)配置其小程序頁(yè)面是否允許微信索引。當(dāng)開(kāi)發(fā)者允許微信索引時(shí)北苟,微信會(huì)通過(guò)爬蟲(chóng)的形式桩匪,為小程序的頁(yè)面內(nèi)容建立索引。當(dāng)用戶的搜索詞條觸發(fā)該索引時(shí)友鼻,小程序的頁(yè)面將可能展示在搜索結(jié)果中傻昙。爬蟲(chóng)訪問(wèn)小程序內(nèi)頁(yè)面時(shí),會(huì)攜帶特定的`user-agent:mpcrawler`及[場(chǎng)景值](https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html):1129.需要注意的是彩扔,若小程序爬蟲(chóng)發(fā)現(xiàn)的頁(yè)面數(shù)據(jù)和真實(shí)用戶的呈現(xiàn)不一致妆档,那么該頁(yè)面將不會(huì)進(jìn)入索引中。
具體配置說(shuō)明:
- 頁(yè)面收錄設(shè)置:可對(duì)整個(gè)小程序的索引進(jìn)行關(guān)閉虫碉,小程序管理后臺(tái)-功能-頁(yè)面內(nèi)容接入-頁(yè)面收錄開(kāi)開(kāi)關(guān)贾惦;詳情
-
sitemap
配置:可對(duì)特定頁(yè)面的索引進(jìn)行關(guān)閉;
sitemap
配置:
小程序根目錄下的sitemap.json
文件中用來(lái)配置小程序及其頁(yè)面是否允許被微信索引敦捧。完整配置項(xiàng)說(shuō)明請(qǐng)參考小程序sitemap配置
例如1:
{
"rules":[{
"action": "allow",
"page": "*"
}]
}
所有頁(yè)面都會(huì)被微信索引(默認(rèn)情況)
例如2:
{
"rules":[{
"action": "disallow",
"page": "path/to/page"
}]
}
配置path/to/page
頁(yè)面不被索引须板,其余頁(yè)面允許被索引
例如3:
{
"rules":[{
"action": "allow",
"page": "path/to/page"
}, {
"action": "disallow",
"page": "*"
}]
}
配置path/to/page
頁(yè)面被索引,其余頁(yè)面不被索引
注:沒(méi)有sitemap.json
則默認(rèn)所有頁(yè)面都能被索引
注:{’action':'allow','page':'\*'
}是優(yōu)先級(jí)最低的默認(rèn)規(guī)則兢卵,末顯示指明'disallow’
的都默認(rèn)被索引
如何調(diào)試:
當(dāng)在小程序項(xiàng)目中設(shè)置了sitemap
的配置文件(默認(rèn)為sitemap.json
)時(shí)逼纸,便可以在開(kāi)發(fā)者工具控制臺(tái)上顯示當(dāng)前頁(yè)面是否被索引的調(diào)試信息(最新版本的開(kāi)發(fā)者工具支持索引提示)
//sitemap.json文件
{
"desc": "關(guān)于本文件的更多信息,請(qǐng)參考文檔 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
"rules": [{
"action": "allow",
"page": "*"
}]
}
注意:sitemap
的索引提示是默認(rèn)開(kāi)啟的济蝉,如需要關(guān)閉sitemap
的索引提示杰刽,可在小程序項(xiàng)目配置文件project.config.json
的sitemap
中配置字段checkSiteMap
為false
;sitemap
文件內(nèi)容容量大為5120個(gè)UTF8
字符王滤;