Wang Wei's Blog

前端获取途径

1. 通过webRTC的方式获取

这种方式需要浏览器支持webRTC对象或没有屏蔽webRTC。所以可能部分用户无法使用好处在于可以自控

参考链接：

1. https://github.com/diafygi/webrtc-ips

onShow的坑

微信小程序onShow会仍然保存上一次进入小程序的参数值和场景值，所以如果需要在onShow中做逻辑操作，需要进行区分。

其次，微信小程序发起转发和调起支付功能时，跳出了微信小程序范围，会触发onHide和onShow的操作。

兼容性问题

1. websocket

   由于手机系统的问题。iOS会在小程序进入后台（或息屏）后大约5s就断掉了后台的所有操作，因此在小程序处于进入后台状态时检测到了websocket心跳发送失败后便执行关闭连接，但是息屏状态下不会立即执行关闭连接操作（onHide也失灵了），而是在亮屏时处理操作栈内堆积的操作。

   而Android在进入后台（或息屏）后仍然会运行至大概5分钟（手机不同时间也不同），但Android会暂停小程序的setInterval函数运行。

   所以小程序回到前台后，iOS系统需要进行重连操作，而Android系统只需要重新运行setInterval函数。

   websocket可以同时维护5个，需要在创建成功后进行一系列监听，如果回收使用了旧的socketTask不能再次进行监听函数挂载，否则会响应多次监听函数操作。

2. css动画

   旋转动画transtion: rotate(180deg)，Android和iOS表现不一致，如果动画旋转角度为360°时，iOS真机则会直接显示为末状态，而Android能够正常显示，当旋转角度不为360°的倍数时，iOS会旋转到末状态最小的角度，Android正常显示，所以会出现iOS和Android旋转方向和旋转角度不一致问题。

   使用wx.createAnimation依旧解决不了问题，可旋转范围为[-180, 180]。

   解决方案：使用setInterval去循环调用旋转，但是主要问题是旋转方向可能不一致。

   onLoad() {
       this.data.spinAnimation = wx.createAnimation({
           duration: 1400,
           timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
           delay: 0,
           transformOrigin: '50% 50% 0',
           success: function(res) {
               console.log(res)
           }
       })
   },
   handleSpinAni() {
       const ani = this.data.spinAnimation
       let n = 1
       this.interval = setInterval(() => {
           ani.rotate(180*(n)).step()
           console.log("rotate=="+n)
           this.setData({
               ['ani.spin']: ani.export()
           })
           n += 1
           if (n === 5) {
               clearInterval(this.interval)
           }
       }, 1400)
   }

环境搭建

windows

1. 安装python和pip

   需要配置环境变量

   # python默认路径
   # pip 文件路径
   C:\Users\ice_w\AppData\Local\Programs\Python\Python37\Scripts\
   # python解释器路径
   C:\Users\ice_w\AppData\Local\Programs\Python\Python37\

   如果需要卸载相对应的版本python 需要运行对应版本的exe安装包进行uninstall

   // 检测pip是否安装成功
   pip list
   // 查看版本
   pip -V / pip --version
   python -V / python --version
   // 直接运行python
   python
   
   // 临时指定pip库路径
   pip install -i https://pypi.tuna.tsinghua.edu.cn/simple some-package
   // 配置源地址
   pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
   
   // pip 升级版本
   python -m pip install --upgrade pip
   
   // 查看安装包
   pip list
   pip list -o // 列出安装包中哪些已有更新
   
   // 查看全局包安装路径
   python -m site
   // USER_BASE python.exe启动程序路径 '...\Scripts'
   // USER_SITE 依赖安装包基础路径 '...\Lib\site-packages' 
   
   // 查看配置文件地址
   python -m site -help
   // 在配置中修改文件中USER_BASE、USER_SITE地址
   
   // 查看python安装路径
   python
   >>> import sys
   >>> sys.path

2. 搭建虚拟环境

   // 如果有多个版本 -2/-3 是区分python版本
   py -3 -m venv venv // python -m venv venv
   
   // 如果不能直接创建虚拟环境 需要全局安装virtualenv依赖之后 再创建虚拟环境
   pip install virtualenv
   
   // 激活环境后安装依赖库
   cd venv/scripts
   activate // 激活
   
   // 退出环境
   exit()

