小程序的路由
路由:主要用于实现单页应用技术(SPA)
一、JS触发路由
- wx.navigatoTo({}) 相当于vue中的this.$router.push();
特点:可以回退到上一个页面,保留历史记录,不能跳转到tabBar页面
例如:
let {id}=e.currentTarget.dataset;
wx.navigateTo({
url: `/pages/list/list?id=${id}`,
})
路由如何传参?
- 传值:
wx.navigateTo({
url: `/pages/list/list?id=${id}`,
})
- 接值:到要跳转的页面通过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…