3、uni
广东靓仔之前使用uni开发过小程序、H5、混合App，在很久前也是用过uni前身Mui，这里给小伙伴们分享下uni相关知识。
uni一套代码可以输出到10个平台：
- Android版
- ReactNative
- iOS版
- Web版
- 微信小程序版
- 支付宝小程序版
- 百度小程序版
- 字节跳动小程序版
- QQ小程序版
- 快应用
- 360小程序
在uni的开发过程中，跟我们在开发vue项目差不多。
需要注意的是：关于样式的的兼容、一些选择器对H5支持，但是不一定支持APP端。在开发小程序和APP过程中样式隔离需要我们手动开启，H5是自动开启的。
当然，uni开发过程会有一些坑，不过现在很多都是有开发者遇到过了，也有了解决方案。这里推荐vue开发者可以选择这个框架在日常项目中使用。
4、mpvue
mpvue使用 Vue.js 开发小程序的前端框架，基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
特点
- 彻底的组件化开发能力：提高代码复用性
- 完整的
Vue.js开发体验 - 方便的
Vuex数据管理方案：方便构建复杂应用 - 快捷的
webpack构建机制：自定义构建策略、开发阶段 hotReload - 支持使用 npm 外部依赖
- 使用
Vue.js命令行工具 vue-cli 快速初始化项目 - H5 代码转换编译成小程序目标代码的能力
请求
方式1: flyio
方式2: wx.request
都需要二次封装，这里简单的列举下flyio的使用说明：
import Fly from 'flyio/dist/npm/wx' let fly = new Fly // 请求基础路径 fly.config.baseURL = process.env.BASE_API //添加请求拦截器 fly.interceptors.request.use(async (request: FlyRequestConfig) => { ... return request; }) //添加响应拦截器，响应拦截器会在then/catch处理之前执行 fly.interceptors.response.use((response: FlyResponse) => { ... const { data, headers } = response return data })
小程序直播
小程序里面的直播功能，官方有很简单的支持，有两种引入方式：
- app.json中添加分包以及插件，不要改变provider的appId
"subpackages": [ { "root": "packageA", "pages": [ "pages/home/home" ] } ], "plugins": { "live-player-plugin": { "version": "1.0.1", "provider": "xxxxxxxxxx" } },
2. app.json中直接添加插件，不要改变provider的appId
"plugins": { "live-player-plugin": { "version": "1.0.1", "provider": "xxxxxxxxxx" }
四、混合APP
1、APICloud
一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App，且多端渲染效果统一。
特点
- 易用：有 Vue、React 基础，可快速上手，配套专用的开发工具APICloud Studio3
- 多端：一次开发，多端渲染，一个技术栈搞定移动端开发
- 功能 API 丰富：提供 1千+ 模块和 2万+ API 可直接调用，面向行业和场景无限制
开发工具
APICloud Studio 3
云编译
根据需要我们可以选择编译对应的平台
调试
通过连接wifi，使用真机调试
APICloud经过几年时间的迭代，现在已经是一个成熟的框架了，小伙伴有对应需求可以放心使用这个方案。
2、React Native
React Native 将原生开发的最佳部分与 React 相结合， 致力于成为构建用户界面的顶尖 JavaScript 框架。大多数情况下，使用 React Native 的团队可以在多个平台间共享一份基础代码
react native提供了一些核心组件
Demo
import React from 'react'; import { View, Text, Image, ScrollView, TextInput } from 'react-native'; const App = () => { return ( <ScrollView> <Text>Some text</Text> <View> <Text>Some more text</Text> <Image source={{ uri: 'https://reactnative.dev/docs/assets/p_cat2.png', }} style={{ width: 200, height: 200 }} /> </View> <TextInput style={{ height: 40, borderColor: 'gray', borderWidth: 1 }} defaultValue="You can type in me" /> </ScrollView> ); } export default App;
请求
Fetch
打包
安卓：生成一个签名的 AAB 或 APK 包
苹果：Xcode 使用Release方案，产品→构建编译发布应用程序，最后将应用程序提交到 App Store。
五、总结
在众多的技术框架中，筛选适合自己团队项目的解决方案，需要我们对对应的技术进行学习。 官方文档是最好的学习资料，大家平时遇到问题可以先到文档找下解决方案，在寻找的过程中也许会发现让你眼前一亮的知识点。 在我们阅读完官方文档后，我们一定会进行更深层次的学习，比如看下框架底层是如何运行的，以及源码的阅读。 这里广东靓仔给下一些小建议：
- 在看源码前，我们先去官方文档复习下框架设计理念、源码分层设计
- 阅读下框架官方开发人员写的相关文章
- 借助框架的调用栈来进行源码的阅读，通过这个执行流程，我们就完整的对源码进行了一个初步的了解
- 接下来再对源码执行过程中涉及的所有函数逻辑梳理一遍