3. 安装依赖库

   pip install xxxx(库名)

参考链接

在Windows上使用 Python

NODEJS库

html-minifier: html压缩工具

前言

没有什么前言不前言的，就只是想记录一下去年写过的Java代码，有些逻辑还是很佩服自己的(乱七八糟的逻辑居然能跑通)，可能过段时间有更好的解决方案，记录一下。虽然目前我主做前端项目。

时间处理util是在写价格日历的时候用到的，本来想把价格日历的整个逻辑整理一下的，看着🤢，还是算了吧。

首先声明部分不是我写的，有些是百度的，有些是框架里的，年代久远也不想分太清了。

金额浮点数处理不只java中会有这个问题，python中也有，javascript就更不用说了，所以部分东西我认为是可以通用的。

代码review

原代码问题：

1. 动画过于僵硬，当两条消息间隔时间过短时会省略进入动画
2. 动画间隔过短会给人同时消失和同时出现的错觉
3. 如果1秒内有100条消息进入，会造成显示时间过长、阻塞

优化建议：

1. 设置消息进入的最短间隔或固定间隔，给消息进入动画展示时间
2. 根据等待队列的长度动态设置消息展示时间

参考链接：

各类免费API推荐，再也不怕找不到免费API了： https://www.jianshu.com/p/d0ffe5f482dc

免费API接口汇总：https://segmentfault.com/a/1190000017047048?utm_source=tag-newest

平台：

openapi.top： https://www.apiopen.top/api.html

直播小程序开发总结

从7月份开始做直播小程序研究和开发，使用了腾讯云的云通信和互动直播的SDK，所以开发难度不算太大，难度主要在控制视频播放和视频录制的切换以及显示各种状态上。和同事一起合作开发，此次开发收获颇多，主要是对微信小程序运行机制有了更多更深入的了解。因为使用了特殊的视频播放和录制组件，所以使用了原生的小程序并未使用框架进行开发。

填坑之路

1. app的生命周期

项目中因为冷启动和热启动状态改变有很多种情况，所以这部分算是踩了不少的坑。通过登录

1.翻转字符串

function reverseString(str) {

  var arr = str.split("").reverse();

  str = arr.join("");

  return str;

}

reverseString("hello");

2.实现阶乘

function factorialize(num) {

  var newNum =1;

  for(var i=1;i<=num;i++){

    newNum *= i;

  }

  num = newNum;

  return num;

}

factorialize(5);

3.判断回文字符串

这是2017年11月-2018年2月在丁丁当实习时的笔记，当时记录在笔记本上，现在进行迁移到博客中。感谢宾哥，虽然没有实习很长时间，但是学到了很多，从最开始写一个页面需要一天半到两三个小时完成，细节不断优化，代码不断规范，还有充足的自学时间，十分感激。最开始实习的时候以为自己很厉害，其实现在看来真的经验不足，在实习之前都是一个人写根本没有发现自身的问题，仅仅就样式实现了就好，理论知识倒是可以，但是实践经验真的时不足，没有人提点，所以当时看2016年写的前端想重构，现在看2017年写的前端也想重构。

HTML + CSS

基础知识

• css 顺序执行

• 内盒尺寸（元素大小）：

  • Element Height: content height + padding + border
  • Element Width: content width + padding + border

• 外盒尺寸（元素空间尺寸）：

  • Element空间高度: content height + padding + border + margin
  • Element空间宽度: content width + padding + border + margin

• 子元素设置为绝对定位时，父元素要设置position: relative

• float浮动：float未脱离正常的文档流，参照元素是父级元素

• 绝对定位：脱离了正常的文档流。

• opacity会将文字和背景都设置透明，如果只要背景设置透明需要设置rgba。父元素的filter: blur(50px);会影响到子元素。

• data-*属性：一般用于数据存放，div元素只有id和class属性，要设置其他属性存值，需要使用h5的自定义属性，css设置样式[data-*] {xxx}

• 图像预装载：提高图像访问速度

• css雪碧图：图像合并，将多个小图标和背景图像合并到一张图片上用css定位来显示

• 响应式布局：目的时为移动设备提供更好的体验，并且整合从桌面到手机的各种屏幕尺寸和分辨率