接上次实现了更改示例显示的hello world。
这次实现多页面路由。
第一步:
点开app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
"pages"里即代表小程序所有的路由页面。
这里尝试添加两个页面:
{
"pages":[
"pages/index/index",
"pages/index/test/test",
"pages/test/test",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
添加的这两个页面有什么区别呢?等会再说
"pages/index/test/test",
"pages/test/test",
第二步:
按下ctrl+s保存一下,发现开发工具自动帮你建好了每个页面对应的4个文件。
那么页面建好了怎么跳转呢?
第三步:
回到index.wxml。
<view class="usermotto">
<button bindtap="gototest_a">test1</button>
<button bindtap="gototest_b">test2</button>
<text class="user-motto">{{motto}}</text>
</view>
里面加两个按钮,分别绑定两个跳转会用到的方法。
data: {
motto: 'test',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件处理函数
gototest_a:function(){
var testurl="test/test"
wx.navigateTo({url:testurl})
},
这里index路径下的test页面用navigateTo直接跳转。
但是与index同级的test页面就麻烦一些,用navigateTo无法直接跳过去。
先回到app.json里。
"pages":[
"pages/index/index",
"pages/index/test/test",
"pages/test/test",
"pages/logs/logs"
],
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/test/test",
"text": "测试"
}
]
},
添加一个tabBar对象,对应需要同级间路由的两个路径。
然后在index.js里开始写gototest_b的方法。
gototest_b: function () {
var testurl = "/pages/test/test"
wx.switchTab({url:testurl})
},
第四步:
测试,然后成功!
除了使用api提供的方法进行路由外,也可以直接用相关的组件进行路由,详情可以去微信小程序的官方api里查看。