跳到主要内容

tauri android mobile环境配置及启动

环境配置​

相关文档​

https://tauri.app/blog/2022/12/09/tauri-mobile-alpha https://next--tauri.netlify.app/next/mobile/ https://hackmd.io/@lucasfernog/BkHI4e18j

使用android studio 安装sdk ndk​

  • 安装Android Sdk Platform 33
  • 安装Android SDK Platform-Tools
  • 安装NDK (Side by side) 25.0.8775105
  • 安装Android SDK Build-Tools 33.0
  • 安装Android SDK Command-line Tools

打开android studio file->Settings 这里输入图片描述

安装 Android Sdk Platform 33​

搜索sdk,在右侧sdk platforms 这里输入图片描述

安装 ndk及build-tools及模拟器相关​

这里输入图片描述

配置环境变量​

新建环境变量ANDROID_HOME，位置在电脑users->appData下对应目录

C:\Users\litttley\AppData\Local\Android\Sdk 这里输入图片描述 这里输入图片描述

新建环境变量NDK_HOME C:\Users\litttley\AppData\Local\Android\Sdk\ndk\25.1.8937393 这里输入图片描述 这里输入图片描述

新建环境变量JAVA_HOME D:\software\Android Studio\jre

在环境变量path添加java bin路径 D:\software\Android Studio\jre\bin

这里输入图片描述

注这里使用的是android studio中自带的java环境,也可以自已自行安装java jdk 版本为openjdk11

打开cmd窗口输入java --version

C:\Users\litttley>java --version
openjdk 11.0.13 2021-10-19
OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
OpenJDK 64-Bit Server VM (build 11.0.13+0-b1751.21-8125866, mixed mode)

这里输入图片描述

tauri-andorid项目初始化构建​

使用vite创建react项目

npm create vite@latest

或

yarn create vite
D:\myworkspace\tauri-pro>yarn create vite
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@4.0.0" with binaries:
     - create-vite
     - cva
√ Project name: ... tatui-android-demo
√ Select a framework: » React
√ Select a variant: » JavaScript

Scaffolding project in D:\myworkspace\tauri-pro\tatui-android-demo...

Done. Now run:

 cd tatui-android-demo
 yarn
 yarn dev

Done in 33.76s.

然后在项目根目录执行yarn

安装tauri cli​

项目根目录执行

npm install @tauri-apps/cli@next @tauri-apps/api@next npm install --save-dev internal-ip

这里输入图片描述

这里输入图片描述

配置vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { internalIpV4 } from 'internal-ip'
// https://vitejs.dev/config/
export default defineConfig(async ()=>{
  const host = await internalIpV4()

  const config = {
    plugins: [react()],
    server: {
      host: '0.0.0.0', // listen on all addresses
      port: 5173,
      strictPort: true,
      hmr: {
        protocol: 'ws',
        host,
        port: 5183,
      },
    },
  }

  return config

})

初始化tauri 项目根目录执行 yarn tauri init

D:\myworkspace\tauri-pro\tatui-android-demo>yarn tauri init
yarn run v1.22.19
$ D:\myworkspace\tauri-pro\tatui-android-demo\node_modules\.bin\tauri init
✔ What is your app name? · tatui-android-demo
✔ What should the window title be? · tatui-android-demo
? Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that w✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../build
✔ What is the url of your dev server? · http://localhost:5173
✔ What is your frontend dev command? · npm run dev
✔ What is your frontend build command? · npm run build

生成src-tauri 这里输入图片描述

初始化tauri-android 项目根目录执行 yarn tauri android init

在src-tauri目录下生成gen 这里输入图片描述

通过android studio 安装gradle​

首次使用tauri android项目 可以通过tauri android open使用android studio打开项目,如果电脑本身没有gradle环境，android studio 会自动安装 在根目录下执行tauri android open 这里输入图片描述

等到gradle sync finished完成之后关闭android studio即可

这里输入图片描述

注意：此步骤仅仅是为了安装gradle环境.也可自行百度安装gradle环境

启动​

yarn tauri android dev

这里输入图片描述

问题处理​

可以启动但是没有显示内容这里主要是assets中图片引入不能直接使用url引入

12-11 02:34:57.612 16719 16719 E Tauri/Console: File: https://tauri.localhost/src/assets/react.svg?import - Line 0 - Msg: Failed to load module script: The server responded with a non-JavaScript MIME type of "image/svg+xml". Strict MIME type checking is enforced for module scripts per HTML spec.

修改App.jsx 将reactLogo的引入方式改为

const reactLogo = new URL('./assets/react.svg', import.meta.url).href

修改后如下

import { useState } from 'react'
// import reactLogo from './assets/react.svg'
const reactLogo = new URL('./assets/react.svg', import.meta.url).href
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </div>
  )
}

export default App

这里输入图片描述

黑色背景改修index.css中 root及button下的background-color为白色即可

这里输入图片描述

这里输入图片描述