现在位置: 首页 / Uniapp / uniapp / 正文

工作记录，使用Uniapp开发移动应用

  • 友人a丶
  • Uniapp
  • 2022-01-13
  • 1336热度
  • 0评论

起步

项目需求：录制视频和语音，在app页面的上半部分实时显示。下半部分显示文字提示，提醒用户回答确认。最后将录制的视频提交到服务器保存。

1.Android studio （不是必要的）

安装 ：https://developer.android.google.cn/，作为开发过程中App的调试工具。（Android Studio基于IntelliJ Platform）。

插件市场搜索不到中文插件，手动下载：https://plugins.jetbrains.com/plugin/13710-chinese-simplified-language-pack，下载对应版本号的插件。

2.Virtual Device

随便打开一个项目，点右上角运行，按提示安装android Virtual Device.

启动虚拟机时报错：haxm device is not found

下载安装：haxm-windows_v7_5_1.zip。重新启动，进入android studio-->AVD Manager-->启动虚拟设备-->OK。

3.uniapp 配置安卓模拟器

检测不到模拟器的解决办法：https://ask.dcloud.net.cn/article/97

公司电脑上各种方法试变了，回家用自己电脑，那真是一气呵成。设置好adb工具路径，端口都不用管，然后打开模拟器，Hbuilder自己就检测到了。这................🤣🤣

总结关闭360这些软件，然后重启试试。

Uniapp之App开发

关于week：http://doc.weex.io/zh/

uni-app App端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。

在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面(native vue的缩写)，则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hello uni-app示例就是如此。

虽然nvue也可以多端编译，输出H5和小程序，但nvue的css写法受限，所以如果你不开发App，那么不需要使用nvue。

以往的 weex ，有个很大的问题是它只是一个高性能的渲染器，没有足够的API能力（比如各种push sdk集成、蓝牙等能力调用），使得开发时非常依赖原生工程师协作，开发者本来想节约成本，结果需要前端、iOS、Android 3拨人开发，适得其反。 nvue 解决了这个问题，让前端工程师可以直接开发完整 App，并提供丰富的插件生态和云打包。这些组合方案，帮助开发者切实的提高效率、降低成本。

App端的webview组件是非常强大的，可以更灵活的控制和拥有更丰富的API：https://www.html5plus.org/、https://ask.dcloud.net.cn/article/34922

1. App端请求系统权限相关说明：https://blog.csdn.net/weixin_45416117/article/details/121354191

2.H5调用摄像头相关说明：https://www.cnblogs.com/kuangke/p/14278565.html

3.uniapp 安卓Api权限申请：https://www.html5plus.org/doc/zh_cn/android.html、https://blog.csdn.net/superlover_/article/details/113646369

4.uniapp APP端运行时对象：https://www.html5plus.org/doc/zh_cn/runtime.html

5.权限检测插件：https://ext.dcloud.net.cn/plugin?id=594

H5 摄像头操作

已废弃的媒体调用API：navigator.getUserMedia

最新的API：navigator.mediaDevices.getUserMedia()；

mediaDevices 是 Navigator 只读属性，返回一个 MediaDevices 对象，该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。MediaDevices 是一个单例对象。通常，您只需直接使用此对象的成员。

1.WebRTC API 

WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。

2.MediaDevices.getUserMedia() 

调用时提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。

它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个  PermissionDeniedError 或者 NotFoundError 。

提示：返回的promise对象可能既不会resolve也不会reject，因为用户不是必须选择允许或拒绝。

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  /* 使用这个stream stream */
})
.catch(function(err) {
  /* 处理error */
});
详细文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

3.媒体流(MediaStream) 

将录制的视频流通过Video元素播放。

video.src = CompatibleURL.createObjectURL(stream);
/* 或者 */
video.srcObject = stream;

相关文档：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaStream

P2P Media Loader是一个开源 JavaScript 库，它使用现代 Web 浏览器（即 HTML5 视频和 WebRTC）的功能通过 P2P 传递媒体，并通过与许多流行的 HTML5 视频播放器的集成进行播放。它不需要任何网络浏览器插件或附加组件即可运行（参见演示）。

