微信端vue项目问题总结

2019年9月14日 116次阅读 来源: stone_dong 
最近的一个微信端vue项目，出现了很多问题，总结一下

vue项目配置

  1. 用vue-cli脚手架搭建的项目，导入该有的各种需要包之后npm run dev，不知道是vue-cli的版本问题还是webpack的版本问题，出现了找不到css-loader和vue-loader的报错，导入成功后再运行还是这样的错。
    解决: 建立的默认vue文件，css预设的需要改一下
  2. 在package.json文件的script中的dev里面添加 --host 当前ip 就可以用手机端访问，如：
    《微信端vue项目问题总结》
  3. 在config的index.js中的proxyTable可以代理后端api，如：
    《微信端vue项目问题总结》

微信签名问题

  1. 正常的签名，需要获取当前页面的url地址，并调用微信接口，如：
    《微信端vue项目问题总结》
  2. 不同的分享页面会进入不同的链接：用watch监听路由$route，并判断url地址有没有需要的关键字
    《微信端vue项目问题总结》
  3. 分享的图片要缩小，80*80左右
  4. 分享的图片自己可以看到，别人看不到，一般是因为分享的标题或描述中有部分关键字，如：红包、现金、福利…

页面问题

1. 字体阴影

普通字体阴影：
text-shadow: 0 2px 1px #A0522D  //只能让字体阴影投影到一边（x坐标，y坐标，阴影范围，颜色）

字体四周阴影：
text-shadow: 0 2px 1px #A0522D, 2px 0 1px #A0522D, -2px 0 1px #A0522D, 0 -2px 1px #A0522D

2. 模态框

子组件中的模态框就算设置了fixed;top：0;left: 0;盖不住父组件的问题
-->解决：将模态框写到页面根组件中，不写在子组件里面

3. 图片按钮

将图片当做按钮时，部分手机（oppo，魅族）有时候点击时会把图片点击放大，写了阻止默认事件也没有用。
-->解决：用button代替img，把图片当做button的背景图片。
    这样，本来定宽不定高的img现在宽高都需要定义，不同手机可能会将图片压扁或拉伸。
-->再解决：设置background-size的时候，用contain，宽高碰到就不在扩大了

4. iphone图片时不时消失

不知道什么问题，iphone有的型号、有的时候、有的图片显示不出来
-->解决：懵逼

数据请求

！！！一定要和后端明确，不要想当然！！！

！！！一定要有个好的命名习惯（属性用下划线，方法用驼峰）！！！

！！！属性、方法、关键步骤一定要写注释！！！

    原文作者：stone_dong
    原文地址: https://segmentfault.com/a/1190000013072150
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