开发总结

发表于 更新于 阅读次数：

一，移动端

开发经验

  1. 开始时进行分包
  2. 下拉刷新：如果是整个页面的刷新是写在外面的
  3. 样式的话，先写的差不多，再去调，不要写一下调一下，浪费时间
  4. 有些样式不好调的时候，可以直接在调试工具找到对应的元素或上级元素，直接写样式代码来调整。

样式布局

  1. 一般不写高度，通过padding来撑开元素
  2. 可以通过隐藏元素的方式来占位，实现特殊的布局
  3. 灵活使用flex布局的伸缩属性
  4. 使用scroll时，注意图片的高度，容易出现高度计算不够的问题
  5. 使用v-for的margin-bottom（多余一个边距），可以用last-child来取消最后一个margin-bottom
  6. 布局尽量使用类名，其他特殊的选择器在修改的时候容易出问题

优化

  1. 加入骨架屏，刚开始设计页面的时候就考虑骨架屏
  2. 图片的预加载和懒加载
  3. 微信开发者工具可以给自己的小程序打分，这样就可以针对性的进行优化
  4. 小程序首屏加载优化
  5. 优化时，看看uniapp官方文档的优化建议
  6. 在 uni-app 中，定义在 data 里面的数据每次变化时都会通知视图层重新渲染页面。所以如果不是视图所需要的变量，可以不定义在 data 中，可在外部定义变量或直接挂载在vue实例上，以避免造成资源浪费
  7. 小程序优化https://zhuanlan.zhihu.com/p/135983160
  8. 用户体验
    • 点击效果，及时反馈
    • 动画效果，眼前一亮

uniapp

  1. 图片尽量加上高度，避免图片加载时突然宽高变化的问题
  2. 配置esaycom，组件引入就很方便了
  3. 利用微信开发者工具的mock来测试数据
  4. uniapp中的url不需要加@
  5. uni.previewImage urls需要数组
  6. ios的Date不支持2020-10-1 .replace(/-/g,’/‘) 要替换成/
  7. 当前页面的改变会改变上个页面的状态时，使用onShow来刷新。

二， 整体项目

HACK

  1. 通过清空数据实现隐藏

代码部分

  1. 回调层次过深时，使用promise来减少回调

  2. 给对象添加属性，如果只是调用就不需要拷贝

    • this.listOne=res.map(it=>{
    Object.assign(it,{
        isShow:false
    })
    return it
})

项目结构

  1. 考虑后期的可维护性，页面尽量不封装，一旦后期加新的页面，就需要不断加入逻辑，容易出现冲突，封装组件即可。
  2. 单一功能的逻辑抽离成函数？把不互相影响的逻辑抽离，不断抽象和细化，有单一功能尽量抽离，然后在上层进行组合？（再研究）
  3. 用一个对象，这个对象是实现功能的，然后有很多函数，需要增加功能就拓展函数，保证函数单一职责原则，和开发封闭原则，千万不能像加补丁一样，动一发牵全身，而应该设计好上层框架，然后功能点就像换转装备一样，保证核心框架不变。 简单联动，进行高度抽象，抽象的本质应该就是为了解耦 功能模块是组件化，函数功能的话不太一样（再研究）
  4. 目录设计：
    • common：mixins混入 filters全局过滤器 config配置环境变量 datamap数据映射

三，开发注意

vue

  1. 插槽上写样式没用，替换了就没了
  2. 引用组件，最后包裹起来使用，好写样式
  3. 写组件的时候，注意传值时单向的，所以该数据去做响应的时候，要么传回去改，要么赋值到data中
  4. tinymce富文本编辑器，清除内容可以通过 :destroy-on-close=”true”

错误问题

  1. 如果前面代码报错，后面不会继续执行
  2. 记得及时清除缓存，选择network里的清除缓存，就看不到from disk了

四，好的方法

思路

  1. 写复杂的逻辑时，试着多记录，画图，写注释，记录自己的思路，不然脑子不够用，这个方法非常有用
  2. 优先完成主体功能
  3. 复杂逻辑多写注释，后面维护或修改的时候一目了然，并且尽量减少代码的耦合度，不然修改的时候容易产生连锁反应

快捷键

  • webstorm:
    1. ctrl+alt+方向键：去上一个或下一个光标的位置
  • hbuilderx:
    1. alt+方向键：去上一个或下一个光标的位置
  • windows：
    • 剪贴板是win+v