vue-cli@3 微信开发

1. 打开项目一直发请求 /sockjs-node/info?t=

https://blog.csdn.net/weixin_39205240/article/details/89384917

 

https://my.oschina.net/uwith/blog/3038145

这是sockjs-node 是一个JavaScript库,是维持全双工通信用的,作用就是保证我们在改完代码重新编译后,通知浏览器重新加载变更结果。因为我的端口发生了改变所以一直请求失败报错,把端口改成设置的端口号就可以了

2. css maxin 自适应

来源: https://segmentfault.com/a/1190000018964794#articleHeader3

  1 /**
  2 750px设计稿
  3     取1rem=100px为参照,那么html元素的宽度就可以设置为width: 7.5rem,于是html的font-size=deviceWidth / 7.5
  4 **/
  5 html {
  6     font-size: 13.33333vw
  7 }
  8 
  9 @media screen and (max-width: 320px) {
 10     html {
 11         font-size: 42.667PX;
 12         font-size: 13.33333vw
 13     }
 14 }
 15 
 16 @media screen and (min-width: 321px) and (max-width:360px) {
 17     html {
 18         font-size: 48PX;
 19         font-size: 13.33333vw
 20     }
 21 }
 22 
 23 @media screen and (min-width: 361px) and (max-width:375px) {
 24     html {
 25         font-size: 50PX;
 26         font-size: 13.33333vw
 27     }
 28 }
 29 
 30 @media screen and (min-width: 376px) and (max-width:393px) {
 31     html {
 32         font-size: 52.4PX;
 33         font-size: 13.33333vw
 34     }
 35 }
 36 
 37 @media screen and (min-width: 394px) and (max-width:412px) {
 38     html {
 39         font-size: 54.93PX;
 40         font-size: 13.33333vw
 41     }
 42 }
 43 
 44 @media screen and (min-width: 413px) and (max-width:414px) {
 45     html {
 46         font-size: 55.2PX;
 47         font-size: 13.33333vw
 48     }
 49 }
 50 
 51 @media screen and (min-width: 415px) and (max-width:480px) {
 52     html {
 53         font-size: 64PX;
 54         font-size: 13.33333vw
 55     }
 56 }
 57 
 58 @media screen and (min-width: 481px) and (max-width:540px) {
 59     html {
 60         font-size: 72PX;
 61         font-size: 13.33333vw
 62     }
 63 }
 64 
 65 @media screen and (min-width: 541px) and (max-width:640px) {
 66     html {
 67         font-size: 85.33PX;
 68         font-size: 13.33333vw
 69     }
 70 }
 71 
 72 @media screen and (min-width: 641px) and (max-width:720px) {
 73     html {
 74         font-size: 96PX;
 75         font-size: 13.33333vw
 76     }
 77 }
 78 
 79 @media screen and (min-width: 721px) and (max-width:768px) {
 80     html {
 81         font-size: 102.4PX;
 82         font-size: 13.33333vw
 83     }
 84 }
 85 
 86 @media screen and (min-width: 769px) {
 87     html {
 88         font-size: 102.4PX;
 89         font-size: 13.33333vw
 90     }
 91 }
 92 
 93 @media screen and (min-width: 769px) {
 94     html {
 95         font-size: 102.4PX;
 96 
 97         #app {
 98             margin: 0 auto
 99         }
100     }
101 
102 
103 }

配置rem的单位

 1 loaderOptions: {
 2     postcss: {
 3         // 这是rem适配的配置
 4         plugins: [
 5             require('postcss-px2rem')({
 6                 remUnit: 100
 7             })
 8         ]
 9     }
10 }

 

平时参照iphone6开发(375*667)的时候就可以用尺寸大小除以50,1rem = 50px; 

3. 音频播放、拖动进度条

进度条结构: 完整的进度条 + 播放时的进度条 + 当前时间的点

功能:点击『播放』按钮的时候,进度条和当前时候开始变化,拖动进度条可以修改当前时间,拖动结束后播放音频,播放完成回到起点,停止播放

