const autoprefixer = require(‘autoprefixer’)
const pxtoviewport = require(‘postcss-px-to-viewport’)
module.exports = {
css: {
loaderOptions: {
postcss: {
postcssOptions: {
plugins: [
autoprefixer(),
pxtoviewport({
viewportWidth: 375, // 视窗宽度，对应设计稿宽度
unitPrecision: 3, // 小数点位数
viewportUnit: ‘vw’, // 转换成的视窗单位
selectorBlackList: [‘.ignore’], // 不需要转换的类名
minPixelValue: 1, // 小于或等于 1px 不转换
mediaQuery: false // 允许在媒体查询中转换
})
]
}
}
}
}
}这段代码是一个 vue.config.js 文件中的设置，用于给自动添加浏览器 css 前缀和将 px 转化为 vw 以支持移动端响应式布局。具体来说，我们可以分别解释一下其中的 autoprefixer 和 postcss-px-to-viewport：
-
autoprefixer：这是一个免费的自动添加浏览器前缀的 PostCSS 编译器插件，基于 Can I Use 网站的数据，可以支持更多浏览器。通过在代码中编写规则，autoprefixer可以帮助我们自动添加浏览器前缀以支持不同的浏览器。例如，当我们编写display: flex;这样的 CSS 时，autoprefixer可以自动添加-webkit-display: flex;来支持 Safari 浏览器。 -
postcss-px-to-viewport：这是一个非常流行的 PostCSS 编译器插件，可以将我们为设计稿指定的 px 单位转换为 vw 单位，从而可以支持移动设备上的响应式布局。通过使用pxtoviewport，我们可以使用视口的宽度和设计图的宽度自动将像素转换为视口宽度的百分比。例如，当我们定义width: 100px;时，可以将其转换为width: 26.6667vw;来支持在不同设备上的响应式布局。
在这个配置文件里，我们将这两个插件结合起来使用，并可以进行相关的配置，例如定义设计稿的宽度，设置允许转换的最小像素值，并选择不进行 px 转 vw 的类名，这样可以灵活控制哪些元素需要使用 px，哪些元素需要使用 vw。
WebView（移动端原生组件）
WebView 是 Android 平台上提供的一个显示网页内容的组件，可以在应用程序中嵌入 WebView，让用户在应用程序中直接浏览网页内容，无需打开浏览器。WebView 是一个十分常用的 Android 开发组件，广泛应用于开发各种类型的应用程序，例如浏览器、新闻客户端、社交媒体、电商等应用。
在 Android 平台开发中，使用 WebView 可以方便地实现以下功能：
-
显示网页：WebView 可以在应用程序中加载网页内容，并显示在应用程序用户界面中。
-
与 JavaScript 交互：WebView 支持通过 JavaScript 与原生 Android 应用程序进行交互，可以实现一些 Android API 的调用、DOM 元素的操纵、表单的自动填充等功能。
-
显示本地 HTML 内容：WebView 可以将本地存储在应用程序中的 HTML 文件和静态资源加载到 WebView 中进行展示。
-
处理页面跳转：WebView 支持处理页面中的超链接跳转，可以自动打开浏览器或在进程内进行跳转操作。
-
自定义 WebView 的样式：WebView 提供了丰富的自定义 API，可以灵活设置 WebView 的 UI 样式，例如界面主题、字体样式、缩放模式等。
总之，WebView 是 Android 平台上十分重要的一个组件，有着广泛的应用和需求，可以方便地实现网页内容的展示和交互，提高了 Android 应用程序的交互性和用户体验。
schema通讯
“schema 通讯” 可以理解为应用程序之间透过特定的消息格式和接口进行的通信方式，schema 是描述消息格式的数据结构，包含数据类型，数据格式等信息。schema 被应用于各种场景，如不同平台之间，不同的编程语言之间以及不同的云服务之间的通讯，以保证消息的正确解析、传输和处理。
在实际使用中，schema 可以用于指导不同系统的数据格式定义，从而实现跨系统的数据格式兼容和互通。例如，Google 的 Protocol Buffers，Facebook 的 GraphQL 和 Apache Avro 等就是常用的 schema 通讯协议。
以 Protocol Buffers 为例，它是 Google 开发的一种轻量级的数据交换格式，主要用途是将结构化数据编码为平台无关的数据流，适用于数据存储、通信协议和数据交换等场景。Protocol Buffers 使用 schema 描述消息格式，包含消息名称、字段名称、字段类型及其他元数据信息，采用二进制编码，具有数据量小、解析速度快、解析灵活等优点，广泛应用于 Google 内部和多个开源项目中。
总之，schema 通讯是一种常见的应用程序之间进行通信的方式，依托于特定的消息格式和接口进行数据传输和解析，能够支持不同平台和编程语言之间的互通。
原生和H5之间有3种通讯方法
1.全局挂载（使用较少）
window.test = function(param) {
alert("Received param from Native:" + param);
}2.封装JSBrigdge
(function () {
var id = 0,
callbacks = {},
registerFuncs = {};
window.JSBridge = {
// 调用 Native
invoke: function(bridgeName, callback, data) {
// 判断环境，获取不同的 nativeBridge
var thisId = id ++; // 获取唯一 id
callbacks[thisId] = callback; // 存储 Callback
nativeBridge.postMessage({
bridgeName: bridgeName,
data: data || {},
callbackId: thisId // 传到 Native 端
});
},
receiveMessage: function(msg) {
var bridgeName = msg.bridgeName,
data = msg.data || {},
callbackId = msg.callbackId, // Native 将 callbackId 原封不动传回
responstId = msg.responstId;
// 具体逻辑
// bridgeName 和 callbackId 不会同时存在
if (callbackId) {
if (callbacks[callbackId]) { // 找到相应句柄
callbacks[callbackId](msg.data); // 执行调用
}
} elseif (bridgeName) {
if (registerFuncs[bridgeName]) { // 通过 bridgeName 找到句柄
var ret = {},
flag = false;
registerFuncs[bridgeName].forEach(function(callback) => {
callback(data, function(r) {
flag = true;
ret = Object.assign(ret, r);
});
});
if (flag) {
nativeBridge.postMessage({ // 回调 Native
responstId: responstId,
ret: ret
});
}
}
}
},
register: function(bridgeName, callback) {
if (!registerFuncs[bridgeName]) {
registerFuncs[bridgeName] = [];
}
registerFuncs[bridgeName].push(callback); // 存储回调
}
};
})();
JSBridge是如何实现调用的？
1.注册（把你的方法告诉webview我的方法是这么用的)
2.发送(把当前绑定过的方法和参数发送给webview）
3.调用（已经注册了，webview可以随意调用）
3.原生和h5之间的schema通讯
原生应用和 H5 页面之间的通讯，可以通过使用 schema 的方式实现。举例来说，在 Android 平台中，原生应用可以通过 Intent 来发送包含 schema 的消息，H5 页面通过处理类似于 “intent://xxx#Intent;…;end” 格式的 URL 来接收并解析消息内容。
具体来说，实现原生应用和 H5 页面之间的 schema 通讯需要完成以下步骤：
-
原生应用中将待传递的数据编码为 schema 格式，并将 schema 放入 Intent 中。
-
原生应用调用
startActivity(Intent)发送包含 schema 的 Intent。 -
H5 页面中，通过建立一个跟原生应用交互的 JavaScript 接口，注册一个 “intent://” 开头的 URL Scheme，并解析接收到的 URL，获取 schema 数据。
-
H5 页面中，将获取到的 schema 数据进行解析、处理，实现互动效果。
可以看到，通过 schema 通讯方式，原生应用和 H5 页面可以在不同平台和不同编程语言环境下进行数据传输和交互，实现了跨平台的互通。
需要注意的是，schema 通讯方式存在一定的安全风险，因为不恰当的 schema 数据可能会被黑客利用，对应用程序的数据和用户身份造成威胁。因此，在实际应用开发中，需要采用一些安全机制，例如数据加密、身份验证等措施，确保应用程序的数据和用户安全。
做移动端最主要的东西：（适配）
