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 解码并解析 JSONconst 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' }}
  }
  

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