首页

Appearance

各种运行环境 ​

不同运行环境下的 JavaScript

  • 浏览器：ECMAScript + DOM + BOM
  • NodeJS：ECMAScript + Native(fs、http) + NPM
  • 小程序：ECMAScript + 小程序框架 + 小程序API

UI 渲染技术 ​

一般来说，渲染界面的技术有三种：(1)：纯客户端原生渲染；(2)：纯 web 技术渲染；(3)：混合开发 Hybrid 技术。

比如微信 JS-SDK 使用浏览器内核渲染，React Native 在渲染底层是用客户端原生渲染的。

uni-app ​

image-20230316145552108

环境 ​

  • IDE：HBuilderX
  • 兼容平台：微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）小程序、快应用、H5、Android App、iOS App

编译器和运行时

  • uni-app分编译器和运行时（runtime）。uni-app能实现一套代码、多端运行，是通过这2部分配合完成的。

  • runtime不是运行在电脑开发环境，而是运行在真正的终端上。

  • 编译器内置在HBuilderX工具中，也可以使用独立的cli版。编译器将开发者的代码进行编译，编译的输出物由各个终端的runtime进行解析，每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime。

  • 各端运行时

JS 引擎 & 渲染引擎

在web平台，逻辑层（js）和渲染层（html、css），都运行在统一的webview里。

但在小程序和app端，逻辑层和渲染层被分离了。

不管小程序还是app，逻辑层都独立为了单独的js引擎，渲染层仍然是webview（app上也支持纯原生渲染）。

所以注意小程序和app的逻辑层都不支持浏览器专用的window、dom等API。app只能在渲染层操作window、dom，即renderjs。

关于逻辑层和渲染层分离带来的注意事项，请详读

UI

uni-app 有 vue 页面和 nvue 页面。vue 页面是 webview 渲染的，nvue 只针对打包为 App 端并且app 端的 nvue 页面是原生渲染的。

为支持跨平台，框架建议使用 Flex 布局

JS

uni-app的js代码，h5端运行于浏览器中。非h5端（包含小程序和App），Android平台运行在v8引擎中，iOS平台运行在iOS自带的jscore引擎中，都没有运行在浏览器或 webview里。

非H5端，虽然不支持window、document、navigator等浏览器的js API，但也支持标准ECMAScript。

vue

  • uni-app 新增了应用和页面的生命周期
  • 发布到 H5 时支持所有vue的语法

特点 ​

  1. 组件、api 与微信小程序一致
  2. 兼容 weex 原生渲染
  3. 内嵌 mpvue 框架
  4. 支持通过 npm 安装第三方包
  5. 支持微信小程序自定义组件及 SDK
  6. 兼容 mpvue 组件及项目
  7. App 端支持和原生混合编码，还支持原生渲染的nvue，以及可以编译为kotlin和swift的uts。

在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。

支持原生代码混写和原生sdk集成。

语法 ​

vue、js、css、native vue

什么是tabBar 页面

页面间通信

uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等

  • uni.$emit(eventName,OBJECT)
  • uni.$once(eventName,callback)
  • uni.$off：移除监听器

全局变量 ​

uni

注意事项 ​

与普通 web 开发不同的地方：

  1. 像素单位由 px 改为 upx
  2. background-image 只能使用公网的图像

uts ​

uni type script，强类型编程语言

资料 ​

  • Wot Design Uni
    • 基于Vue3+TS开发，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。

React Native ​

跨 Android 和 IOS App 开发，使用用 Web 相关技术来编写，同样是利用了 JavaScript 解释执行的特性，但 RN 在渲染底层是用客户端原生渲染的。

react-native就是基于Virtual DOM渲染出原生控件。

初始化项目 ​

最新版本：react-native@0.73.2

shell
 npx react-native init demo --template react-native-template-typescript

不安装某些依赖包（ios）

shell
npx react-native init demo --template react-native-template-typescript --skip-install CocoaPods

可选模版：react-native-template-

注意： npx react-native@X.XX.X init AwesomeProject --version X.XX.X 项目名只能用字母

配置 ​

app.json 中的 name 只能包含字母和数字，可以使用大小写

编译 ​

如何编译生成apk

有 React Native CLI 和 Android Studio 两种方式

React Native CLI ​

  1. 生成签名秘钥

执行

shell
keytool -genkey -v -keystore ./key/release.keystore -alias release -keyalg RSA -keysize 2048 -validity 10000

将秘钥文件添加到 android/app 目录下

修改 android/app/build.gradle 中 signingConfigs 配置，（确保 signingConfigs 配置块在 buildTypes 之前）

  1. 创建 android/app/src/main/assets（若没有）

  2. 编译web资源

shell
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
  1. 生成apk
shell
cd android
# For Linux and Mac OSX
./gradlew assembleRelease

# For Windows
gradlew assembleRelease

expo ​

Android、IOS、Web 跨平台开发

Expo is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs. It provides an SDK for React Native that makes the native parts easier to use.

工具包 ​

react-native-safe-area-context

react-native-gesture-handler

@react-navigation/native

资料 ​

Flutter ​

Tauri ​

tauri会是 Electron 的替代方案？

Tauri：将JavaScript与Rust混用于GUI桌面应用程序

Weex ​

vue 技术

taro ​

京东

Donut ​

Donut 多端框架是支持使用小程序原生语法开发移动应用的框架，开发者可以一次编码，分别编译为小程序和 Android 以及 iOS 应用，实现多端开发

Copyright © 2023-2024 Evan You