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

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

相关推荐
FG.3 分钟前
Day22
java·面试
菜鸟的迷茫5 分钟前
Redis 缓存雪崩、穿透、击穿面试题深度解析与 Spring Boot 实战代码示例
java
前端 贾公子8 分钟前
Monorepo + vite 怎么热更新
前端
珹洺16 分钟前
C++算法竞赛篇:DevC++ 如何进行debug调试
java·c++·算法
SHUIPING_YANG24 分钟前
根据用户id自动切换表查询
java·服务器·数据库
爱吃烤鸡翅的酸菜鱼36 分钟前
IDEA高效开发:Database Navigator插件安装与核心使用指南
java·开发语言·数据库·编辑器·intellij-idea·database
惊涛骇浪、42 分钟前
SpringMVC + Tomcat10
java·tomcat·springmvc
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#