假如我们新建页面`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 } ``` ## 界面演示