1. 目錄結構

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

文件必須作用

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

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

文件類型必須作用

js	是	頁面邏輯
wxml	是	頁面結構
json	否	頁面配置
wxss	否	頁面樣式表

2. app.json 文件介紹

小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。

2.1.自動創建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 頁面配置

每一個小程序頁面也可以使用同名 .json 文件來對本頁面的窗口表現進行配置，頁面中配置項會覆蓋app.json 的 window 中相同的配置項。

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

3 app.js文件

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

onLaunch() 函數：默認程序打開后一定執行的功能

4 綜合小案例

這里配置兩個文件：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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。