目录
1. 使用 vw/vh 适配移动端
1.1 使用 vite 初始化项目
1.2 安装插件,将 px 转化成 vw
1.2.1 在 vite.config.ts 中,声明插件
1.2.2 手写 postcss 类型声明文件,解决路径爆红、没有提示
1.2.3 tsconfig.config.json VS tsconfig.json
2. 将 vue 项目丢到 Android app 中
2.1 创建 Android app
2.2 Android app 目录结构
2.3创建并启动虚拟机
2.4 修改布局 activity_main.xml
2.5 修改主任务逻辑 MainActivity
2.6 解决运行时网络连接失败的问题
2.7 打包项目(debug 包)
1. 使用 vw/vh 适配移动端
开发移动端,最麻烦的一点就是适配不同尺寸的屏幕
之前自适应,采用 rem / 百分比 / 媒体查询 等方式实现,现在可以采用 vm/vh 方案:
vw —— 视口的最大宽度,1vw 等于视口宽度的百分之一vh —— 视口的最大高度,1vh 等于视口高度的百分之一
1.1 使用 vite 初始化项目
npm init vue@latest
如果有报错信息:error when starting dev server: Error: Cannot find module 'node:path'
解决方案:
升级 node.js 至16常见的版本是12、14、16,一般使用大版本中的最新版本
1.2 安装插件,将 px 转化成 vw
npm install postcss-px-to-viewport -D
1.2.1 在 vite.config.ts 中,声明插件
安装完成后,直接修改 vite.config.ts,声明插件(由于 vite 中已经内联了 postcss,所以无需创建 postcss.config.js文件来声明插件)
import { fileURLToPath, URL } from 'url'import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vueJsx from '@vitejs/plugin-vue-jsx'// 将 px 转换为 vwimport postcsspxtoviewport from "postcss-px-to-viewport"export default defineConfig({plugins: [vue(), vueJsx()],css: {postcss: {plugins: [postcsspxtoviewport({unitToConvert: 'px', // 要转化的单位viewportWidth: 750, // UI设计稿的宽度,一般写 320// 下面的不常用,上面的常用unitPrecision: 6, // 转换后的精度,即小数点位数propList: ['*'], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换viewportUnit: 'vw', // 指定需要转换成的视窗单位,默认vwfontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位,默认vwselectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名,minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认falsereplace: true, // 是否转换后直接更换属性值landscape: false // 是否处理横屏情况})]}},resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}})
注意:直接从postcss-px-to-viewport 依赖中读取内容,路径会爆红,并且 postcsspxtoviewport 中也没有智能提示,这是因为缺少声明文件
如何解决 路径爆红、没有提示 这两个问题呢?根据提示,得到两种方案:
使用命令下载 postcss 的声明文件自己写一个 postcss 的声明文件
如果使用命令下载 postcss 声明文件,则会出现报错(当前社区内没有 ts 声明文件)
所以还是手写一个 postcss 声明文件吧 ——postcss-px-to-viewport.d.ts
1.2.2 手写 postcss 类型声明文件,解决路径爆红、没有提示
通过declare module 'postcss-px-to-viewport' 给 postcss 扩充声明
declare module 'postcss-px-to-viewport' {type Options = {unitToConvert: 'px' | 'rem' | 'cm' | 'em',viewportWidth: number,// 下面的不常用,上面的常用viewportHeight: number, // 目前未使用;TODO:需要不同的单位和不同属性的数学unitPrecision: number,viewportUnit: string,fontViewportUnit: string, // vmin更适合selectorBlackList: string[],propList: string[],minPixelValue: number,mediaQuery: boolean,replace: boolean,landscape: boolean,landscapeUnit: string,landscapeWidth: number}// 注意:这里导出一个函数,如果使用箭头函数容易报错,推荐使用 function 这种写法export default function(options: Partial<Options>):any}
类型声明文件注意问题:
类型声明文件,最终导出一个函数如果使用箭头函数容易报错,推荐使用 function 这种写法Partial 可以让 ts 中的属性全部变成可选项(非必填项)
1.2.3 tsconfig.config.json VS tsconfig.json
这俩文件是有区别的:
tsconfig.config.json —— 用于配置 vite 需要的各种工具tsconfig.json —— 用于配置 Vue 需要的各种工具
postcss 是针对 vite 的工具,因此要在tsconfig.config.json 中引入 1.2.2 手写的声明文件
{"extends": "@vue/tsconfig/tsconfig.web.json","include": ["env.d.ts", "src/**/*", "src/**/*.vue", "postcss-px-to-viewport.d.ts"],"exclude": ["src/**/__tests__/*"],"compilerOptions": {"composite": true,"baseUrl": ".","paths": {"@/*": ["./src/*"]}}}
这样就配置完成了:
在项目里,我们会继续用 px 写代码运行后,浏览器样式则会被自动改成 vw
2. 将 vue 项目丢到 Android app 中
2.1 创建 Android app
打开 Android Studio 后,会弹出这个界面,选择 Empty Activity
如果之前开启过别的项目,也可以通过下面的路径,重新打开上面的弹框
选择 Empty Activity 后,会出现下面的弹框,给项目起个好听的名字
点击 Finish,会开始初始化一个Android 项目,最终如下所示:
左侧是 Android app 源码顶部有个启动 app 的按钮,还有个创建虚拟机的按钮
2.2 Android app 目录结构
2.3创建并启动虚拟机
可以创建多个虚拟机
启动虚拟机,并让当前 Android app 运行
2.4 修改布局 activity_main.xml
先把 图形化编辑模式 切换成 代码编辑模式
添加一个类似于前端 display:flex 概念的线性布局 LinearLayout
再添加一个 WebView 容器,用于容纳网页
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"android:id="@+id/activity_main"android:layout_width="match_parent"android:orientation="vertical"android:layout_height="match_parent"><WebViewandroid:id="@+id/web_view"android:layout_width="match_parent"android:layout_height="match_parent" /></LinearLayout >
2.5 修改主任务逻辑 MainActivity
隐藏默认头部
import android.app.Activity;
public class MainActivity extends Activity { ... }
设置 WebView 属性,使他能够执行 Javascript 脚本
view.getSettings().setJavaScriptEnabled(true);
加载需要显示的网页(也就是正在运行的 vue 应用):
不能使用局域网地址,只能虚拟机专属地址 http://10.0.2.2端口是 vue 项目运行端口(启动 app 的同时,也要启动 vue 项目)
最终代码如下:
package com.example.myapplication;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;import android.webkit.WebView;// 隐藏默认头部import android.app.Activity;import android.webkit.WebViewClient;public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 设置一个 Activity 的显示界面,setContentView(R.layout.activity_main);// 这句类似 js 中的 document.querySelector()WebView view = (WebView)findViewById(R.id.web_view);// 设置 WebView 属性,使他能够执行 Javascript 脚本view.getSettings().setJavaScriptEnabled(true);// 加载需要显示的网页// 不能使用局域网地址,只能虚拟机专属地址 http://10.0.2.2// 端口是 vue 项目运行端口(就是启动 app 的同时,也要启动 vue 项目)view.loadUrl("http://10.0.2.2:3000");view.setWebViewClient(new WebViewClient());}}
2.6 解决运行时网络连接失败的问题
完成上面的修改后,点击右上角的运行按钮,在虚拟机里重启项目,会发现 —— 网络连接失败
这时候需要去主入口文件 AndroidManifest.xml里,增加一些权限配置
增加了 4 行代码,如下所示:
完整代码:
<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="/apk/res/android"xmlns:tools="/tools"package="com.example.myapplication"><applicationandroid:allowBackup="true"android:dataExtractionRules="@xml/data_extraction_rules"android:fullBackupContent="@xml/backup_rules"android:icon="@mipmap/ic_launcher"android:label="@string/app_name"android:roundIcon="@mipmap/ic_launcher_round"android:supportsRtl="true"android:theme="@style/Theme.MyApplication"android:usesCleartextTraffic="true"tools:targetApi="31"><activityandroid:name=".MainActivity"android:exported="true"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity></application><uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /></manifest>
这样,就能顺利预览本地运行的项目了
2.7 打包项目(debug 包)
打包项目时,需要把 2.5 中的路径,改成线上地址
打包项目,可以参考我的其他文章,在 capacitor / 工作记录 专栏里