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

声明一下:该系列文章不定时更新,更新也没有预定顺序,纯粹是自己开发笔记。

今天的内容有:

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

1、uniapp页面

  • pages文件夹下新建vuenvue文件

  • 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' }
        }
    }

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

相关推荐
前端权几秒前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户380225859824几秒前
vue3源码解析:调度器
前端·vue.js
SimonKing6 分钟前
颠覆传统IO:零拷贝技术如何重塑Java高性能编程?
java·后端·程序员
sniper_fandc17 分钟前
SpringBoot系列—MyBatis(xml使用)
java·spring boot·mybatis
Dolphin_海豚23 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件26 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
胚芽鞘6811 小时前
查询依赖冲突工具maven Helper
java·数据库·maven
Charlie__ZS1 小时前
若依框架去掉Redis
java·redis·mybatis
AverageJoe19911 小时前
一次vite热更新不生效问题排查
前端·debug·vite