2020年6月工作整理
0601
./pages/order/addorder.wxml not found
微信小程序跳转的时候，报上面的错误，前提是各个配置都是正确的，一脸懵逼！
原因是今天早上打开微信开发者工具提示升级到最新版本导致的
最新版本是：1.03.2005140
解决方法：要么回退到上一个版本，要么使用最新的体验版
0608
H5禁止微信内置浏览器调整字体大小
body { /* IOS禁止微信调整字体大小 */
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}
<script>
(function() {
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
handleFontSize();
} else {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", handleFontSize);
document.attachEvent("onWeixinJSBridgeReady", handleFontSize); }
}
function handleFontSize() {
// 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
// 重写设置网页字体大小的事件
WeixinJSBridge.on('menu:setfont', function() {
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
});
}
})();
script>
0609
js关于float浮点类型数据加减出现误差的处理
- 浮点数运算的精度丢失
- 浮点数运算精度丢失问题并不是js独有的
- js浮点数的加减乘除运算都可能导致精度丢失问题
JavaScript 浮点数精度之谜
浮点数产生的原因
我们首先就想到计算机能读懂的是二进制，所以我们进行运算的时候，实际上是把数字转换为了二进制进行的，所以我们把0.1和0.2转换为二进制
0.1 => 0.0001 1001 1001 1001..（无限循环）
0.2 => 0.0011 0011 0011 0011…（无限循环）
这里可以看出转换为二进制是一个无限循环的数字，单在计算机中对于无限循环的数字会进行舍入处理的，进行双精度浮点数的小数部分最多支持52位。然后把两个2进制的数进行运算得出的也是一个二进制数值，最后再把它转换为十进制。保留17位小数，所以0.1+0.2的值就成了 0.30000000000000004。 0.1+0.1的值成了0.20000000000000000，全是0的时候可以省略，就成了0.2
比较成熟的工具库可以使用,
- Math.js,
- BigDecimal.js,
- number-precision等等
0612
关于html5 audio 标签在ios系统上不能正常自动播放的解决办法
由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio
// 解决ios微信不自动播放
const _audio = document.getElementById('audio');
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
_audio.play();
} else {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", function() {
_audio.play();
}, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", function() {
_audio.play();
});
document.attachEvent("onWeixinJSBridgeReady", function() {
_audio.play();
});
}
}
// 解决ios safari浏览器不自动播放，当用户开始触碰页面时出发播放。
document.addEventListener("touchstart", function(e) {
if (isPlay) {
_audio.play();
isPlay = false;
}
}, false);
0616
1.微信小程序中的云开发如何使用npm安装依赖
0617
1.JavaScript中的Object.is()与"==="运算符总结
- ES2015规范引入了 Object.is()，其行为与严格的相等运算符几乎相同
- NaN（非数字）并不严格等于任何其他值，即使使用另一个 NaN
NaN === NaN; // => false
NaN === 1; // => false
- 严格相等运算符不能将 -0 与 +0 区分开
-0 === +0; // => true
- Object.is()处理NaN和-0，+0
Object.is(NaN, NaN); // => true
Object.is(NaN, 1); // => false
Object.is(-0, +0); // => false
总结：
- 严格相等运算符是比较值的好方法。
- 如果你想直接检查
NaN值或对负零和正零进行更严格的区分，那么Object.is()是一个不错的选择。
2.import和require的区别
node编程中最重要的思想就是模块化，import和require都是被模块化所使用。
遵循规范
- require 是 AMD规范引入方式
- import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法
调用时间
- require是运行时调用，所以require理论上可以运用在代码的任何地方
- import是编译时调用，所以必须放在文件开头
0619
1.background-image(自适应宽高)
小程序开发中发现，为view设置了宽高后，background-image并没有适应宽高，查询发现需要加上下面的代码才可以
.zoomImage {
background-image:url(images/yuantiao.jpg);
background-repeat:no-repeat;
background-size:100% 100%;//重点是这句
-moz-background-size:100% 100%;
}
2.关于line-height行间距
line-height属性用于设置行间的距离，也就是行高。可以用来控制文字与行之间的距离
如上图，行间距包括上间距，下间距和文字的高度。
改变行间距的大小，实际是改变上间距和下间距的高度，文字的高度是不会变化的
3.微信小程序 本地资源图片无法通过 WXSS 获取
报错信息：
pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，
或者 base64，或者使用<image/>标签。
解决办法：将图片demo_bg.jpg 转换为base64，在这里把要使用的图片转换一把，然后将得到的字符放到background-image属性值。
0622
1.关于微信小程序长按识别二维码的功能说明
- 首先，微信小程序不支持长按识别二维码
- 可以使用wx.previewImage预览图片识别，但是需要注意的是，不识别公众号等普通二维码，只能识别小程序码，另外还需要注意的是wx.previewImage只支持http线上图片，不支持本地图片
0623
1.微信小程序中遮罩层的滚动穿透问题
项目中需要在用户第一次进入的时候，为页面加上一个遮罩引导指示功能，一顿操作之后发现，在遮罩层滚动的时候，下面的页面会滚动。
解决办法：直接在遮罩层上加catchtouchmove="{{true}}"就可以，但是需要注意的是，在模拟器上是不行，在真机上是可以的。
微信小程序中遮罩层的滚动穿透问题
技术交流可关注公众号