本文适合日常开发移动端项目或对移动端开发感兴趣的小伙伴阅读。

如果这篇文章有帮到你，欢迎关注前端早茶，与广东靓仔携手共同进阶～

作者：广东靓仔

一、前言

广东靓仔开发过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文件可分为三大部分，各自对应于一个标签：

1. 脚本部分，即<script></script>标签中的内容，又可分为两个部分：逻辑部分，除了config对象之外的部分，对应于原生的.js文件；

   配置部分，即config对象，对应于原生的.json文件。

2.  结构部分，即<template></template>模板部分，对应于原生的.wxml文件。

3. 样式部分，即<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
})

小程序直播

小程序里面的直播功能，官方有很简单的支持，有两种引入方式：

1. 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。

五、总结

• 在看源码前，我们先去官方文档复习下框架设计理念、源码分层设计
• 阅读下框架官方开发人员写的相关文章
• 借助框架的调用栈来进行源码的阅读，通过这个执行流程，我们就完整的对源码进行了一个初步的了解
• 接下来再对源码执行过程中涉及的所有函数逻辑梳理一遍
  
  

关注我，一起携手进阶

如果这篇文章有帮到你，欢迎关注前端早茶，与广东靓仔携手共同进阶～