移動端開發(fā)--H5、小程序、混合APP
本文適合日常開發(fā)移動端項目或對移動端開發(fā)感興趣的小伙伴閱讀。
如果這篇文章有幫到你，歡迎關注前端早茶，與廣東靚仔攜手共同進階～
作者：廣東靚仔
一、前言
廣東靚仔開發(fā)過H5、小程序、混合APP、Web等等的前端應用，這里給小伙伴們分享下移動端開發(fā)這方面的知識
下面給小伙伴們分享下這些技術在移動端開發(fā)的運用，由于篇幅有限，只會大概講講方案～
對某個技術感興趣的小伙伴可以到官方文檔進行深入學習，官方文檔是最好的學習資源。
二、H5
廣東靚仔很久之前發(fā)過一篇使用Vue開發(fā)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的數(shù)據類型：GitHub某些開源項目
自動上傳代碼：gulp
用戶與命令行交互的工具: Inquirer.js
2、React開發(fā)H5項目
React 是一個用于構建用戶界面的 JavaScript 庫。
腳手架
create-react-app
請求
superagent...等
UI庫
taro、uni開發(fā)H5放到小程序再來展開講，開發(fā)的代碼區(qū)別不大
三、小程序
1、Taro
廣東靚仔之前使用Taro開發(fā)過小程序、H5，也寫過一些關于Taro的文章。
taro是京東推出的框架，可以使用一套代碼輸出到多端，下面是taro現(xiàn)在支持的平臺：
H5
ReactNative
微信小程序
京東小程序
百度小程序
支付寶小程序
字節(jié)跳動小程序
QQ 小程序
釘釘小程序
企業(yè)微信小程序
支付寶 IOT 小程序
Taro使用不難，在實際開發(fā)項目的時候會有一些棘手的問題，很多問題廣東靚仔都遇到過，平時與小伙伴也有一些交流，有遇到技術問題的小伙伴可以一起交流交流解決方案。記得之前有小伙伴遇到上傳圖片壓縮這方面的問題，經過一番嘗試，最后解決了。
UI
推薦1: Taro-ui
盡量使用官方推薦的UI庫，這樣可以避免編譯的時候出現(xiàn)一些不兼容的情況。
框架支持
React、Vue、Vue3、Nerv
如果是新的項目，這里推薦使用Taro3進行開發(fā)
2、Wepy
廣東靚仔之前也是用wepy開發(fā)過一個小程序，開發(fā)體驗還可以。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決定是否外聯(lián)代碼，存在src屬性且有效時，會忽略內聯(lián)代碼。
小程序被分成三個實例：小程序實例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開發(fā)過小程序、H5、混合App，在很久前也是用過uni前身Mui，這里給小伙伴們分享下uni相關知識。
uni一套代碼可以輸出到10個平臺：
Android版
ReactNative
iOS版
Web版
微信小程序版
支付寶小程序版
百度小程序版
字節(jié)跳動小程序版
QQ小程序版
快應用
360小程序
在uni的開發(fā)過程中，跟我們在開發(fā)vue項目差不多。
需要注意的是：關于樣式的的兼容、一些選擇器對H5支持，但是不一定支持APP端。在開發(fā)小程序和APP過程中樣式隔離需要我們手動開啟，H5是自動開啟的。
當然，uni開發(fā)過程會有一些坑，不過現(xiàn)在很多都是有開發(fā)者遇到過了，也有了解決方案。這里推薦vue開發(fā)者可以選擇這個框架在日常項目中使用。
4、mpvue
mpvue使用 Vue.js 開發(fā)小程序的前端框架，基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現(xiàn)，使其可以運行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套 Vue.js 開發(fā)體驗。
特點
徹底的組件化開發(fā)能力：提高代碼復用性
完整的
Vue.js開發(fā)體驗方便的
Vuex數(shù)據管理方案：方便構建復雜應用快捷的
webpack構建機制：自定義構建策略、開發(fā)階段 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處理之前執(zhí)行
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
一個技術棧可同時開發(fā) Android & iOS 原生 App、小程序和 iOS 輕 App，且多端渲染效果統(tǒng)一。
特點
易用：有 Vue、React 基礎，可快速上手，配套專用的開發(fā)工具APICloud Studio3
多端：一次開發(fā)，多端渲染，一個技術棧搞定移動端開發(fā)
功能 API 豐富：提供 1千+ 模塊和 2萬+ API 可直接調用，面向行業(yè)和場景無限制
開發(fā)工具
APICloud Studio 3
云編譯
根據需要我們可以選擇編譯對應的平臺
調試
通過連接wifi，使用真機調試
APICloud經過幾年時間的迭代，現(xiàn)在已經是一個成熟的框架了，小伙伴有對應需求可以放心使用這個方案。
2、React Native
React Native 將原生開發(fā)的最佳部分與 React 相結合， 致力于成為構建用戶界面的頂尖 JavaScript 框架。大多數(shù)情況下，使用 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方案，產品→構建編譯發(fā)布應用程序，最后將應用程序提交到 App Store。
五、總結
在看源碼前，我們先去官方文檔復習下框架設計理念、源碼分層設計 閱讀下框架官方開發(fā)人員寫的相關文章 借助框架的調用棧來進行源碼的閱讀，通過這個執(zhí)行流程，我們就完整的對源碼進行了一個初步的了解 接下來再對源碼執(zhí)行過程中涉及的所有函數(shù)邏輯梳理一遍
關注我，一起攜手進階
如果這篇文章有幫到你，歡迎關注前端早茶，與廣東靚仔攜手共同進階～