微信小程序开发入门(2)

接上次实现了更改示例显示的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里查看。