公司做网站费用会计分录,东莞网站平台后缀,网店培训机构,sem竞价推广托管代运营公司Uniapp运行环境判断和解决跨端兼容性
开发环境和生产环境
uniapp可通过process.env.NODE_ENV判断当前环境是开发环境还是生产环境#xff0c;一般用于链接测试服务器或者生产服务器的动态切换。在HX中#xff0c;点击运行编译出来的代码是开发环境#xff0c;点击发行编译…Uniapp运行环境判断和解决跨端兼容性
开发环境和生产环境
uniapp可通过process.env.NODE_ENV判断当前环境是开发环境还是生产环境一般用于链接测试服务器或者生产服务器的动态切换。在HX中点击运行编译出来的代码是开发环境点击发行编译出来的代码是生产环境。
if(process.env.NODE_ENV development){console.log(开发环境)
}else{console.log(生产环境)
}跨端兼容
uniapp已将常用的组件js api封装到框架中开发者按照uniapp规范开发即可保证多平台兼容大部分业务均可直接瞒住但每个平台有自己的特征因此会存在一些无法跨平台情况大量写if else会造成代码执行性能低下和管理混乱编译到不同的工程后二次修改会让后续升级变得非常麻烦在C中通过#ifdef#ifndef的方式为windows,mac,等不同的OS编译不同的代码uniapp也参考了这个思路为uniapp提供了条件编译手段在一个工程项目里优雅的完成了平台个性化实现。
条件编译解决跨端兼容性
uni-app平台有两种场景一种是在编译期条件编译判断一种是在运行期判断。
条件编译语法
条件编译使用特殊的注释作为标记在编译时根据这些特殊的注释将注释里面的代码编译到不同的平台。写法以#ifdef或#ifndef加%PLATFORM开头以#endif结尾。 #ifdefif defined仅在某平台存在。#ifndefif not defined除了某平台均存在。%PLATFORM平台名称。 %PLATFORM取值表
值平台APP-PLUSApp APP-PLUS-NVUE或APPNVUEApp nvueH5H5MP-WEIXIN微信小程序MP-ALIPAY支付宝小程序MP-BAIDU百度小程序MP-TOUTIAO字节跳动小程序MP-QQQQ小程序MP-360360小程序MP微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序QUICKAPP-WEBVIEW快应用通用(包含联盟、华为)QUICKAPP-WEBVIEWUNION快应用联盟QUICKAPP-WEBVIEWHUAWEI快应用华为
实列说明 #ifdef APP-PLUS#endif需条件编译的代码仅出现在App平台下的代码。#ifndef H5#endif需条件编译的代码除了 H5平台其它平台均存在的代码。#ifdef H5 || MPWEIXIN#endif需条件编译的代码在 H5 平台或微信小程序平台存在的代码这里只有||不可能出现因为没有交集。 支持的文件.nvue.vue.js.csspages.json。 **各预编译语言文件**如.scss.less.stylus.ts.pug。 注意 条件编译是利用注释实现的在不同语法里注释写法不一样js使用//注释 、css 使用/* 注释 */、vue/nvue 模板里使用 !-- 注释 --条件编译 APP-PLUS 包含 APP-NVUE 和 APP-VUEAPP-PLUS-NVUE和APP-NVUE没什么区别为了简写后面出了APP-NVUE
组件模板的条件编译 !-- #ifdef %PLATFORM% --平台特有的组件!-- #endif --示例
templateview!-- #ifdef APP-PLUS --viewAPP中显示/view!-- #endif --!-- #ifndef APP-PLUS --view不在APP中显示/view!-- #endif --!-- #ifdef MP-WEIXIN || H5 --!-- 还支持多平台同时编译使用 || 来分隔平台名称 --view在微信小程序或H5端显示_点击下载APP/view!-- #endif --/view
/template结果
APIjs的条件编译 // #ifdef %PLATFORM%平台特有的API实现// #endif示例
templateview/view
/template
script
export default {data() {return {// #ifdef APP-PLUStitle: 我是APP端,// #endif}},onLoad() {this.test1()},methods: {test1() {// #ifdef H5console.log(兼容H5平台)// #endif// #ifdef MP-WEIXINconsole.log(兼容微信小程序平台)// #endif}}
}
/script
style/style
效果
样式 style的条件编译 /* #ifdef %PLATFORM% */平台特有样式/* #endif */注意 样式的条件编译无论是 css 还是 sass/scss/less/stylus 等预编译语言中必须使用 /*注释*/ 的写法。 示例
templateviewview classtest/view/view
/templatescript
export default {data() {return {// #ifdef APP-PLUStitle: 我是APP端,// #endif}},onLoad() {this.test1()},methods: {test1() {// #ifdef H5console.log(兼容H5平台)// #endif// #ifdef MP-WEIXINconsole.log(兼容微信小程序平台)// #endif}}
}
/script
style langscss.test {width: 100px;height: 100px;/* #ifdef MP */background: red;/* #endif *//* #ifdef MP-WEIXIN */background: yellow;/* #endif *//* #ifdef H5 */background: green;/* #endif */}
/stylepages.json 的条件编译
下面的页面只有运行至 App 时才会编译进去。不同平台下的特有功能以及小程序平台的分包都可以通过 pages.json 的条件编译来更好地实现。这样就不会在其它平台产生多余的资源进而减小包体积。 示例
{pages: [{path: pages/index/index,style: {navigationBarTitleText: uni-app}}// #ifdef APP-PLUS, {path: pages/wenda/wenda,style: {navigationBarTitleText: 问答}}// #endif],globalStyle: {navigationBarTextStyle: black,navigationBarTitleText: uni-app,navigationBarBackgroundColor: #F8F8F8,backgroundColor: #F8F8F8},uniIdRouter: {}
}注意 在 #ifdef APP-PLUS 和 #endif 预编译指令之间如果只有一个配置项那么这个配置项后面不应该有逗号。这是因为预编译指令可能会导致这部分代码被移除从而留下一个多余的逗号造成 JSON 解析错误。
static 目录的条件编译
在不同平台引用的静态资源可能也存在差异通过 static 的的条件编译可以解决此问题static 目录下新建不同平台的专有目录目录名称同 %PLATFORM% 值域,但字母均为小写专有目录下的静态资源只有在特定平台才会编译进去。 如以下目录结构 a.png 只有在微信小程序平台才会编译进去 b.png 在所有平台都会被编译。
┌─static
│ ├─mp-weixin
│ │ └─a.png
│ └─b.png
├─main.js
├─App.vue
├─manifest.json
└─pages.json运行期判断IOS/Android平台
Android 和 iOS 平台不支持通过条件编译来区分如果需要区分Android、iOS 平台请通过调用uni.getSystemInfo 来获取平台信息。 运行期判断: 运行期判断是指代码已经打入包中仍然需要在运行期判断平台此时可使用uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 uni.getSystemInfoSync().platform 返回值均为 devtools。如有必要也可以在条件编译里自己定义一个变量赋不同值。在后续运行代码中动态判断环境。 判断是否为 IOS 平台的APP端
templateview/view
/template
scriptexport default {data() {return {}},onLoad() {switch (uni.getSystemInfoSync().platform) {case android:console.log(运行Android上)break;case ios:console.log(运行iOS上)break;default:console.log(运行在开发者工具上)break;}},methods: {}}
/script
style langscss/style效果 如有必要也可以在条件编译里自己定义一个变量赋不同值。在后续运行代码中动态判断环境。
templateviewview v-ifisIosApp是IOS平台的APP端/viewview v-else不是IOS平台的APP端/view/view
/template
scriptexport default {data() {return {isIosApp: false, // 是否为 IOS平台的APP端}},onLoad() {// #ifdef APP-PLUSthis.isIosApp uni.getSystemInfoSync().platform ios// #endif},}
/script效果 Uniapp运行环境判断和解决跨端兼容性详解完结~
