一、前言
广东靓仔开发过H5、小程序、混合APP、Web等等的前端应用，这里给小伙伴们分享下移动端开发这方面的知识
1、使用过Vue、React、taro、uni技术开发过H5项目2、采用过wepy、mpvue、taro、uni、原生小程序来开发小程序3、运用过APICloud、uni、React Native开发过混合APP项目
下面给小伙伴们分享下这些技术在移动端开发的运用，由于篇幅有限，只会大概讲讲方案～
对某个技术感兴趣的小伙伴可以到官方文档进行深入学习，官方文档是最好的学习资源。
二、H5
1、Vue开发H5项目
广东靓仔很久之前发过一篇使用Vue开发H5项目放在博客那里，今天看了下居然有7万多阅读量。下面给小伙伴们分享分享大概的思路。
viewport
通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
rem
方式1：安装插件 lib-flexible、px2rem-loader方式2：自己封装个Rem
// 设计稿默认值 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
请求
方式1: axios
方式2: fetch
当然我们需要结合业务进行二次封装，这里就不展开了。
Mock
推荐1：EasyMock
推荐2：RAP
UI库
推荐1：Vant UI
推荐2：Mint UICube UI、Muse UI、WeUI、vux、aui、amaze...等等
根据业务选一款合适的来使用即可
工具推荐
lodash: JavaScript 实用工具库
自动获取yapi的数据类型：GitHub某些开源项目
自动上传代码：gulp
用户与命令行交互的工具: Inquirer.js
如果我们采用自定义脚手架，可以试试Inquirer.js，效果如下：
2、React开发H5项目
React 是一个用于构建用户界面的 JavaScript 库。
脚手架
create-react-app
请求
方式1: axios
方式2: fetch
superagent...等
UI库
推荐1. Ant Design Mobile推荐2： Onsen UI推荐3：Semantic-UI-React
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文件可分为三大部分，各自对应于一个标签：
- 脚本部分，即
标签中的内容，又可分为两个部分：逻辑部分，除了config对象之外的部分，对应于原生的.js文件；
配置部分，即config对象，对应于原生的.json文件。- 结构部分，即
模板部分，对应于原生的.wxml文件。 - 样式部分，即
样式部分，对应于原生的.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 { }
