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

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