移動(dòng)端開發(fā)--H5、小程序、混合APP
本文適合日常開發(fā)移動(dòng)端項(xiàng)目或?qū)σ苿?dòng)端開發(fā)感興趣的小伙伴閱讀。
如果這篇文章有幫到你，歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進(jìn)階～
作者：廣東靚仔
一、前言
廣東靚仔開發(fā)過H5、小程序、混合APP、Web等等的前端應(yīng)用，這里給小伙伴們分享下移動(dòng)端開發(fā)這方面的知識
下面給小伙伴們分享下這些技術(shù)在移動(dòng)端開發(fā)的運(yùn)用，由于篇幅有限，只會大概講講方案～
對某個(gè)技術(shù)感興趣的小伙伴可以到官方文檔進(jìn)行深入學(xué)習(xí)，官方文檔是最好的學(xué)習(xí)資源。
二、H5
廣東靚仔很久之前發(fā)過一篇使用Vue開發(fā)H5項(xiàng)目放在博客那里，今天看了下居然有7萬多閱讀量。下面給小伙伴們分享分享大概的思路。
viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
// 設(shè)計(jì)稿默認(rèn)值
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 實(shí)用工具庫
自動(dòng)獲取yapi的數(shù)據(jù)類型：GitHub某些開源項(xiàng)目
自動(dòng)上傳代碼：gulp
用戶與命令行交互的工具: Inquirer.js
2、React開發(fā)H5項(xiàng)目
React 是一個(gè)用于構(gòu)建用戶界面的 JavaScript 庫。
腳手架
create-react-app
請求
superagent...等
UI庫
taro、uni開發(fā)H5放到小程序再來展開講，開發(fā)的代碼區(qū)別不大
三、小程序
1、Taro
廣東靚仔之前使用Taro開發(fā)過小程序、H5，也寫過一些關(guān)于Taro的文章。
taro是京東推出的框架，可以使用一套代碼輸出到多端，下面是taro現(xiàn)在支持的平臺：
H5
ReactNative
微信小程序
京東小程序
百度小程序
支付寶小程序
字節(jié)跳動(dòng)小程序
QQ 小程序
釘釘小程序
企業(yè)微信小程序
支付寶 IOT 小程序
Taro使用不難，在實(shí)際開發(fā)項(xiàng)目的時(shí)候會有一些棘手的問題，很多問題廣東靚仔都遇到過，平時(shí)與小伙伴也有一些交流，有遇到技術(shù)問題的小伙伴可以一起交流交流解決方案。記得之前有小伙伴遇到上傳圖片壓縮這方面的問題，經(jīng)過一番嘗試，最后解決了。
UI
推薦1: Taro-ui
盡量使用官方推薦的UI庫，這樣可以避免編譯的時(shí)候出現(xiàn)一些不兼容的情況。
框架支持
React、Vue、Vue3、Nerv
如果是新的項(xiàng)目，這里推薦使用Taro3進(jìn)行開發(fā)
2、Wepy
廣東靚仔之前也是用wepy開發(fā)過一個(gè)小程序，開發(fā)體驗(yàn)還可以。wepy.js借鑒了Vue的語法風(fēng)格和功能特性，對官方提供的框架進(jìn)行了封裝，更貼近于MVVM架構(gòu)模式。
簡單講解：一個(gè).wpy文件可分為三大部分，各自對應(yīng)于一個(gè)標(biāo)簽：
腳本部分，即
<script></script>標(biāo)簽中的內(nèi)容，又可分為兩個(gè)部分：邏輯部分，除了config對象之外的部分，對應(yīng)于原生的.js文件；配置部分，即config對象，對應(yīng)于原生的
.json文件。結(jié)構(gòu)部分，即
<template></template>模板部分，對應(yīng)于原生的.wxml文件。樣式部分，即
<style></style>樣式部分，對應(yīng)于原生的.wxss文件。其中，小程序入口文件
app.wpy不需要template，所以編譯時(shí)會被忽略。.wpy文件中的script、template、style這三個(gè)標(biāo)簽都支持lang和src屬性，lang決定了其代碼編譯過程，src決定是否外聯(lián)代碼，存在src屬性且有效時(shí)，會忽略內(nèi)聯(lián)代碼。
小程序被分成三個(gè)實(shí)例：小程序?qū)嵗?/span>App、頁面實(shí)例Page、組件實(shí)例
import wepy from 'wepy';
// 聲明一個(gè)App小程序?qū)嵗?/span>
export default class MyAPP extends wepy.app {
}
// 聲明一個(gè)Page頁面實(shí)例
export default class IndexPage extends wepy.page {
}
// 聲明一個(gè)Component組件實(shí)例
export default class MyComponent extends wepy.component {
}3、uni
廣東靚仔之前使用uni開發(fā)過小程序、H5、混合App，在很久前也是用過uni前身Mui，這里給小伙伴們分享下uni相關(guān)知識。
uni一套代碼可以輸出到10個(gè)平臺：
Android版
ReactNative
iOS版
Web版
微信小程序版
支付寶小程序版
百度小程序版
字節(jié)跳動(dòng)小程序版
QQ小程序版
快應(yīng)用
360小程序
在uni的開發(fā)過程中，跟我們在開發(fā)vue項(xiàng)目差不多。
需要注意的是：關(guān)于樣式的的兼容、一些選擇器對H5支持，但是不一定支持APP端。在開發(fā)小程序和APP過程中樣式隔離需要我們手動(dòng)開啟，H5是自動(dòng)開啟的。
當(dāng)然，uni開發(fā)過程會有一些坑，不過現(xiàn)在很多都是有開發(fā)者遇到過了，也有了解決方案。這里推薦vue開發(fā)者可以選擇這個(gè)框架在日常項(xiàng)目中使用。
4、mpvue
mpvue使用 Vue.js 開發(fā)小程序的前端框架，基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實(shí)現(xiàn)，使其可以運(yùn)行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套 Vue.js 開發(fā)體驗(yàn)。
特點(diǎn)
徹底的組件化開發(fā)能力：提高代碼復(fù)用性
完整的
Vue.js開發(fā)體驗(yàn)方便的
Vuex數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用快捷的
webpack構(gòu)建機(jī)制：自定義構(gòu)建策略、開發(fā)階段 hotReload支持使用 npm 外部依賴
使用
Vue.js命令行工具 vue-cli 快速初始化項(xiàng)目H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力
請求
方式1: flyio
方式2: wx.request
都需要二次封裝，這里簡單的列舉下flyio的使用說明：
import Fly from 'flyio/dist/npm/wx'
let fly = new Fly
// 請求基礎(chǔ)路徑
fly.config.baseURL = process.env.BASE_API
//添加請求攔截器
fly.interceptors.request.use(async (request: FlyRequestConfig) => {
...
return request;
})
//添加響應(yīng)攔截器，響應(yīng)攔截器會在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
一個(gè)技術(shù)?？赏瑫r(shí)開發(fā) Android & iOS 原生 App、小程序和 iOS 輕 App，且多端渲染效果統(tǒng)一。
特點(diǎn)
易用：有 Vue、React 基礎(chǔ)，可快速上手，配套專用的開發(fā)工具APICloud Studio3
多端：一次開發(fā)，多端渲染，一個(gè)技術(shù)棧搞定移動(dòng)端開發(fā)
功能 API 豐富：提供 1千+ 模塊和 2萬+ API 可直接調(diào)用，面向行業(yè)和場景無限制
開發(fā)工具
APICloud Studio 3
云編譯
根據(jù)需要我們可以選擇編譯對應(yīng)的平臺
調(diào)試
通過連接wifi，使用真機(jī)調(diào)試
APICloud經(jīng)過幾年時(shí)間的迭代，現(xiàn)在已經(jīng)是一個(gè)成熟的框架了，小伙伴有對應(yīng)需求可以放心使用這個(gè)方案。
2、React Native
React Native 將原生開發(fā)的最佳部分與 React 相結(jié)合， 致力于成為構(gòu)建用戶界面的頂尖 JavaScript 框架。大多數(shù)情況下，使用 React Native 的團(tuán)隊(duì)可以在多個(gè)平臺間共享一份基礎(chǔ)代碼
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
打包
安卓：生成一個(gè)簽名的 AAB 或 APK 包
蘋果：Xcode 使用Release方案，產(chǎn)品→構(gòu)建編譯發(fā)布應(yīng)用程序，最后將應(yīng)用程序提交到 App Store。
五、總結(jié)
在看源碼前，我們先去官方文檔復(fù)習(xí)下框架設(shè)計(jì)理念、源碼分層設(shè)計(jì) 閱讀下框架官方開發(fā)人員寫的相關(guān)文章 借助框架的調(diào)用棧來進(jìn)行源碼的閱讀，通過這個(gè)執(zhí)行流程，我們就完整的對源碼進(jìn)行了一個(gè)初步的了解 接下來再對源碼執(zhí)行過程中涉及的所有函數(shù)邏輯梳理一遍
關(guān)注我，一起攜手進(jìn)階
如果這篇文章有幫到你，歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進(jìn)階～