小程序目錄結(jié)構(gòu)

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.jsonproject.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ù)捻艳,JSONkey必須包裹在一個(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 中模塊化引入utilsjs文件:

//通過(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.jsonsitemap中配置字段checkSiteMapfalsesitemap文件內(nèi)容容量大為5120個(gè)UTF8字符王滤;

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末贺嫂,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子雁乡,更是在濱河造成了極大的恐慌第喳,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件踱稍,死亡現(xiàn)場(chǎng)離奇詭異曲饱,居然都是意外死亡悠抹,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)扩淀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)楔敌,“玉大人,你說(shuō)我怎么就攤上這事驻谆÷汛眨” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵胜臊,是天一觀的道長(zhǎng)勺卢。 經(jīng)常有香客問(wèn)我,道長(zhǎng)象对,這世上最難降的妖魔是什么黑忱? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮勒魔,結(jié)果婚禮上杨何,老公的妹妹穿的比我還像新娘。我一直安慰自己沥邻,他們只是感情好危虱,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著唐全,像睡著了一般埃跷。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上邮利,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天弥雹,我揣著相機(jī)與錄音,去河邊找鬼延届。 笑死剪勿,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的方庭。 我是一名探鬼主播厕吉,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼械念!你這毒婦竟也來(lái)了头朱?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤龄减,失蹤者是張志新(化名)和其女友劉穎项钮,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡烁巫,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年署隘,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片亚隙。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡磁餐,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出恃鞋,到底是詐尸還是另有隱情,我是刑警寧澤亦歉,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布恤浪,位于F島的核電站,受9級(jí)特大地震影響肴楷,放射性物質(zhì)發(fā)生泄漏水由。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一赛蔫、第九天 我趴在偏房一處隱蔽的房頂上張望砂客。 院中可真熱鬧,春花似錦呵恢、人聲如沸鞠值。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)彤恶。三九已至,卻和暖如春鳄橘,著一層夾襖步出監(jiān)牢的瞬間声离,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工瘫怜, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留术徊,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓鲸湃,卻偏偏與公主長(zhǎng)得像赠涮,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子暗挑,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容