提交 db1d3603 编写于 作者: Q qiang

docs: platform.md remove mp

上级 500486ac
......@@ -19,7 +19,58 @@ uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-
* <span style="color:#859900;"> #ifndef</span>:if not defined 除了某平台均存在
* <b style="color:#268BD2"> %PLATFORM%</b>:平台名称
<table><thead><tr><th>条件编译写法</th><th>说明</th></tr></thead><tbody><tr><td><div class="code"><span class="token comment"><span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> APP-PLUS</b></span><br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;"> #endif</span></span></div></td><td>仅出现在 App 平台下的代码</td></tr><tr><td><div class="code"><span class="token comment"> <span style="color:#859900;"> #ifndef</span><b style="color:#268BD2"> H5</b></span><br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;"> #endif</span></span></div></td><td>除了 H5 平台,其它平台均存在的代码</td></tr><tr><td><div class="code"><span class="token comment"> <span style="color:#859900;"> #ifdef</span><b style="color:#268BD2"> H5</b></span><span style="color:#859900;"> || </span><b style="color:#268BD2">MP-WEIXIN</b><br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;"> #endif</span></span></div></td><td>在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集)</td></tr></tbody></table>
<table>
<thead>
<tr>
<th>条件编译写法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="code">
<span class="token comment">
<span style="color:#859900;">#ifdef</span>
<b style="color:#268BD2">APP-PLUS</b>
</span>
<br>需条件编译的代码<br>
<span class="token comment">
<span style="color:#859900;">#endif</span></span>
</div>
</td>
<td>仅出现在 App 平台下的代码</td>
</tr>
<tr>
<td>
<div class="code">
<span class="token comment">
<span style="color:#859900;">#ifndef</span>
<b style="color:#268BD2">H5</b>
</span>
<br>需条件编译的代码<br>
<span class="token comment">
<span style="color:#859900;">#endif</span></span>
</div>
</td>
<td>除了 H5 平台,其它平台均存在的代码</td>
</tr>
<tr>
<td>
<div class="code">
<span class="token comment">
<span style="color:#859900;">#ifdef</span>
<b style="color:#268BD2">H5</b>
</span>
<span style="color:#859900;">||</span>
<b style="color:#268BD2">APP-PLUS</b>
<br>需条件编译的代码<br><span class="token comment"> <span style="color:#859900;">#endif</span></span>
</div>
</td>
<td>在 H5 平台或 App 平台存在的代码(这里只有||,不可能出现&&,因为没有交集)</td>
</tr>
</tbody>
</table>
<b style="color:#268BD2"> %PLATFORM%</b> **可取值如下:**
......@@ -30,17 +81,6 @@ uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-
|APP-PLUS|App|
|APP-PLUS-NVUE或APP-NVUE|App nvue|
|H5|H5|
|MP-WEIXIN|微信小程序|
|MP-ALIPAY|支付宝小程序|
|MP-BAIDU|百度小程序|
|MP-TOUTIAO|字节跳动小程序|
|MP-QQ|QQ小程序|
|MP-KUAISHOU|快手小程序|
|MP-360|360小程序|
|MP|微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序|
|QUICKAPP-WEBVIEW|快应用通用(包含联盟、华为)|
|QUICKAPP-WEBVIEW-UNION|快应用联盟|
|QUICKAPP-WEBVIEW-HUAWEI|快应用华为|
**支持的文件**
......@@ -83,15 +123,13 @@ uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-
平台特有的组件
<span class="token comment">&lt;!-- <span style="color:#859900;"> #endif</span> --&gt;</span></code></pre>
示例,如下公众号关注组件仅会在微信小程序中出现:
示例,如下组件仅会在App中出现:
````html
<view>
<view>微信公众号关注组件</view>
<view>
<!-- uni-app未封装,但可直接使用微信原生的official-account组件-->
<!-- #ifdef MP-WEIXIN -->
<official-account></official-account>
<!-- #ifdef APP-PLUS -->
<my-test></my-test>
<!-- #endif -->
</view>
</view>
......@@ -117,7 +155,7 @@ uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-
![](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/04ecec40-4f3c-11eb-97b7-0dc4655d6e68.png)
不同平台下的特有功能,以及小程序平台的分包,都可以通过 pages.json 的条件编译来更好地实现。这样,就不会在其它平台产生多余的资源,进而减小包体积。
不同平台下的特有功能,都可以通过 pages.json 的条件编译来更好地实现。这样,就不会在其它平台产生多余的资源,进而减小包体积。
json的条件编译,如不同平台的key名称相同,cli项目下开发者自己安装的校验器会报错,需自行关闭这些校验器对json相同key的校验规则。如果使用HBuilderX的校验器,无需在意此问题,HBuilderX的语法校验器为此优化过。
......@@ -125,12 +163,12 @@ json的条件编译,如不同平台的key名称相同,cli项目下开发者
在不同平台,引用的静态资源可能也存在差异,通过 static 的的条件编译可以解决此问题,static 目录下新建不同平台的专有目录(目录名称同 `%PLATFORM%` 值域,但字母均为小写),专有目录下的静态资源只有在特定平台才会编译进去。
如以下目录结构,``a.png`` 只有在微信小程序平台才会编译进去,``b.png`` 在所有平台都会被编译。
如以下目录结构,``a.png`` 只有在 App 平台才会编译进去,``b.png`` 在所有平台都会被编译。
<pre v-pre="" data-lang="">
<code class="lang-" style="padding:0">
┌─static
│ ├─mp-weixin
│ ├─app-plus
│ │ └─a.png
│ └─b.png
├─main.js
......@@ -142,7 +180,7 @@ json的条件编译,如不同平台的key名称相同,cli项目下开发者
### 整体目录条件编译
如果想把各平台的页面文件更彻底的分开,也可以在uni-app项目根目录创建`platforms`目录,然后在下面进一步创建`app-plus``mp-weixin`等子目录,存放不同平台的文件。
如果想把各平台的页面文件更彻底的分开,也可以在uni-app项目根目录创建`platforms`目录,然后在下面进一步创建`app-plus`等子目录,存放不同平台的文件。
**注意**
......@@ -179,5 +217,5 @@ HBuilderX 为 ``uni-app`` 的条件编译提供了丰富的支持:
### 注意
* Android 和 iOS 平台不支持通过条件编译来区分,如果需要区分 Android、iOS 平台,请通过调用 uni.getSystemInfo 来获取平台信息。支持`ifios``ifAndroid`代码块,可方便编写判断。
* 有些跨端工具可以提供js的条件编译或多态,但这对于实际开发远远不够。uni-app不止是处理js,任何代码都可以多端条件编译,才能真正解决实际项目的跨端问题。另外所谓多态在实际开发中会造成大量冗余代码,很不利于复用和维护。举例,微信小程序主题色是绿色,而百度支付宝小程序是蓝色,你的应用想分平台适配颜色,只有条件编译是代码量最低、最容易维护的。
* 有些跨端工具可以提供js的条件编译或多态,但这对于实际开发远远不够。uni-app不止是处理js,任何代码都可以多端条件编译,才能真正解决实际项目的跨端问题。另外所谓多态在实际开发中会造成大量冗余代码,很不利于复用和维护。
* 有些公司的产品运营总是给不同平台提不同需求,但这不是拒绝uni-app的理由。关键在于项目里,复用的代码多还是个性的代码多,正常都是复用的代码多,所以仍然应该多端。而个性的代码放到不同平台的目录下,差异化维护。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册