uni-events-helper-wx
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

131 lines
3.1 KiB

3 years ago
  1. ## 1、全局路由守卫
  2. ##### (1) 路由拦截
  3. [uni-simple-router](https://hhyang.cn/) 路由、拦截、最优雅的解决方案
  4. ##### (2) 路由配置
  5. 通过 vue.config.js 配合[uni-read-pages](https://github.com/SilurianYang/uni-read-pages),可以随心所欲的读取 pages.json 下的所有配置
  6. ## 2、Request封装
  7. 适用于一项目多域名请求、七牛云图片上传、本地服务器图片上传、支持 Promise.
  8. ## 3、api集中管理
  9. api集中管理; 为简化逻辑代码量整洁的原则,像调用函数一样调用api,做到代码分离,在apis目录统一创建api函数
  10. ## 4、小程序更新提示代码,配置分包,等必备代码
  11. sub目录分包管理 由于微信小程序的限制,上传发布机制总包大小不能大于2m,所以项目若超出该限制,要在page.json中做分包处理,分包处理的配置与pages目录保持一致,封装更新提示代码
  12. ## 5、配置vuex
  13. 不需要引入每个子store模块
  14. ```javascript
  15. import Vue from "vue";
  16. import Vuex from "vuex";
  17. Vue.use(Vuex);
  18. const files = require.context("./modules", false, /\.js$/);
  19. let modules = {
  20. state: {},
  21. mutations: {},
  22. actions: {}
  23. };
  24. files.keys().forEach((key) => {
  25. Object.assign(modules.state, files(key)["state"]);
  26. Object.assign(modules.mutations, files(key)["mutations"]);
  27. Object.assign(modules.actions, files(key)["actions"]);
  28. });
  29. const store = new Vuex.Store(modules);
  30. export default store;
  31. ```
  32. 页面使用Vuex
  33. ```javascript
  34. import { mapState,mapActions } from 'vuex';
  35. computed: {
  36. ...mapState(['userInfo'])
  37. }
  38. methods: {
  39. ...mapActions(['getUserInfo'])
  40. }
  41. ```
  42. 通用的mutations方法,只需要写一个就行了
  43. ```javascript
  44. //更新state数据
  45. setStateAttr(state, param) {
  46. if (param instanceof Array) {
  47. for (let item of param) {
  48. state[item.key] = item.val;
  49. }
  50. } else {
  51. state[param.key] = param.val;
  52. }
  53. }
  54. ```
  55. actions调用
  56. ```javascript
  57. async setUserData({
  58. state,
  59. commit
  60. }, data) {
  61. commit('setStateAttr', {
  62. key: 'userInfo',
  63. val: data
  64. })
  65. uni.setStorageSync('userInfo', data);
  66. },
  67. ```
  68. ## 6、全局过滤器filters
  69. main.js引入filters,使用如下
  70. ```javascript
  71. {{shop.shopAddress|autoAddPoints}}
  72. ```
  73. ## 7、无关系组件间的通信=>事件车
  74. > 事件车的基本原理就是在本项目Vue的原型对象里新生成一个Vue对象专门用来负责无关系,跨级组件间的通信
  75. main.js声明事件bus
  76. ```javascript
  77. Vue.prototype.$bus = new Vue() // event Bus 用于无关系组件间的通信。
  78. ```
  79. A组件 监听($on)
  80. ```javascript
  81. // onload 里面
  82. this.$bus.$on('updateChecked', this.updateChecked)
  83. // methods 里面
  84. updateChecked(index){
  85. console.log('这里就拿到了跨级组件的index',index)
  86. }
  87. ```
  88. B组件 触发($emit)
  89. > B组件触发A组件的updateChecked 传index值给A组件
  90. ```javascript
  91. this.$bus.$emit('updateChecked', index);
  92. ```
  93. ## [github源码下载](https://github.com/mgbq/uni-template)
  94. ## [插件市场源码](https://ext.dcloud.net.cn/plugin?id=4008)
  95. ## 常见问题
  96. #### 1 运行不了,控制台报错,请安装依赖
  97. ```npm install ```
  98. ```
  99. ```