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.js
export 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' }
    }
}

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