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

/**
750px设计稿
    取1rem=100px为参照，那么html元素的宽度就可以设置为width: 7.5rem，于是html的font-size=deviceWidth / 7.5
**/
html {
    font-size: 13.33333vw
}

@media screen and (max-width: 320px) {
    html {
        font-size: 42.667PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 321px) and (max-width:360px) {
    html {
        font-size: 48PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 361px) and (max-width:375px) {
    html {
        font-size: 50PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 376px) and (max-width:393px) {
    html {
        font-size: 52.4PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 394px) and (max-width:412px) {
    html {
        font-size: 54.93PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 413px) and (max-width:414px) {
    html {
        font-size: 55.2PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 415px) and (max-width:480px) {
    html {
        font-size: 64PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 481px) and (max-width:540px) {
    html {
        font-size: 72PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 541px) and (max-width:640px) {
    html {
        font-size: 85.33PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 641px) and (max-width:720px) {
    html {
        font-size: 96PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 721px) and (max-width:768px) {
    html {
        font-size: 102.4PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 769px) {
    html {
        font-size: 102.4PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 769px) {
    html {
        font-size: 102.4PX;

        #app {
            margin: 0 auto
        }
    }


}

配置rem的单位

loaderOptions: {
    postcss: {
        // 这是rem适配的配置
        plugins: [
            require('postcss-px2rem')({
                remUnit: 100
            })
        ]
    }
}

 

平时参照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键盘收起页面不回弹

//失去焦点后页面弹回

handleBlur() { 
     setTimeout(() => {
           window.scrollTo(0, 0);
      }, 200);
}

 

 

9.长图拼接

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事件中设置，

 

37. 直接退出页面  https://juejin.im/post/5bf7c7b7e51d454c1c45d737

// 封装一下push历史记录的方法
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, null, "#");
}

// 在需要监听的页面执行该方法
pushHistory();
window.addEventListener("popstate", function(e) {
// 如果监听到返回，就跳转到百度首页
window.location = 'http://www.baidu.com';
}, false);