前端跨端技术调研报告

# 前端跨端技术调研报告

# Taro

官方文档参考：

博客文档参考：

小程序开发：

npm run build:weapp
npm run dev:weapp, 注意根目录下project.config.json下miniprogramRoot配置~

# 原生混合

原生微信小程序跳转taro,百度小程序跳转taro, 跳转登录态保持、分享、
原生小程序使用taro组件，地图组件
taro小程序跳转原生小程序

实现Taro 项目拆分到多个分包（Taro和原生混合开发） (opens new window)、Taro 项目拆分到多个分包后分包之间的redux状态共享 (opens new window)、blended-apart (opens new window)

# 备注

百度小程序开发时，根目录下project.swan.json中smartProgramRoot需与项目根目录 config 中的 outputRoot 设置的目一样；打包时需将smartProgramRoot改为.
Harmony Hybrid开发，通过 TaroWebContainer 集成打包后的h5页面时，如果页面白屏，报page not found，原因可能有二：

打包时publicPath配置错误，/ => ./试下；
将路由模式由browser 改为 hash

微信原生小程序 => taro？

原生小程序中用的一些只适配小程序的第三方node包，taro怎么适配？

比如 tdesign-miniprogram 组件库，转换后会报Tloading is not defined之类的错误~

不支持js高级语法，例如扩展运算符，可选链操作符，需要手动改写
不支持小程序插件引入

weixin-pages-convert (opens new window)

npx @tarojs/cli-convertor报错：

Error: Failed to load plugin 'taro' declared in 'BaseConfig': Cannot find module 'eslint-plugin-taro'
Require stack:
- /Users/zhouyuan17/workplace/baidu/adinf/apollo-go-wechat-miniprogram/src/__placeholder__.js
Referenced from: BaseConfig
    at Module._resolveFilena

使用 HTML 标签

# RN开发

按上述文档安装环境搭建，注意node版本v18+，Ruby 版本切换到 2.7.6~

ios开发调试：

本地启动服务，自动打开ios模拟器: react-native run-ios
本地启动服务，并生成二维码，通过 taro-playground APP 扫码可调试:
- 开发调试：taro build --type rn -- --watch --qr

ios打包

"bundle-ios":"react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle"

// --entry-file ,ios或者android入口的js名称，比如index.js
// --platform ,平台名称(ios或者android)
// --dev ,设置为false的时候将会对JavaScript代码进行优化处理。
// --bundle-output, 生成的jsbundle文件的名称，比如./ios/bundle/index.ios.jsbundle
// --assets-dest 图片以及其他资源存放的目录,比如./ios/bundle

react-native 打包app发布android / ios详细教程 (opens new window)

遗留问题：

怎么产出ios测试包？
taro-rn项目在ios模拟器上运行失败

# 报错记录

pod-install报错：

> pod-install

Scanning for pods...
1.15.2
> pod install

[!] Invalid `Podfile` file: undefined local variable or method `min_ios_version_supported' for #<Pod::Podfile:0x000000012c6c6380>. 
 #  from /Users/zhouyuan17/code/baidu-test-code/kuaduan/taro-rn/ios/Podfile:9
 #  -------------------------------------------
 #  
 >  platform :ios, min_ios_version_supported
 #  prepare_react_native_project!
 #  -------------------------------------------
Couldn't install Pods. Updating the Pods project and trying again...
> pod install --repo-update

Error: error:0308010C:digital envelope routines::unsupported

大致的意思是 node版本在 17+版本后增加了OpenSSL3.0，对允许算法和密钥大小增加了严格的限制，将node版本将至 v16+ 试试~

WARNING in external "taro_app_library@/remoteEntry.js"

https://github.com/NervJS/taro/issues/15413

# 鸿蒙开发

开发流程：

打开鸿蒙编辑器 DevEco-Studio，打开项目 harmonyDemo（或者新建一个新项目，选择空白模板）；

项目入口页面：harmonyDemo/entry/src/main/ets/pages/Index.ets
查看项目脚本文件 harmonyDemo/entry/oh-package.json5，查看是否安装依赖：@hybrid/web-container，更新版本后点击右上角Sync Now即可自动安装依赖；

右上角设备：Device Manager => 登录华为开发者账号，选择设备（之前没有安装设备的需要先申请），Actions选择三角图标运行；
之后回到项目，点击编辑器右上角Run entry按钮运行项目；
启动TaroWebController页面：

回到Taro项目，执行npm run build:harmony，生成h5文件；
将生成的h5文件复制到harmonyDemo/entry/src/main/resources/rawfile/目录下，即可运行；

# 收藏

参考项目：

Taro 使用小程序原生的页面、组件和插件：taro-sample-weap (opens new window)
基于 Taro3 + React 的开箱即用多端项目模板：taro3-react-template (opens new window)
taro-template (opens new window)：采用 Taro + React + TypeScript + Webpack + Tailwind css + Zustand + ahooks + Taro-ui 等技术栈和Taro常用库构建
GitHub-Pro (opens new window)：一个基于 Taro3 搭建的 GitHub 小程序客户端, 技术栈：Taro3 / Taro-ui / React-query / React18 / TypeScript
c-shopping-weapp (opens new window): taro3开发的电商微信小程序

其他：

tarojs-plugin-ssr (opens new window)
taro-react-router (opens new window): Taro 项目使用 react-router 开发多路由页面
taro-music (opens new window): typescript+taro+taro-ui+redux+react-hooks，基于Taro与网易云音乐 api 开发的微信小程序
taro-playground (opens new window): 官方提供了高度集成的开发环境 Taro Playground。开发者仅需要正常运行 JS 工程，即可进行 APP 调试。
duxapp：基于Taro使用模块化开发，提升开发效率 (opens new window)

taro+vue:

# uni-app

# Flutter

Flutter学习笔记

# HarmonyOS

# 收藏

# 参考

#跨端

上次更新: 11/30/2024, 10:08:28 PM