实现思路:

  • 在音频的 @canplay 事件中,获取音频的总时长
  • 点击播放按钮,音乐播放, 播放时间/总时长 = 进度条/总长度, 根据比例获取进度条的长度
  • 拖动进度条,进度条上有三个事件: @touchstart.prevent , @touchmove.prevent, @touchend
    • touchstart 拖动开始需要记录当前进度条的位置,获取总长度
    • touchmove 拖动过程中 拖动的距离+起点就是当前进度条的位置(注意判断是左移动还是右移动), 再根据当前进度条/总长 比例值获取当前的时间,
    • touchend拖动结束后, 再根据比例获取当前时间,播放音频
  • 完整的进度条上还要写上点击事件,点击的时候直接跳转到当前的位置,播放音频
  • 播放结束回到起点

4. vue-cli3 内网穿透(映射) 出现 Invalid Host header

需要设置禁止主机检查

module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

 

5. 自定义下划线

借助背景 https://www.w3cplus.com/css3/css-secrets/custom-underlines.html

 

 

6. 文字两端居中

 

 

7. 安卓手机上的圆不圆 

 

https://blog.csdn.net/a460550542/article/details/89456988 

用px或者用缩放,缩放注意要把放大的位置抵消掉

 

8. textarea去掉右下角的样式,设置最大值 ,键盘遮住输入框,ios键盘收起页面不回弹

 

 

8.长图拼接

https://blog.csdn.net/zzhsmile520/article/details/79655395 

 

10.登录、支付

在一张空页面写 

 

11. 弹窗动画

背景和弹窗内容要分别设置

12. 倒计时的问题

点击多次后倒计时加快, 问题输入框

13. 复制文本

 点击复制

 

 

13. ios点击态

https://segmentfault.com/a/1190000010499001 点击态需要单独设置

 

14. 滑动的问题

父级不能设置滚动,滑动区域不要有定位元素。滑动区域设置静态定位,z-index=1

 

15. picker穿透的问题

https://www.tingno.com/archives/386

 

16. better-scroll

https://blog.csdn.net/qq_22557797/article/details/78866328

 

实时监听滚动数据

 

17. 埋点,分享成功的回调

 

18. vuex getter

19. better-scroll滚动使用方法

20. 路由跳转query

21. html2canvas 

不能滚动,不能出现文字截断,跨域图片需要转为base64

 

22. vue百度统计 

 在index。html里设置,路由跳转

23. html2canvas  网络图片base64,iOS11兼容

 https://www.cnblogs.com/wenfangcao/p/8763323.html

4. 埋点、为什么px单位会自动转为rem

25. 获取ios系统

26. 滚动 到指定位置

27.ios音频播放不出来

  1. 在ios中,如果需要播放音乐或者视频,需要用户手动触发事件在调用.play()才能播放(autoplay或者直接.play()是不能直接触发的);

  2. 如果需要在ajax回调函数中播放音乐,需要在用户触发事件后播放音乐立即暂停然后才能在回调函数中.play(),不然ios中是播放不成功的。

https://segmentfault.com/a/1190000012129448

  3、每次要重新load()

  https://juejin.im/entry/5c16fb33518825666808e7b7

  4、播放缓冲条

  

  

 

28、axios允许后端缓存

axios.defaults.withCredentials = true;

https://segmentfault.com/a/1190000017535086

30、播放m3u8格式的音频或视频

使用 hls.js ,ios的单独处理

ios多媒体先都要设置 load()

 https://blog.csdn.net/qq_40127700/article/details/84973634

 

31、栅格样式grid

32、禁止字号随系统设置变大

33、支付宝支付

 

34、图片禁止保存到本地

pointer-events: none;
 
 
35、窗口关闭或刷新
  window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));
  window.addEventListener('unload', e => this.beforeunloadHandler(e));
  
36、 IOS音频设置初始值
需要在canplay事件中设置,
 

 

转载于:https://www.cnblogs.com/shuran/p/10973593.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值