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

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

文件必須作用

app.js	是	小程序邏輯
app.json	是	小程序公共配置
app.wxss	否	小程序公共樣式表

一個(gè)小程序頁面由四個(gè)文件組成，分別是：

文件類型必須作用

js	是	頁面邏輯
wxml	是	頁面結(jié)構(gòu)
json	否	頁面配置
wxss	否	頁面樣式表

2. app.json 文件介紹

小程序根目錄下的 app.json 文件用來對(duì)微信小程序進(jìn)行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。

2.1.自動(dòng)創(chuàng)建page頁面文件

2.2 菜單欄

"tabBar": {"list": [{"pagePath": "pages/index/index","text": "主頁","iconPath": "images/tabBar/icon_index.png","selectedIconPath": "images/tabBar/icon_index_selected.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "images/tabBar/icon_my.png","selectedIconPath": "images/tabBar/icon_my_selected.png"}] },

2.3 頁面配置

每一個(gè)小程序頁面也可以使用同名 .json 文件來對(duì)本頁面的窗口表現(xiàn)進(jìn)行配置，頁面中配置項(xiàng)會(huì)覆蓋app.json 的 window 中相同的配置項(xiàng)。

{"navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black","navigationBarTitleText": "小程序名稱","backgroundColor": "#eeeeee","backgroundTextStyle": "light" }

3 app.js文件

globalData: {url: "http://127.0.0.1/", },

onLaunch() 函數(shù)：默認(rèn)程序打開后一定執(zhí)行的功能

4 綜合小案例

這里配置兩個(gè)文件：app.json,index.wxml

4.1 app.json

{"pages": ["pages/index/index","pages/my/my"],"window": {"backgroundColor": "#F6F6F6","backgroundTextStyle": "light","navigationBarBackgroundColor": "#F6F6F6","navigationBarTitleText": "小程序名稱","navigationBarTextStyle": "black"},"sitemapLocation": "sitemap.json","style": "v2","tabBar": {"list": [{"pagePath": "pages/index/index","text": "主頁","iconPath": "images/tabBar/icon_index.png","selectedIconPath": "images/tabBar/icon_index_selected.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "images/tabBar/icon_my.png","selectedIconPath": "images/tabBar/icon_my_selected.png"}]} }

4.2 index.wxml

<view>你真棒 </view>

歡迎加入博主官方QQ群交流: 779133600

總結(jié)

以上是生活随笔為你收集整理的微信小程序开发实战（一）开发指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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