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

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

相关推荐
胚芽鞘68144 分钟前
关于java项目中maven的理解
java·数据库·maven
岁忧2 小时前
(LeetCode 面试经典 150 题 ) 11. 盛最多水的容器 (贪心+双指针)
java·c++·算法·leetcode·面试·go
CJi0NG2 小时前
【自用】JavaSE--算法、正则表达式、异常
java
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
Hellyc2 小时前
用户查询优惠券之缓存击穿
java·redis·缓存
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
今天又在摸鱼3 小时前
Maven
java·maven
老马啸西风3 小时前
maven 发布到中央仓库常用脚本-02
java·maven
代码的余温3 小时前
MyBatis集成Logback日志全攻略
java·tomcat·mybatis·logback