Java老鸟前端小白uniapp+uview开发小程序第2天

声明一下：该系列文章不定时更新，更新也没有预定顺序，纯粹是自己开发笔记。
今天的内容有：

• uniapp的页面路由、跳转、参数、Vuex等

1、uniapp页面

• 在pages文件夹下新建vue或nvue文件
• 在pages.json配置页面属性"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }, { "path" : "pages/home/home", "style" : { "navigationBarTitleText" : "新朋友" } }],

以上步骤使用HbuilerX创建页面的时间会自动完成

2、页面跳转

2.1 uni.navigateTo

跳转到新页面，不会关闭当前页面

• 不带参数：// 使用uni.navigateTo跳转到新页面uni.navigateTo({ url: '/pages/home/home' // 这里的URL是相对于pages.json中配置的路径});
• 带有参数：- 带参数跳转function navigateToPageB() { const param = { id: 123, name: 'uniapp' }; // 使用 encodeURIComponent 对参数进行编码 const params = encodeURIComponent(JSON.stringify(param)); uni.navigateTo({ url: `/pages/pageB/pageB?params=${params}` });}- 接收参数export default { onLoad(options) { // 获取传递的参数 if (options.params) { // 使用 decodeURIComponent 解码并解析 JSON const param = JSON.parse(decodeURIComponent(options.params)); console.log(param); // { id: 123, name: 'uniapp' } } }}

2.2 uni.redirectTo

跳转到新页面，会关闭当前页面

• 不带参数：// 使用 uni.redirectTo 进行页面跳转 （会关闭当前页面）uni.redirectTo({ url: '/pages/home/home' // 这里的URL是相对于pages.json中配置的路径});
• 带有参数： - 带参数跳转function redirectToPageB() { const param = { id: 123, name: 'uniapp' }; // 使用 encodeURIComponent 对参数进行编码 const params = encodeURIComponent(JSON.stringify(param)); uni.redirectTo({ url: `/pages/pageB/pageB?params=${params}` });}- 接收参数export default { onLoad(options) { if (options.params) { const param = JSON.parse(decodeURIComponent(options.params)); console.log(param); } }}

3、Vuex 全局状态

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。这里只记录它的用法：

3.1 用法1：页面传递参数

• 设置 Vuex// store.jsexport const store = new Vuex.Store({ state: { sharedData: null }, mutations: { setSharedData(state, data) { state.sharedData = data; } }});
• 页面设置数据import { mapMutations } from 'vuex';export default { methods: { ...mapMutations(['setSharedData']), navigateToPageB() { const data = { id: 789, name: 'vuex' }; this.setSharedData(data); // 将数据存储在 Vuex 中 uni.navigateTo({ url: '/pages/pageB/pageB' }); } }}
• 页面获取数据import { mapState } from 'vuex';export default { computed: { ...mapState(['sharedData']) }, onLoad() { console.log(this.sharedData); // { id: 789, name: 'vuex' } }}

今天摸鱼到此，赶紧写代码去