假如我們新建頁面`pages/demo/demo`; ## 注冊頁面 在 `app.json` `pages`中增加`pages/demo/demo` ``` { "pages": [ "pages/index/index", "pages/my/my", "pages/user/setEmail", "pages/user/setMobile", "pages/about/update", "pages/demo/demo" /*這里是增加的 demo 頁面*/ ], "window": { "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "white", "navigationBarTitleText": "ThinkCMF", "navigationBarTextStyle": "black" }, "tabBar": { "color": "#666666", "selectedColor": "#333333", "backgroundColor": "#ffffff", "borderStyle": "#eeeeee", "list": [ { "text": "首頁", "pagePath": "pages/index/index", "iconPath": "images/icons/home.png", "selectedIconPath": "images/icons/home_selected.png" }, { "text": "我的", "pagePath": "pages/my/my", "iconPath": "images/icons/my.png", "selectedIconPath": "images/icons/my_selected.png" } ] }, "debug": true } ``` ## 創建頁面文件 在`pages`目錄下創建`demo/demo.js`文件 ``` // 引入 api 類庫，可以頁面中直接使用 var api = require('../../utils/api.js'); // 獲取全局 app 變量 var app = getApp(); Page({ }); ``` 在`pages`目錄下創建`demo/demo.wxml`文件 ``` <view> hello demo! </view> ``` ## 在底部導航添加 demo 頁 在 app.json tabBar.list 里添加 ``` { "text": "Demo", "pagePath": "pages/demo/demo", "iconPath": "images/icons/home.png", "selectedIconPath": "images/icons/home_selected.png" }, ``` 添加以上代碼后： ``` { "pages": [ "pages/index/index", "pages/my/my", "pages/user/setEmail", "pages/user/setMobile", "pages/about/update", "pages/demo/demo" ], "window": { "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "white", "navigationBarTitleText": "ThinkCMF", "navigationBarTextStyle": "black" }, "tabBar": { "color": "#666666", "selectedColor": "#333333", "backgroundColor": "#ffffff", "borderStyle": "#eeeeee", "list": [ { "text": "首頁", "pagePath": "pages/index/index", "iconPath": "images/icons/home.png", "selectedIconPath": "images/icons/home_selected.png" }, { "text": "Demo", "pagePath": "pages/demo/demo", "iconPath": "images/icons/home.png", "selectedIconPath": "images/icons/home_selected.png" }, { "text": "我的", "pagePath": "pages/my/my", "iconPath": "images/icons/my.png", "selectedIconPath": "images/icons/my_selected.png" } ] }, "debug": true } ``` ## 界面演示