+uniapp+跨端兼容の変更点

追加された行はこの色です。
削除された行はこの色です。
+uniapp+跨端兼容へ行く。
+uniapp+跨端兼容の差分を削除
#author("2022-12-18T11:52:39+08:00","default:Admin","Admin")
#author("2022-12-19T15:28:54+08:00","default:Admin","Admin")
[[uni-app]]

&color(red){※前提条件：vue3 的uniapp开发};

#contents

* 概要 [#qea9c970]

在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

* 运行时（runtime） [#w692a39f]
runtime不是运行在电脑开发环境，而是运行在真正的终端上。

uni-app在每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime。这是一个比较庞大的工程。

- 在小程序端，uni-app的runtime，主要是一个小程序版的vue runtime，页面路由、组件、api等方面基本都是转义。
- 在web端，uni-app的runtime相比普通的vue项目，多了一套ui库、页面路由框架、和uni对象（即常见API封装）
- 在App端，uni-app的runtime更复杂，可以先简单理解为DCloud也有一套小程序引擎，打包app时将开发者的代码和DCloud的小程序打包成了apk或ipa。当然，事实上DCloud确实有小程序引擎产品，供原生应用实现小程序化。
* 条件编译 [#kdcf2963]

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

- #ifdef：if defined 仅在某平台存在
- #ifndef：if not defined 除了某平台均存在
- %PLATFORM%：平台名称


|条件编译写法|说明|h
|#ifdef APP-PLUS&br; 需条件编译的代码&br; #endif&br; |仅出现在 App 平台下的代码|
|#ifndef H5&br; 需条件编译的代码&br; #endif|除了 H5 平台，其它平台均存在的代码|
|#ifdef H5 ｜｜ MP-WEIXIN&br; 需条件编译的代码&br; #endif|在 H5 平台或微信小程序平台存在的代码（这里只有｜｜，不可能出现&&，因为没有交集）|

** %PLATFORM% 可取值如下： [#b3e7e450]

|值|平台|h
|APP-PLUS|App|
|APP-PLUS-NVUE或APP-NVUE|App nvue|
|H5|H5|
|MP-WEIXIN|微信小程序|
|MP-ALIPAY|支付宝小程序|
|MP-BAIDU|百度小程序|
|MP-TOUTIAO|字节跳动小程序|
|MP-QQ|QQ小程序|
|MP-360|360小程序|
|MP|微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序|
|QUICKAPP-WEBVIEW|快应用通用(包含联盟、华为)|
|QUICKAPP-WEBVIEW-UNION|快应用联盟
|QUICKAPP-WEBVIEW-UNION|快应用联盟|

** 例子 [#j145ac68]

*** 组件 [#f73da654]

#codeprettify{{
<!-- #ifdef MP-WEIXIN -->
<ad unit-id="123456789"></ad>
<!-- #endif -->
}}

***CSS [#jebed00e]

在 CSS 中使用条件编译，往往是因为某些平台的内置组件的样式，会影响到一血界面的渲染。

#codeprettify{{
/* #ifdef MP-ALIPAY*/
input {
padding: 0;
/* #endif */
}
}}

*** js [#m2ce3955]

#codeprettify{{
// #ifdef APP-PLUS
const uuid = plus.device.uuid;
// #endif
}}

*** json [#l31c0662]

#codeprettify{{
{
"globalStyle": {
	"navigationBarBackgroundColor": "#FF3333"
},
"pages": [{
		"path": "pages/index/index"
		}
		// #ifdef APP-PLUS
		, {
		"path": "pages/speech/speech"
		}
		// #endif
	]
}
}}


#hr();
Comment：
#comment_kcaptcha
跨端兼容 の変更点

跨端兼容の変更点
