小程序培训第三天

307 阅读1分钟

小程序的路由

路由:主要用于实现单页应用技术(SPA)

API路由文档:developers.weixin.qq.com/miniprogram…

参考文档:developers.weixin.qq.com/miniprogram…

一、JS触发路由

  1. wx.navigatoTo({}) 相当于vue中的this.$router.push();
特点:可以回退到上一个页面,保留历史记录,不能跳转到tabBar页面

例如:


 let {id}=e.currentTarget.dataset;
  wx.navigateTo({
      url: `/pages/list/list?id=${id}`,
})


路由如何传参?

  1. 传值:
 wx.navigateTo({
      url: `/pages/list/list?id=${id}`,
})

  1. 接值:到要跳转的页面通过onLoad来中的options来接收,例如:list页面接收
  onLoad: function (options) {

    console.log(options.id)

  },


动态改变状态栏标题:

 wx.setNavigationBarTitle({
      title:title,
 })

2.wx.switchTab:跳转到tabBar页面,没有回退功能

3.wx.reLaunch可以跳转到任意页面包括tabBar和非tabBar页面,没有回退

 wx.reLaunch({
     url: '/pages/list/list',
   })

4.wx.redirectTo:跳转到非tabbar页面,不能回退,但有一个回首页的一个按钮

相当于vue中的this.$router.replace();

5.wx.navigateBack 回退到历史的某个页面

相当于vue中的this.$router.history(-1);

wx.navigateBack({
 delta: 2
})

二、通过标签的方式触发路由

navigator标签来触发 --》类似于vue-router中的router-link

    <block wx:for="{{ users }}" wx:key="index">

      <navigator url="/pages/detail/detail?id={{ item.id }}" open-type="navigate">

        <view class="item">
          <text>
          {{ index }}--用户名:{{ item.name }}--地址:{{ item.address }}
        </text>
        </view>

      </navigator>

    </block>


小程序的数据请求

微信小程序主要通过wx.request()来实现与后端数据交互

官方参考文档:developers.weixin.qq.com/miniprogram…

小程序的内置组件和自定义组件

提前预习一下自定义组件的文档:

developers.weixin.qq.com/miniprogram…

developers.weixin.qq.com/miniprogram…

小程序的第三方组件库