Vue开发移动端

来源：Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

移动端尺寸

开发移动端最重要的是适配各种手机，所以应该使用相对尺寸单位，比如根据HTML font-size做缩放的rem，或与视口高度/宽度有关的vw/vh。

但前端设计稿通常采用px设计，为了适应多尺寸，需要对单位做转化。

可以使用插件postcss-px-to-viewport将px转化为vw/vh。

cnpm install postcss-px-to-viewport -d

配置（vite.config.js）：

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        pxtoViewPort({
          unitToConvert: 'px', // 要转化的单位
          viewportWidth: 320, // UI设计稿的宽度
          // unitPrecision: 6, // 转换后的精度，即小数点位数
          // propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          // viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
          // fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
          // selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
          // minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          // mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          // replace: true, // 是否转换后直接更换属性值
          // landscape: false // 是否处理横屏情况
        })
      ]
    }
  },
})

测试（App.vue）：

<template>
  <div class="test">
    草
  </div>
</template>

<style lang="scss">
.test {
  // 这里写的是px
  width: 200px;
  background-color: pink;
}
</style>

可以看到px单位被转化成了vw

打包成安卓应用

1. 新建一个Android Studio项目

2. 将res/layout/activity_main.xml代码修改成：

   <?xml version="1.0" encoding="utf-8"?>
   
   <LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/activity_main"
       android:layout_width="match_parent"
       android:orientation="vertical"
       android:layout_height="match_parent">
   
       <WebView
           android:id="@+id/web_view"
           android:layout_width="match_parent"
           android:layout_height="match_parent" />
   </LinearLayout>

3. 将程序包的MainActivity.java代码修改成：

   package com.example.vuetest;
   
   import android.os.Bundle;
   import android.app.Activity;
   import android.webkit.WebView;
   import android.webkit.WebViewClient;
   
   public class MainActivity extends Activity {
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           // 获取id为web_view的WebView XML标签
           WebView view = findViewById(R.id.web_view);
           // 运行执行JavaScript脚本
           view.getSettings().setJavaScriptEnabled(true);
           // Vue项目的服务器地址
           view.loadUrl("http://10.0.2.2:5173");
           view.setWebViewClient(new WebViewClient());
       }
   }

4. 将manifests/AndroidManifest.xml代码修改成：

   <?xml version="1.0" encoding="utf-8"?>
   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
       package="com.example.vuetest">
   
       <application
           android:allowBackup="true"
           android:icon="@mipmap/ic_launcher"
           android:label="@string/app_name"
           android:roundIcon="@mipmap/ic_launcher_round"
           android:supportsRtl="true"
           android:usesCleartextTraffic="true"
           android:theme="@style/Theme.VueTest">
           <activity
               android: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>