相关的优秀项目：
https://github.com/Novage/p2p-media-loader、https://github.com/muaz-khan/RecordRTC、https://github.com/streamproc/MediaStreamRecorder

H5媒体流

1.MediaStream.getTracks()，返回流中所有的MediaStreamTrack列表。
2.MediaStream.getAudioTracks()，返回流中kind属性为"audio"的MediaStreamTrack列表。顺序是不确定的，不同浏览器间会有不同，每次调用也有可能不同。
3.MediaStream.getVideoTracks()，顺序是不确定的，不同浏览器间会有不同，每次调用也有可能不同。

媒体流录制（MediaRecorder）：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder/MediaRecorder

用于录制媒体流，该接口在手机、PC端均受支持。

uniapp之打包app

1.manifest.json

文件说明：https://uniapp.dcloud.io/collocation/manifest

2.App启动图

相关说明：https://ask.dcloud.net.cn/article/35527、https://www.jianshu.com/p/3fd048644e3f?tdsourcetag=s_pctim_aiomsg

3.android签名证书

生成指南：https://ask.dcloud.net.cn/article/35777

4.自定义调试基座

相关文档：https://ask.dcloud.net.cn/article/35115

5.uni-app运行环境版本和编译器版本不一致的问题

HBuilderX1.7.0及以上版本uni-app添加了运行环境版本和编译环境版本的校验机制，当两个版本不一致时会弹出以下提示：

工作记录，使用Uniapp开发安卓应用
应用弹窗提醒
相关文档
https://ask.dcloud.net.cn/article/35627

Webview

1.相关功能拓展方法：https://ask.dcloud.net.cn/article/35036

问题总结

1. 有时候听筒播放声音、有时候扬声器播放（使用h5plus直接指定扬声器）：https://www.html5plus.org/doc/zh_cn/audio.html

2.支持的约束对象属性：https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints

3.定义媒体设备的相关约束：https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

4.回声消除：https://baike.baidu.com/item/%E5%9B%9E%E5%A3%B0%E6%B6%88%E9%99%A4%E6%8A%80%E6%9C%AF/16479565?fr=aladdin

H5下的录音会默认打开回声消除，最终导致的就是录制音频的时候会自动过滤设备发出的声音，导致无法正常录制全部声音。用过定义约束对象关闭回声消除。

web-view使用uni api

1.在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯：https://ask.dcloud.net.cn/article/35083

2.Native.js：https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/88

3.安卓首屏关闭的机制：https://ask.dcloud.net.cn/article/35565，如果页面白屏（未加载完或者未渲染任何东西）会splash一直存在，10秒后无论如何都会关闭。

IOS相关问题

1.常见问题

1. 使用 Safari打开摄像头黑屏，但是可以成像，需要添加playsinline,webkit-playsinline属性为true，设置非全屏播放可正常使用

<video v-show="!imgSrc" id="videoCamera" playsinline webkit-playsinline="true" :width="videoWidth" :height="videoHeight" autoplay>
 您的浏览器不支持 video 标签。
</video>
  1. H5 录像在ios中，需要视频开始播放了才会显示图像。可以设置自动播放或者controls控制条来操作。
  2. H5 ios录制不支持webm格式（支持mp4，安卓只支持webm不支持mp4）：https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported
  3. 相关文章：https://www.jianshu.com/p/274b5ebb917b
  4. 360 APP加固：https://jiagu.360.cn

2.IOS开发

  1. 注册开发者账号：https://developer.apple.com/cn/
  2. App 管理中心：https://appstoreconnect.apple.com/
  3. App ID管理中心：https://appleid.apple.com/
应用上架
https://www.zhihu.com/question/67115261/answer/733238523

3.App Uploader

App Uploader开发助手是iOS APP上架到App Store的辅助工具，解决iOS APP上架繁琐费时的情况，帮助跨平台APP开发者上架苹果应用。

