其实谈到uni-app这个多端框架，大家其实多多少少都了解过，他就是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 那么，这里面其实有一个非常重要的核心点就是条件编译，那么它有什么作用呢？
来，接下来我们看一下这个效果：
在我们的uni-app中，经常会遇到异步请求接口获取数据的业务。那在uni-app中，它提供了uni.request方法从而实现异步请求获取数据，那我们就会想到可以在页面的生命周期onLoad中获取数据了：
onLoad(){
uni.request({
url:"http://47.96.0.211:9000/db/in_theaters",
success(res){
console.log(res)
}
})
},然后我们点击hbuilderx的运行到小程序端查看，发现已经在控制台上面打印出请求到的接口数据了。
当然，不仅于此，因为uni-app可以多端运行，我们也会去尝试点击运行到浏览器Chrome中查看结果，但是不好意思，发现浏览器端已经报错了，报错显示的原因是由于前端浏览器的同源策略导致跨域问题的产生。
那么现在这个问题如何解决呢？那基于uni-app的条件编译他的魅力就体现出来了，还不好好学一下嘛 ^_^
条件编译
> 条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
**写法：**以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
- #ifdef：if defined 仅在某平台存在
- #ifndef：if not defined 除了某平台均存在
- %PLATFORM%：平台名称
另外一点，我们写的时候注意：
- 条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用
// 注释、css 使用/* 注释 */、vue/nvue 模板里使用<!-- 注释 -->；
好Ok，那我们立马在代码里面使用一下条件编译把：
onLoad(){
//#ifdef MP-WEIXIN
uni.request({
url:"http://47.96.0.211:9000/db/in_theaters",
success(res){
console.log(res)
}
})
//#endif
},上述代码因为是写在js中，所以通过//这种方式进行相关的语法注释，意味着只有在小程序端才会进行异步请求。
那么在Chrome浏览器中，也想进行异步操作，如何实现呢？
onLoad(){
//#ifdef H5
uni.request({
url:"/api/db/in_theaters",
success(res){
console.log(res)
}
})
//#endif
//#ifdef MP-WEIXIN
uni.request({
url:"http://47.96.0.211:9000/db/in_theaters",
success(res){
console.log(res)
}
})
//#endif
},这样写完之后，对于H5的我们在前端解决跨域问题的话，还得需要通过正向代理去配置才可以。接下来需要找到uni-app项目里面的manifest.json配置文件，对于H5的proxy这一项进行如下的配置：
配置成功后，我们重新启动运行在Chrome的服务，刷新浏览器，发现我们的数据也可以获取到了。那到此为止，我们就用到了uni-app的条件编译实现了此业务的多端应用。
条件编译分类
> 那我们刚刚用到的是条件编译中的API的条件编译，除此之外，他还有组件、样式、pages.json的条件编译等 >
那接下来我们再来看一下组件内的条件编译吧：
当创建好项目同时勾选uni-ui这个官方组件库的时候，我们就可以在项目里面去使用该组件库了。例如我们在页面中使用uni-ui的日历组件：
<view>
<uni-calendar
:insert="true"
:lunar="true"
:start-date="'2019-3-2'"
:end-date="'2019-5-20'"
/>
</view>这样的话这个日历组件将会在所有平台出现，如果只是希望在小程序平台出现的话，我们就可以添加条件编译去实现了：
<!--#ifdef MP-WEIXIN-->
<view>
<uni-calendar
:insert="true"
:lunar="true"
:start-date="'2019-3-2'"
:end-date="'2019-5-20'"
/>
</view>
<!--#endif-->同样，如果对于某些平台采用的某些样式，我们也可以运用样式的编译：
<text class='color'>hello-world</text>
<style>
/* #ifdef H5 */
.color{
color:red;
}
/* #endif */
/* #ifdef MP-WEIXIN */
.color{
color:blue;
}
/* #endif */
</style>这样的话这个字体颜色在H5平台将会显示红色，在微信小程序中将会显示蓝色哦！
那么到这一步，恭喜哦！ 你已经学会了如何在uni-app中应用条件编译喽!
以上，如有纰漏或不同观点，欢迎留言讨论...
- 相关评论
- 我要评论
-