苹果8P256G为什么在使用微信小程序怎么做可以容纳500多G

来源：蜘蛛抓取(WebSpider) 时间：2020-07-08 18:22 标签： 微信小程序怎么做

  1. 作用：控制音乐播放进度

  2. 使用 audio組件 制作的播放器，即使点击"显示在微信小程序怎么做顶部"音乐依然会停止,使用 wx.playBackgroundAudio 相关API制作的播放器才不会。

  3. 后台播放音乐暂停后怎么从仩次播放的地方继续播放

    • 将进度调整到上次停止的地方，但是由上面的第一条所描述这样做的结果会导致onBackgroundAudioPlay 会被触发两次，所以我们可鉯直接调用seekBackgroundAudio调整播放进度即可（前提是之前有播放过歌曲就是确保歌曲地址已经被设置，不然无效）随后音乐会自动播放.

    • 经测试调用playBackgroundAudio,並且传入的歌曲地址参数和上次相同时，歌曲会从上次暂停的时间位置继续播放

  4. 注意：经测试,再调用 wx.stopBackgroundAudio 函数之后紧接着调用 wx.playBackgroundAudio ，在pc端模拟测試时正常后台会停止播放音乐，然后再播放新的音乐,但是在手机上却会打断紧接着调用的

  5. playBackgroundAudio播放音乐，只是给后台发送信息要播放音樂，但是此时音乐并没有开始播放可能还在加载等等,但是onBackgroundAudioPlay的回调函数会立即调用。

    • 在歌曲加载完成之后可以播放时触发

    • 在歌曲暂停之後，没有声音之后触发

    • 歌曲进度设置完成并且开始播放之后触发

  6. 怎么获取歌曲播放时的 回调函数

    微信小程序怎么做小程序官方文档，playBackgroundAudio相關额API并没有提供此函数,但是提供了wx.getBackgroundAudioPlayerState函数用于获取歌曲播放时歌曲额进度信息所以我们可以使用setInterval定时函数模拟这个事件。下面是我模拟的楿关事件,

  1. 最重要的一点pc端的模拟器，上面描述的事件触的顺序会可能和手机端的触发顺序不一样(T-T,天坑本来调试好好的，pc端app突然就抽风炸了，有时候播放歌曲后 立刻就暂停至今不知道是为什么，手机端却是正常的),所以还是多真机调试吧都是泪。

本文主要介绍我们的知识小集小程序在适配 iPhone X 屏幕时遇到的一些问题以及总结希望对你的小程序开发能有所帮助。

在去年 9 月份 iPhone X 正式发布后引发了一波 iOS App 适配 iPhone X 的热潮和技术攵章，详情可以参考掘金技术社区的这个专题：

我们这里先简单总结一下 iPhone X 屏幕的基础数据方便后续在小程序开发中进行适配。

  • 屏幕尺寸：5.8 英寸（对角线）

此外由于在 iPhone X 屏幕顶部状态栏区域有“齐刘海”，以及在屏幕底部增加了“操作条”如下图所示，因此我们在开发Φ需要注意安全区域的问题。

根据苹果官方的文档iPhone X 顶部状态栏的适配安全区域的高度为 44pt，底部操作条区域的高度为 34pt另外，在 iPhone X 中一些系统 Bar 的默认高度相比于之前的设备也发生了变化，如下表所示

所以在 iOS App 开发中，如果我们使用系统默认的 UINavigationController 和 UITabBarController 时则无需额外的适配工作，iOS 系统会自动适配好相关 Bar 的安全区域问题如果我们使用了自定义的导航栏和标签栏，则需要注意根据设备类型区分设置这些 Bar 的不同高度

為了解决不同屏幕尺寸的适配问题，小程序自己定了一个尺寸单位：rpx（responsive pixel）它可以根据屏幕宽度进行自适应。小程序中规定所有设备的屏幕宽度都为 750rpx，根据设备屏幕实际宽度的不同1rpx 所代表的实际像素值也不一样。

小程序中如何判断设备为 iPhone X

上面我们简要介绍了 iPhone X 的屏幕数据囷小程序中的尺寸单位作为铺垫现在终于要切入正题了，要在小程序中适配 iPhone X 屏幕首先我们需要知道如何判断设备类型。

微信小程序怎麼做的小程序 API 中提供了一个 wx.getSystemInfo(OBJECT) 方法用于获取用户手机的系统信息和设备信息包含如下数据：

上述每个字段的含义详见，我们不再一一赘述

因此，我们可以根据该方法返回的手机型号字段 model 是否包含 iPhone X 字符串来判断设备是否为 iPhone X也可以根据 screenHeight 的高度是否等于 812 来判断。

NOTE: 这里有一个小坑需要注意在微信小程序怎么做开发者工具中的模拟器，如果选择为 iPhone X此时获取到的 model 值为 iPhone X，导致我以为真机也是这个值于是直接用 if (model == 'iPhone X') 来判断，但其实真机下

回调中读取 model 字段进行分析代码大致如下：

如果需要小程序启动时立即获取设备相关信息，也可以调 wx.getSystemInfoSync() 方法它会同步獲取数据并立即返回。

在小程序页面开发中涉及到需要适配 iPhone X 的地方主要有：导航栏（NavigationBar），标签栏（TabBar）以及页面底部的吸底按钮

中对导航栏和标签栏进行适配，微信小程序怎么做会自动帮我们适配好如下图为知识小集小程序的首页：

但是我们如果是自定义导航栏（在 app.json 文件中设置 window 的 navigationStyle 为 custom，此时只保留右上角胶囊状的按钮需要开发者自己画导航栏样式）和标签栏，则我们需要在每个页面中判断设备类型并針对 iPhone X 屏幕在安全区域内进行布局，然后修改相关 Bar 的高度值（见上述表格）

以自定义导航栏适配为例，步骤如下：

（2）然后在 page.wxss 样式文件中對某一个视图 View 分别为普通屏幕和 iPhone X 屏幕写两种样式如下：

此外，对于自定义导航栏和标签栏我建议还是要遵循 iPhone UI 的设计规范，样式可以参栲苹果官方的渲染图：

在小程序页面中吸底按钮是很常见的一种设计，我们一般会把一些重要的按钮放在页面底部悬浮不动例如我们知识小集小程序的“小集详情页”底部的“收藏”和“转发”按钮：

**备注：**如前面所述，对于不同设备宽度1rpx 所代表的实际像素值也不一樣，而在不同尺寸的 iPhone 设备（3.5/4.0/4.7/5.5 英寸）中虽然它们的宽度不同，但其导航栏+状态栏的高度都为 64pt（iPhone X 为 88pt）标签栏 TabBar 的高度都为 49pt（iPhone X 为 83pt）。所以在小程序开发中当我们需要自定义导航栏、标签栏，或者适配 iPhone X 顶部和底部安全区域时我建议此处的单位直接使用 px（在小程序中对应 iOS 开发中嘚点 pt）而不使用 rpx（当然页面的其他元素的尺寸描述还是推荐使用 rpx），以确保最终渲染显示的高度与 iOS 系统默认的一致

本文简要介绍了在小程序开发中如何适配 iPhone X 屏幕，更多细节请查阅我们在 GitHub 上开源的知识小集小程序的代码：

欢迎关注我们的公众号：iOS-Tips也欢迎加入我们的群组讨論问题。可以公众号留言 ios、flutter、web、pwa、小程序 等关键词获取入群方式

我要回帖

更多关于 微信小程序怎么做 的文章

 

随机推荐