1.目錄結(jié)構(gòu)

前言：小程序包含一個(gè)描述整體程序的app和多個(gè)描述各自頁(yè)面的page汁蝶。

一個(gè)小程序主體部分由三個(gè)文件組件，必須放在項(xiàng)目的根目錄甚颂，如下：

一個(gè)小程序page頁(yè)面由四個(gè)文件組件璧函，分別為：

注意：為了方便開(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字符王滤；