微信端vue项目问题总结

最近的一个微信端vue项目,出现了不少问题,总结一下

vue项目配置

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

微信签名问题

  1. 正常的签名,须要获取当前页面的url地址,并调用微信接口,如:
    clipboard.png
  2. 不一样的分享页面会进入不一样的连接:用watch监听路由$route,并判断url地址有没有须要的关键字
    clipboard.png
  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有的型号、有的时候、有的图片显示不出来
-->解决:懵逼

数据请求

!!!必定要和后端明确,不要想固然!!!

!!!必定要有个好的命名习惯(属性用下划线,方法用驼峰)!!!

!!!属性、方法、关键步骤必定要写注释!!!

相关文章
相关标签/搜索