移动端开发--H5、小程序、混合APP
共 8479字，需浏览 17分钟
·
2021-08-13 15:20
本文适合日常开发移动端项目或对移动端开发感兴趣的小伙伴阅读。
如果这篇文章有帮到你，欢迎关注前端早茶，与广东靓仔携手共同进阶～
作者：广东靓仔
一、前言
广东靓仔开发过H5、小程序、混合APP、Web等等的前端应用，这里给小伙伴们分享下移动端开发这方面的知识
下面给小伙伴们分享下这些技术在移动端开发的运用，由于篇幅有限，只会大概讲讲方案～
对某个技术感兴趣的小伙伴可以到官方文档进行深入学习，官方文档是最好的学习资源。
二、H5
广东靓仔很久之前发过一篇使用Vue开发H5项目放在博客那里，今天看了下居然有7万多阅读量。下面给小伙伴们分享分享大概的思路。
viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
// 设计稿默认值
const DEFAULT_WIDTH: number = 375
const setRem = (window: Window, document: Document): void => {
const docEl: HTMLElement = document.documentElement
const resizeEvent: string = 'orientationchange' in window ? 'orientationchange' : 'resize'
const reCaculate = (): void => {
const clientWidth: number = docEl.clientWidth
if (clientWidth) {
docEl.style.fontSize = 20 * (clientWidth / DEFAULT_WIDTH) + 'px'
}
}
if (document.addEventListener) {
window.addEventListener(resizeEvent, reCaculate, false)
document.addEventListener('DOMContentLoaded', reCaculate, false)
}
}
export default setRem
lodash: JavaScript 实用工具库
自动获取yapi的数据类型：GitHub某些开源项目
自动上传代码：gulp
用户与命令行交互的工具: Inquirer.js
2、React开发H5项目
React 是一个用于构建用户界面的 JavaScript 库。
脚手架
create-react-app
请求
superagent...等
UI库
taro、uni开发H5放到小程序再来展开讲，开发的代码区别不大
三、小程序
1、Taro
广东靓仔之前使用Taro开发过小程序、H5，也写过一些关于Taro的文章。
taro是京东推出的框架，可以使用一套代码输出到多端，下面是taro现在支持的平台：
H5
ReactNative
微信小程序
京东小程序
百度小程序
支付宝小程序
字节跳动小程序
QQ 小程序
钉钉小程序
企业微信小程序
支付宝 IOT 小程序
Taro使用不难，在实际开发项目的时候会有一些棘手的问题，很多问题广东靓仔都遇到过，平时与小伙伴也有一些交流，有遇到技术问题的小伙伴可以一起交流交流解决方案。记得之前有小伙伴遇到上传图片压缩这方面的问题，经过一番尝试，最后解决了。
UI
推荐1: Taro-ui
尽量使用官方推荐的UI库，这样可以避免编译的时候出现一些不兼容的情况。
框架支持
React、Vue、Vue3、Nerv
如果是新的项目，这里推荐使用Taro3进行开发
2、Wepy
广东靓仔之前也是用wepy开发过一个小程序，开发体验还可以。wepy.js借鉴了Vue的语法风格和功能特性，对官方提供的框架进行了封装，更贴近于MVVM架构模式。
简单讲解：一个.wpy文件可分为三大部分，各自对应于一个标签：
脚本部分，即
<script></script>标签中的内容，又可分为两个部分：逻辑部分，除了config对象之外的部分，对应于原生的.js文件；配置部分，即config对象，对应于原生的
.json文件。结构部分，即
<template></template>模板部分，对应于原生的.wxml文件。样式部分，即
<style></style>样式部分，对应于原生的.wxss文件。其中，小程序入口文件
app.wpy不需要template，所以编译时会被忽略。.wpy文件中的script、template、style这三个标签都支持lang和src属性，lang决定了其代码编译过程，src决定是否外联代码，存在src属性且有效时，会忽略内联代码。
小程序被分成三个实例：小程序实例App、页面实例Page、组件实例
import wepy from 'wepy';
// 声明一个App小程序实例
export default class MyAPP extends wepy.app {
}
// 声明一个Page页面实例
export default class IndexPage extends wepy.page {
}
// 声明一个Component组件实例
export default class MyComponent extends wepy.component {
}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。
五、总结
在看源码前，我们先去官方文档复习下框架设计理念、源码分层设计 阅读下框架官方开发人员写的相关文章 借助框架的调用栈来进行源码的阅读，通过这个执行流程，我们就完整的对源码进行了一个初步的了解 接下来再对源码执行过程中涉及的所有函数逻辑梳理一遍
关注我，一起携手进阶
如果这篇文章有帮到你，欢迎关注前端早茶，与广东靓仔携手共同进阶～