vue-cli@3 微信开发

最新推荐文章于 2023-08-21 11:49:43 发布

dianaie2303

最新推荐文章于 2023-08-21 11:49:43 发布

阅读量454

点赞数

原文链接：http://www.cnblogs.com/shuran/p/10973593.html

版权

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音频播放不出来

在ios中，如果需要播放音乐或者视频，需要用户手动触发事件在调用.play()才能播放（autoplay或者直接.play()是不能直接触发的）;
如果需要在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