分销商城项目问题汇总

  1. 对react的不熟悉—如果想要深入学习可以找个项目直接入手
  2. git一些 操作用起来晕乎乎的 ts一用全部报错
  3. vue 组件内如何写默认事件—组件的封装不够完美----先把默认事件写完再emit
  4. Aliplayer使用原生组件--为什么我搜索不到呢 认知问题----阿里云视频的兼容性找了好久 没有设备不好测真是难
  5. 视频的前端加密问题---一直么效果----后端要做阿里云
  6. 移动端适配问题
  7. vue 如果没有那些npm包怎么引入外部库 import的方式 再写xxx= document.createElement('script') xxx.src=….
  8. 微信端浏览器—判断有无网络—一些微信端的接口支付 扫码等等不了解-----仔细看文档
  9. eslint  .prettierrc不知道有什么用 认知问题-------- 项目里面有个.prettierrc文件可配置prettier(优先),也可以在VScode工作区直接配置prettier-----"eslint.autoFixOnSave": true自动按.eslintrc.js配置
  10. 输入框搜索图标—不知道怎么在placeholder加图标
  11. Host文件修改—不懂其作用所在
  12. jenkins一件部署没用过-----------见另一篇
  13. 前端生成图片---html2canvas QRCode生成二维码  
  14. Webpack的externals的使用------(比如在index.html用CDN的方式引入jquery,webpack编译打包时不处理它,却可以引用到它,用于减少打包体积)
  15. 请求类型 如何设置需要的请求头-----data有时候对象转query string
  16. 静态工具类的封装 ------export class WxPay { static id = '' 。。。方法()。。。}
  17. sync修饰符与this.$emit('update:title', newTitle) 实现属性值双向绑定

  18. 微信授权登陆问题----在路由导航守卫前拦截对needLogin: false进行微信授权

  19. 路由使用了route里面的keepAlive----缓存页面的作用,在组件切换过程中将状态保留在内存中,防止重复渲染DOM, 使用needLogin: true判断是否需要微信授权,allowBack: false判断是否允许返回

2.git解决方案

git push origin branchA:branchB提交后会生成新分支branchB,并将本地基于branchA修改的代码提交到branchB中

在course分支上 push 之后要 取消 提交的 可以使用 git reflog 查看commitID 然后 再git reset --hard 95ab929  就可以回退到提交之前到版本 。

git reset --hard HEAD 回退到上一个版本

git常用命令总结(good):https://blog.csdn.net/tomatozaitian/article/details/73515849?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-14.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-14.control

git版本提交规范:那个前端提交包cant find module --- npm install的时候 lint-staged包没有下下来,加上npx(npx是执行Node软件包的工具),利用 npx 可以下载模块这个特点http://www.ruanyifeng.com/blog/2019/02/npx.html

或者提交时改用  git commit -m "注释" -n 跳过检查

{
  "hooks": {
    "pre-commit": "npx lint-staged",
    "commit-msg": "npx commitlint -E HUSKY_GIT_PARAMS"
  }
}

3.组件封装解决方案

1. 封装组件前要想好组件的哪些场景使用 2.它的输入变量是什么 3.碰到数据请求,使用接口不一样,怎么数据请求做到通用,不显得臃肿 4.事件处理不一样,如何设置默认事件

props的几种写法:

 props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字,有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }

4、5.

阿里云有个开发者社区多逛逛 https://developer.aliyun.com/article/626454

6.移动端适配

项目使用了两个工具,切换不同的机型,根元素可能会有不同的font-size。当你写 css px 样式时,会被程序换算成 rem 达到适配。

单位都使用了固定的px

10.

不使用placeholder,而是加一个绝对定位的元素,在没有输入内容的时候隐藏

11.host解决方案

DNS域名解析:对于要经常访问的网站,我们可以通过在Hosts中配置域名和IP的映射关系,提高域名解析速度。由于有了映射关系,当我们输入域名计算机就能很快解析出IP,而不用请求网络上的DNS服务器

使用了虚拟域名的效果:

分销商城项目问题汇总

H5网页如何在本地调试微信环境?

方法一:使用虚拟域名:1修改vue.config.js 将项目改成80端口(80端口号就是http默认端口),加上 disabledHostCheck(关闭host检测) 热更新关掉. 2.修改 Host 文件  本地ip 127.0.0.1 -> m.wuhuoyuanzhijia.com  3. 启动 命令 请用 管理员方式 运行  4.调试 打开 微信开发者工具  公众号网页  直接访问 m.wuhuoyuanzhijia.com,注意https跑不起来用http,需要清除开发者工具的缓存 试试 

方法二:在微信开发的时候 需要填写与微信服务器相连接的url 这个url必须是外网域名,如果直接用本地的localhost:80会进不去一些网页,
也就是说我们需要在这个外网域名对应的ip服务器上做开发,而没办法本地开发调试
所以用ngrok/花生壳 获得一个外网域名 这个外网域名实际访问的是本地主机
这样把此外网域名填入到微信需要的外网url里 就可以在本地开发调试了 参考知乎:https://www.zhihu.com/question/25456655

上一篇:Electron Forge使用


下一篇:几种常见的OOM排查&整理