在没有配置Mac苹果机的情况，实现iOS证书申请，创建iOS开发者证书、iOS发布证书等各类证书，iOS开发者可以在Windows、Linux或Mac系统中上传IPA到App Store,简化iOS APP上架流程！

APP开发助手 iOS APP上架到App Store的辅助工具：https://www.applicationloader.net/

4.应用上架

将 iOS 应用程序开发并上架至 App Store 需要完成以下主要步骤：

  1. 开发应用程序：使用 Xcode（苹果的集成开发环境）或其他适用工具开发 iOS 应用程序。编写代码、设计用户界面、测试和调试应用程序，确保其功能完整且符合苹果的设计准则和规范。
  2. 注册开发者账号：前往 Apple Developer 网站注册一个开发者账号。选择合适的开发者计划（通常有免费和付费两种），并遵循相应的注册流程完成注册。
  3. 准备应用程序资料：创建应用程序的 App ID（应用程序标识符），以便将其与开发者账号关联。准备应用程序的图标、截图、描述等相关信息，以便后续提交至 App Store 审核。
  4. 生成和配置证书：创建一个证书签名请求（CSR），并将其提交给苹果以获取开发者证书。使用开发者证书对应用程序进行签名，以确保其在设备上的安全性和可信度。
  5. 创建 App Store 上架资料：在 App Store Connect 中创建应用程序的上架资料，填写应用程序的名称、描述、关键词、类别等信息。上传应用程序的图标、截图、预览视频等素材。
  6. 测试和调试：在开发者账号中创建用于测试的 App Store 链接，以便在测试过程中进行安装和调试。对应用程序进行全面的测试，确保其在各种设备和系统版本上都能正常运行和表现。
  7. 提交审核：将应用程序提交至 App Store 审核，等待苹果审核团队对其进行审核和批准。审核包括检查应用程序是否符合苹果的设计准则、是否包含恶意内容、是否违反法律法规等。
  8. 发布上架：一旦应用程序通过审核，开发者可以选择发布应用程序至 App Store。在发布时，开发者可以设置应用程序的定价、地理范围、发布时间等参数。
  9. 应用程序上架后的管理：一旦应用程序上架，开发者可以通过 App Store Connect 进行应用程序的管理，包括更新版本、查看下载统计、回复用户评论等。在这个过程中，开发者需要一些必要的工具和资源，如 Xcode、开发者证书、App Store Connect 账号等。此外，对于一些特定功能（如推送通知、苹果支付等），可能还需要额外的配置和集成。

5. iOS开发

  1. 标准基座签名：https://uniapp.dcloud.net.cn/tutorial/run/ios-apple-certificate-signature.html
  2. 苹果描述文件（Apple Provisioning Profile）是用于在苹果开发者中心生成的文件，用于在开发和分发iOS应用程序时对应用进行身份验证和授权。描述文件包含了一些重要的信息，包括应用程序的 Bundle ID、开发者的证书、设备的 UDID（唯一设备标识符）等。描述文件可以分为开发者描述文件和发布描述文件两种类型，分别用于开发和发布应用程序。
  3. Bundle ID（Bundle Identifier）是一个在iOS和macOS开发中经常用到的概念，它是一个应用程序的唯一标识符。每个应用程序都必须有一个唯一的 Bundle ID，用于区分不同的应用程序。Bundle ID 通常采用逆域名的格式，例如："com.example.myapp"。Bundle ID 在开发中非常重要，它用于在描述文件、App Store 中唯一标识一个应用程序，还用于配置应用程序的各种功能和设置。
  4. 信任开发中的APP：通用->设备管理->信任APP
  5. iOS启用开发者模式：隐私与安全性->开发者模式->启用（iOS17之后看不到这个选项了，需要通过爱思助手来处理）
  6. iOS开发需要新增开发设备时，需要重新创建描述文件

nvue开发

默认的盒模型就是flex，并且与css略有不同，不支持vw、vh、百分比，默认是column排序。

Webview调用uni的API：https://uniapp.dcloud.net.cn/component/web-view.html#uniappjsbridgeready-%E7%9A%84%E4%BD%BF%E7%94%A8