这里持续记录更新在开发小程序惠出发期间值得记录的要点
2021-5-27 搜索词高亮
一般这种情况马上能想到replace
重点：直接替换为<text>标签插入wxml不生效，可以替换为span标签插入rich-text
// js
// list 搜索词结果列表
// value 搜索关键词
hightLight(list, value) {
const reg = new RegExp(value, 'g')
const rep = `<span style="color:#4eaa63">${value}</span>`
if (list) {
list.forEach(item => {
item.ticketName = item.ticketName.replace(reg, rep)
})
}
return list
}
// wxml
<view class="result" wx:for="{{list}}" wx:key="index">
<rich-text nodes="{{item.ticketName}}" />
</view>
2021-5-20
今天在组件标签上直接使用hidden未生效，才知道hidden只有在元素是block的情况下才生效
直接在组件标签上hidden无效，外面加个view标签吧
<filter-bar hidden="{{!list.length}}" data="{{data}}"/>
2021-4-22
今天玩个手机发现微信版本7.0.22 在打开各种小程序都无法定位，卸载微信重新安装就好了，记录一下。
网上看见有人类似情况，华为5G开启导致无法定位。。。。
2021-3-29
CanvasContext.draw(boolean reserve, function callback)
在绘制canvans结束后，发现callback回调没有执行，中途也没报错。
企业微信截图_16170064845094.png
组件内注意点
- 在组件内使用小程序方法注意第二参数
wx.canvasToTempFilePath({}, this) wx.createCanvasContext('canvans', this) // 要带上第二参数this，执行上下文
wx.createSelectorQuery().in(this) // 不然获取不到元素
- 组件内直接修改样式不生效，建议自己写
// 在page我们会这样直接修改radio或者check-box样式
radio .wx-radio-input {
width: 40rpx;
height: 40rpx;
border: 4rpx solid #999;
border-radius: 100%;
background: none;
}
/*单选按钮选中后内部样式*/
radio .wx-radio-input.wx-radio-input-checked {
border: 4rpx solid #3cbcee!important;
}
radio .wx-radio-input.wx-radio-input-checked::before {
width: 60%;
height: 60%;
background: #3cbcee;
border-radius: 100%;
content: '';
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
// 自己写组件更香
<view class="radio classname" catch:tap="handleToggle">
<slot name="left" />
<!-- radio主体 -->
<radio class="hcf-radio" checked="{{checked}}" />
<label class="{{checked ? 'radio-inner' : 'radio-out'}}" />
<slot name="right" />
</view>
.radio {
display: flex;
align-items: center;
}
.hcf-radio {
position: relative;
display: none;
}
.common {
display: inline-block;
width: 36rpx;
height: 36rpx;
border-radius: 50%;
}
.radio-inner {
@extend .common;
background-color: #ff5000;
border: 1rpx solid transparent;
position: relative;
&:before {
font: normal normal normal 14px/1 "weui";
content: "\EA08";
color: #fff;
font-size: 18px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -48%) scale(0.73);
-webkit-transform: translate(-50%, -48%) scale(0.73);
}
}
.radio-out {
@extend .common;
background-color: rgba(248, 248, 248, 1);
border: 1rpx solid rgba(223, 223, 223, 1);
box-shadow: 0 3rpx 6rpx rgba(184, 190, 198, 0.16);
}
其他注意点
2021/3/18 补
今天又遇到下面的问题：一个订单列表突然出现 单个订单组件不渲染的问题，新下的单能展示。经过数据一个个对比，发现不渲染的订单图片字段被删除了，导致setData到image的值为undefined。坑大了
end
-
setData的注意项，不要尝试setData不存在的值（机缘巧合之下，setData错了一个response里不存在的值，再拿去判断dom的显示隐藏，发现判断失效）
哦吼， 后面发现文档里注明有潜在问题
企业微信截图_16009224598073.png wxs不支持es6语法。获取时间用getDate正则getRegExp
（初学踩过，勿以细节小而不记录）引入组件，不能用驼峰命名，不然看不到组件也没错误提示
"actionSheet": "/common/components/actionSheet/actionSheet" // 错误
"action-sheet": "/common/components/actionSheet/actionSheet" // 正确
组件内properties 的type是必填，不要用了optionalTypes 而舍弃type （粗心而已）
文字换行什么的，一定在text标签里面才生效。且text标签写在一行，在编辑器打个空格都会显示
上传图片 wx.chooseImage 选择原图想知道用户上传的图片大小，在ios上会被默认压缩
// 2020-11-2 新增：现在看ios上传原图获得的大小又是对的了
wx.chooseImage({
count: remain,
sizeType: ['original'], // 选择原图，选择压缩在小图不明显，所以一般还是会自己用canvas压缩
sourceType: ['album', 'camera'],
success: res => {
const { tempFilePaths } = res
this.filesLength = tempFilePaths.length
this.imageSize(0, tempFilePaths)
}
})
wx.getFileInfo({
filePath: tempImageArr[index],
success: ({ size }) => { // 获取图片大小，ios上会默认压缩拿不到原图大小
let rightSize = true
// console.log('before', size / 1024, 'kb')
if (size / 1024 < 5 || size / 1024 / 1024 > 10) {
rightSize = false
}
})
- uploadFile。 request。 downloadFile 都要配置合法域名， 注意配置 （业务和配置都要注意，开发者工具上开启了不校验合法域名容易忘记）
image
要点：头像下载合法域名仅仅配置http://wx.qlogo.cn是不够的，也要配置http://thirdwx.qlogo.cn（用户使用小程序授权时可能会使用假头像，假昵称）
- canvas画线条，第五个参数圆角不能为0.在ios，开发者工具正常，在安卓上有bug显示不正常
// 比如我这样去画一个有圆角的长方形，arcTo的第五个参数如果为0，在安卓机图片会不显示或者被切掉
ctx.beginPath()
ctx.moveTo(4, 0)
ctx.arcTo(330, 0, 330, 500, 4)
ctx.arcTo(330, 500, 0, 500, 4)
ctx.arcTo(0, 500, 0, 0, 4)
ctx.arcTo(0, 0, 4, 0, 4)
ctx.closePath()
以上就是今天的总结，会在后续持续更新....
- 问题记录
前提：上面第五点提到小程序做了个上传图片评论功能，调用小程序api上传原图，大于100k小于10M的利用canvans压缩，当时画布的尺寸是750 *750，quality设置的是0.6
compressImage(index, tempImageArr) {
wx.getImageInfo({
src: tempImageArr[index],
success: ({ width, height }) => {
// 最大尺寸限制
const maxWidth = 750 // 改为375
const maxHeight = 750 // 改为375
// 目标尺寸
let targetWidth = width
let targetHeight = height
// 图片尺寸超过750x750的限制
if (width > maxWidth || height > maxHeight) {
if (width / height > maxWidth / maxHeight) {
// 更宽，按照宽度限定尺寸
targetWidth = maxWidth
targetHeight = Math.round(maxWidth * (height / width))
} else {
targetHeight = maxHeight
targetWidth = Math.round(maxHeight * (width / height))
}
}
this.setData({
cWidth: targetWidth,
cHeight: targetHeight
})
setTimeout(() => {
const ctx = wx.createCanvasContext('canvas', this)
ctx.drawImage(tempImageArr[index], 0, 0, targetWidth, targetHeight)
ctx.draw(false, () => {
index += 1
wx.canvasToTempFilePath(
{
canvasId: 'canvas',
fileType: 'jpg',
quality: 0.6, // 改为0.8
success: image => {
// wx.getFileInfo({
// filePath: image.tempFilePath,
// success: ({ size }) => {
// console.log('after', size / 1024, 'kb')
// }
// })
this.dealImageList.push(image.tempFilePath)
this.imageSizeLimit(index, tempImageArr)
}
},
this
)
})
}, 100)
}
})
},
问题：iphone11 pro上传失败，其他机型正常
排查：iphone11 pro上传图片后压缩还有1M多点，错误码413，上传请求体太大，nginx默认1M
解决：修改nginx配置，后台也有1M的限制，也让其修改。前端这边也再次压缩。画布尺寸修改为375
client_max_body_size 20M
关于在iphone x iphone xr上会有底部空白问题，官方文档已说明：如下链接
https://developers.weixin.qq.com/miniprogram/dev/framework/audits/accessibility.html#5.%20iPhone%20X%20%E5%85%BC%E5%AE%B9
也能全局获取wx.getSystemInfoSync设备信息，给改机型一个 padding-bottom：34 px在rich-text 可以识别<br />, 换行符“\n” 无效,
1. // 可以替换为<br />，在录入保存到数据库时就替换为<br />存起来，小程序再接口请求来
infomatiton.replace('/\n/g', "<br />")
2. 无论在rich-text还是view标签内都可以使用
要加上样式 white-space:pre-wrap; // 保留空白符序列，但是正常地进行换行
- 记录一下：在iphone上经常会出现css动画失效的问题（设置-通用-辅助功能，动态减弱已关闭）。在小程序里就遇到了，重启微信就可以了。官方解释：原文链接企业微信截图_1611555964325.png
