uni-app-条件注释

骑猪看日出 發表於 2020-8-27 16:23:00

官方文档
 
<pre data-lang="html"><code class="lang-html code">
平台特有的组件
</code></pre>
示例，如下公众号关注组件仅会在微信小程序中出现：
<pre data-lang="html"><code class="lang-html"><view>
<view>微信公众号关注组件</view>
<view>
 
 
 <official-account></official-account>
 
</view>
</view></code></pre>
<h3 id="样式的条件编译">样式的条件编译</h3>
<pre data-lang="css"><code class="lang-css code">/*#ifdef%PLATFORM% */
平台特有样式
/*#endif*/</code></pre>
注意： 样式的条件编译，无论是 css 还是 sass/scss/less/stylus 等预编译语言中，必须使用 <code>/*注释*/</code> 的写法。
正确写法
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/platform-2.png">
错误写法
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/platform-3.png">
<h3 id="pagesjson-的条件编译">pages.json 的条件编译</h3>
下面的页面，只有运行至 App 时才会编译进去。
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/platform-4.png">
不同平台下的特有功能，以及小程序平台的分包，都可以通过 pages.json 的条件编译来更好地实现。这样，就不会在其它平台产生多余的资源，进而减小包体积。
json的条件编译，如不同平台的key名称相同，cli项目下开发者自己安装的校验器会报错，需自行关闭这些校验器对json相同key的校验规则。如果使用HBuilderX的校验器，无需在意此问题，HBuilderX的语法校验器为此优化过。
<h3 id="static-目录的条件编译">static 目录的条件编译</h3>
在不同平台，引用的静态资源可能也存在差异，通过 static 的的条件编译可以解决此问题，static 目录下新建不同平台的专有目录（目录名称同 <code>%PLATFORM%</code> 值域,但字母均为小写），专有目录下的静态资源只有在特定平台才会编译进去。
如以下目录结构，<code>a.png</code> 只有在微信小程序平台才会编译进去，<code>b.png</code> 在所有平台都会被编译。
<pre data-lang=""> <code class="lang-">
┌─static
│├─mp-weixin
││└─a.png
│└─b.png
├─main.js
├─App.vue
├─manifest.json
└─pages.json
</code>
</pre>
<h3 id="整体目录条件编译">整体目录条件编译</h3>
如果想把各平台的页面文件更彻底的分开，也可以在uni-app项目根目录创建<code>platforms</code>目录，然后在下面进一步创建<code>app-plus</code>、<code>mp-weixin</code>等子目录，存放不同平台的文件。
注意
<ul>
<li><code>platforms</code>目录下只支持放置页面文件（即页面vue文件），如果需要对其他资源条件编译建议使用static 目录的条件编译</li>
</ul>
<h3 id="hbuilderx-支持">HBuilderX 支持</h3>
HBuilderX 为 <code>uni-app</code> 的条件编译提供了丰富的支持:
代码块支持
在 HBuilderX 中开发 <code>uni-app</code> 时，通过输入 ifdef 可快速生成条件编译的代码片段
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-022402.png">
语法高亮
在 HBuilderX 中对条件编译的代码注释部分提供了语法高亮，可分辨出写法是否正确，使得代码更加清晰（独立js文件需在编辑器右下角切换javascript es6+编辑器，独立css文件暂不支持高亮，但不高亮不影响使用）
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-012403.png">
正确注释和快速选中
在 HBuilderX 中，ctrl+alt+/ 即可生成正确注释（js：<code>// 注释</code>、css：<code>/* 注释 */</code>、vue/nvue模板： <code></code>）。
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni2019012801.png">
点击 ifdef 或 endif 可快速选中条件编译部分；点击左侧的折叠图标，可折叠条件编译部分代码。
<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/uni-012501.png">
<h3 id="注意">注意</h3>
<ul>
<li>Android 和 iOS 平台不支持通过条件编译来区分，如果需要区分 Android、iOS 平台，请通过调用 uni.getSystemInfo 来获取平台信息。支持<code>ifios</code>、<code>ifAndroid</code>代码块，可方便编写判断。</li>
<li>有些跨端工具可以提供js的条件编译或多态，但这对于实际开发远远不够。uni-app不止是处理js，任何代码都可以多端条件编译，才能真正解决实际项目的跨端问题。另外所谓多态在实际开发中会造成大量冗余代码，很不利于复用和维护。举例，微信小程序主题色是绿色，而百度支付宝小程序是蓝色，你的应用想分平台适配颜色，只有条件编译是代码量最低、最容易维护的。</li>
<li>有些公司的产品运营总是给不同平台提不同需求，但这不是拒绝uni-app的理由。关键在于项目里，复用的代码多还是个性的代码多，正常都是复用的代码多，所以仍然应该多端。而个性的代码放到不同平台的目录下，差异化维护。</li>
</ul>
<div class="cnblogs_code">
<pre><template>
<view>
 <button type="primary" @click="upload">上传图片</button>
 <image v-for="item in img_arr" :src="item" @click="preview(item)"></image>
 
 <view>旨在h5</view>
 
 
 <view>旨在小程序</view>
 
 <button @click="send">显示</button>
</view>
</template>

<script>
export default {
 data() {
 return {
 img_arr: []
 }
 },
 methods: {
 upload() {
 // let this_ = this
 uni.chooseImage({
 success: res => {
 this.img_arr = res.tempFilePaths
 console.log(this.img_arr)
 }
 })
 },
 preview(current){
 uni.previewImage({
 current,
 urls:this.img_arr,
 indicator:'number',
 loop:true,
 success() {
 console.log("成功")
 }
 })
 },
 send(){
 // #ifdef H5
 console.log("h5打印")
 // #endif
 // #ifdef MP-WEIXIN
 console.log("微信小程序")
 // #endif
 }
 }
}
</script>

<style></pre>
 /* #ifdef H5 */ view{ color: red; } /* #endif */ /* #ifdef MP-WEIXIN */ view{ color: blue; } /* #endif */
<pre></style></pre>
</div>
  
来源：https://www.cnblogs.com/fwjlucifinil/p/13572147.html

頁: [1]

琼殿技术论坛's Archiver

uni-app-条件注释