uni |
您所在的位置：网站首页 › 系统不兼容问题怎么处理 › uni |
uni
|
一、跨端兼容
每个端有每个端的特点，有的能被抹平，有的不可能被抹平。 跨端，不是把web的习惯迁移到全平台。而是按照uni的写法，然后全平台使用。 按照uniapp规范开发可以保证多平台兼容，但每个平台有自己的一些特性。 uni-app在跨平台的过程中，不牺牲平台特色，不限制平台的能力使用。 应用开发中，90%的常规开发，比如界面组件、联网等api，uni-app封装为可跨多端的API。 而各个端的特色功能，uni-app引入条件编译。可以优雅的在一个项目里调用不同平台的特色能力。 二、条件编译条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。 支持的文件 .vue/.nvue/.uvue.js/.uts.csspages.json各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug 注意：条件编译是利用注释实现的，在不同语法里注释写法不一样。 js/uts使用 // 注释 css 使用 /* 注释 */ vue/nvue/uvue 模板里使用
使用条件编译请保证编译前和编译后文件的语法正确性，即要保障无论条件编译是否生效都能通过语法校验。 三、兼容处理 1、API兼容 1.1、选择图片的方法从本地相册选择图片或使用相机拍照。 uni.chooseImage(OBJECT)微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替。
拍摄或从手机相册中选择图片或视频。 uni.chooseMedia(OBJECT)这个方法目前App和H5端都不支持，所以我们要做兼容处理。
小程序端使用方法判断 // #ifdef MP-WEIXIN uni.chooseMedia({ count: 1, mediaType: ['image'], success: (res) => { console.log(res) } }) // #endifH5和APP端使用方法判断 // #ifdef H5 || APP-PLUS uni.chooseImage({ count: 1, success: (res) => { console.log(res) } }); // #endif 1.2、微信登录 // #ifdef MP-WEIXIN wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId } }) // #endif 1.3、微信支付 // #ifdef MP-WEIXIN wx.requestPayment({ timeStamp: '', nonceStr: '', package: '', signType: 'MD5', paySign: '', success(res) {}, fail(res) {} }) // #endif 2、样式兼容 2.1、小程序端不支持*选择器不可以使用 * { color: #333; }可以使用这样的写法 view, text { color: #333; } 2.2、页面视口差异（tabBar页，普通页）小程序和APP底部的tabBar是不包含在页面高度里的，而H5端tabBar是包含的页面高度里面的。 2.2.1、定位时的兼容不可以使用 .xxx{ position:fixed; bottom:0; }可以使用这样的写法 .xxx{ position:fixed; bottom:var(--window-bottom); }
不可以使用 page{ height:100vh; }可以使用这样的写法 page{ height:100%; } 2.3、H5端默认开启scopedH5端是单页面应用，为了隔离页面间的样式默认启用了 scoped。 非H5端默认并未启用 scoped，如需要隔离组件样式可以在 style 标签增加 scoped 属性。 H5端默认启用了 scoped样式隔离，导致组件样式无效。 可以把组件样式抽离，组件中和页面中分别引入。 组件中引入样式 // 此处引入组件样式 @import '@/components/styles/common.scss'页面中引入样式 /* #ifdef H5 || APP_PLUS */ @import '@/components/styles/common.scss'; /* #endif */ 3、组件兼容
需要处理只在小程序端生效 客服 3.2、button按钮的获取手机号需要处理只在小程序端生效 获取手机号 四、判断平台平台判断有 2 种场景，一种是在编译期判断，一种是在运行期判断。 编译期判断 编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码。 // #ifdef H5 alert('只有h5平台才有alert方法'); // #endif如上代码只会编译到 H5 的发行包里，其他平台的包不会包含如上代码。 运行期判断 运行期判断是指代码已经打入包中，仍然需要在运行期判断平台。 switch (uni.getSystemInfoSync().platform) { case 'android': console.log('运行Android上'); break; case 'ios': console.log('运行iOS上'); break; default: console.log('运行在开发者工具上'); break; }如有必要，也可以在条件编译里自己定义一个变量，赋不同值。在后续运行代码中动态判断环境。 |
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |