微信小程序的坑

Canvas


设置粗体时真机不显示,设置 style 才可以在真机显示粗体

1
ctx.font = "normal bold 18px arial,sans-serif";

真机上无法显示网络图片,只有先下载到本地,才能在真机显示,有两种方法,分别列出

  1. wx.downloadFile,具体请看官方文档
1
2
3
4
5
6
7
8
9
10
11
wx.downloadFile({
url: "https://example.com/audio/123", // 仅为示例,并非真实的资源
success(res) {
// 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下 载到了想要的内容
if (res.statusCode === 200) {
wx.playVoice({
filePath: res.tempFilePath
});
}
}
});

2.wx.getImageInfo,具体请看官方文档

1
2
3
4
5
6
7
8
wx.getImageInfo({
src: "https://example.com/audio/123", //仅为示例,并非真实的资源
success(res) {
console.log(res.path); // 获取图片地址
console.log(res.width);
console.log(res.height);
}
});

原生组件层级


在微信小程序中原生组件的层级最高,所有在怎么设置 z-index 也没什么卵用,但微信官方给了cover-view组件,可覆盖原生组件。

scroll-view 无法设置横向滚动

这个坑呢,我是在 mpvue 中使用的时候遇到的,后来被这个问题弄得头大,也是在 mpvue 中的 issues 中找到解决办法的,具体怎么解决,我就不放代码了,直接放链接吧!!!

解决办法:

mpvue 使用小程序的 scroll-view 横向不能滚动

高适应性的自定义导航栏开发思路

一、默认导航栏计算高度

  • wx.getSystemInfowx.getSystemInfoSync 获取机器信息
  • screenHeight - windowHeight 计算标题栏高度
1
2
3
'iPhone':64,
'iPhoneX':88,
'android':68
  • 不完全统计(ip6 , ip5 , ip6p , ipx , 小米 mix2 , 小米 5 等综合了开发工具提供的数据和真机数据)所得

二、自定义导航栏高度由谁决定?(自定义情况下,屏幕高度和窗口高度没有差别,所以要通过步骤 1 先获取数据,预定义到代码中)

  • 开发时发现,自定义导航栏的实现需要 包含状态栏+胶囊 :没有自定义导航栏的时候页面是全屏幕滚动会出现在状态栏的下一层

  • 根据上一标题中步骤 1 的函数,可以获得状态栏高度 statusBarHeight

  • demo, 点击打开小程序工具
-------------本文结束感谢您的阅读-------------