分销商城项目问题汇总

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 达到适配。

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
• lib-flexible 用于设置 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