9.4 KiB

Em bruto Ligação permanente Responsabilidade Histórico

力软框架移动端 · 运行平台差异介绍文档

力软框架移动端支持运行到6个平台，包括 H5、安卓 App、iOS App、微信小程序、支付宝小程序、钉钉小程序。
这些平台各自存在不同的 API 差异、组件差异、页面渲染差异，甚至存在不同的 bug，需要开发者特别注意。

平台差异简介

App 平台：

需要云打包，提交应用商店上架审核（安卓 App 可以直接发布 .apk 让使用者安装）；
更新版本需要用户重新安装，也可以用 uni-app 提供的 wgt 热更新；
可以使用 uni-app 插件市场的原生组件，实现例如文件选择、文档预览、直播推流等功能；
App 平台功能强大，支持本地文件操作，定位/联系人/蓝牙/扫码/推送等功能均可使用，与手机系统的交互能力最强。

H5 平台：

手机网页版，发布到服务器，用户用手机访问网站即可使用；
发布新版，只需要更新服务器上的网站即可；
更新发布最简单，性能优秀，几乎无兼容性问题，还可以使用浏览器独有的 WebAPI 操作 DOM 和 BOM；
受浏览器上的功能限制，例如受浏览器跨域请求限制、无法扫码、无法使用蓝牙连接等。

小程序平台：

需到小程序平台申请 AppID，调试需要使用小程序专用工具，发布需审核；
用户端自动推送新版本，更新较方便；
可以通讯的域名需要提前配置，小程序中打开网页使用的是平台内置的浏览器；
可以深度结合平台自身的功能，例如微信支付、微信卡券、微信运动、支付宝支付、支付宝人脸识别、小程序账号登录等；
小程序平台还可以预览 pdf、docx 等文档（钉钉小程序不支持）；
小程序支持消息分享，分享给自己的联系人，联系人点击进入可以直接跳转到指定页面；
微信小程序功能最强，堪比 App 平台，支付宝小程序较差（缺少很多组件和 API），钉钉小程序最差（缺少大量组件和 API，部分功能完全不支持）。

条件编译

不同平台存在差异，代码无法直接通用。例如：H5 平台不能扫码，其他平台可以；H5 平台涉及到跨域通讯限制，其他平台无此问题等。
uni-app 允许使用条件编译来为每一种平台单独编写一部分代码：uni-app 条件编译官方文档。

**注意：**钉钉小程序的条件编译是 MP-DINGTALK，文档里没有写；
**注意：**如果写成 MP-ALIPAY，那么这一块的代码支付宝小程序、钉钉小程序都会编译进去；
只编译到支付宝小程序而不想编译到钉钉小程序，则需要写成嵌套形式。

// #ifdef MP-ALIPAY 
// 【注意】这里面的代码，支付宝小程序和钉钉小程序都会编译进来
// #endif

// #ifdef MP-DINGTALK 
// 这里面的代码，只有钉钉小程序会编译进来
dd.httpRequest()
// #endif

// #ifdef MP-ALIPAY 
// #ifndef MP-DINGTALK 
// 这里面的代码，只有支付宝小程序会编译进来
my.request()
// #endif
// #endif

// #ifdef MP-WEIXIN
// 这里面的代码，只有微信小程序会编译进来
wx.getWeRunData()
// #endif

// #ifdef MP
// 这里面的代码只会编译到所有小程序平台
uni.scanCode()
// #endif

// #ifdef H5
// 这里面的代码只会编译到 H5 平台
window.document.getElementById()
// #endif

// #ifdef APP-VUE
// 这里面的代码只会编译到 App 平台
uni.preloadPage()
plus.io.requestFileSystem()
// #endif

二次开发须知

通用注意点：

【通用】<canvas> 组件在不同端的 API 不同，因此需要使用条件编译来进行处理（可以参考 /pages/nworkflow/myflow/sign.vue 中的做法）；
【通用】文件上传，H5、小程序一般只能上传图片和视频，App 虽然能上传其他文件，但是 uni-app 原生不支持，需要安装第三方插件，且 iOS 和安卓需要的插件不一样；文化下载，小程序一般看
【通用】Vue 生命周期和常规网页不同，存在「页面生命周期」、「应用生命周期」两个概念，请阅读uni-app 生命周期文档了解。

微信小程序的注意点：

【微信小程序】中，部分标签属于原生组件，例如 <textarea> 、<map>，任何页面内容都无法覆盖原生组件（除了 <cover-view>，但是限制太多），因此在使用诸如 <textarea> 的原生组件时，需要特别处理覆盖显示问题；
【微信小程序】中使用组件时，组件在页面中的元素节点外侧会被包裹一层元素，例如某个组件名为 my-component，那么运行时组件外面会包裹一层 <my-component> 的节点；因此在编写涉及到组件的样式时，请慎用 > 这个父子级 CSS 选择器，慎用父子级百分比定位，慎用 flex 布局；
【微信小程序】基于上一条，给组件自身设置样式，可以使用 :host { } 这个选择器，给这个选择器设置的样式适用于组件包裹的标签本身（在上个例子中，如果设置了 :host { } 的样式，这些样式适用到 <my-component> 这个节点上），注意这个选择器在标记了 scoped 的样式块中无效；

阿里小程序（阿里=支付宝+钉钉）的注意点：

【阿里小程序】组件化方式有较大区别：在阿里小程序中，组件在页面中的元素节点会直接替换成组件内的节点，这个行为和常规 Vue 的 Web 开发相同；但是使用组件时给组件绑定的 class、style 均会丢失，因此组件需要接受 className（注意不是 class，否则会报错）、style 两个属性，并绑定到组件的根节点的 class、style 属性上，这样才能让组件显示正常；注意此种方式会导致 H5 平台报错，因此需要使用条件编译加以区分；力软框架为所有组件额外开发了一套阿里系专用版本，编译成阿里系小程序时会自动使用，尽可能减少以上问题的出现；
【阿里小程序】组件插槽需要特殊处理：在阿里小程序中，组件的默认插槽如果有默认内容，那么使用组件时将只会显示插槽里的默认内容，因此需要进行特殊判断，推荐使用 v-if="$slots.$default" 来判断（其他平台默认插槽位于 $slots.default，阿里系小程序多了一个 $ 符号）；具名插槽无此问题；
【阿里小程序】中，因为不存在全局 global 或 globalThis，会导致直接引入 lodash 报错，使用 lodash 时请使用部分引入；力软框架在使用 lodash 的代码文件中均做了部分引入处理（常规方式 import _ from 'lodash' 在阿里小程序中报错，需要把 lodash 中用到每一种方法分别写成 import get from 'lodash/get' 这种形式）；
【阿里小程序】不存在 page { } 这个选择器；可以为页面根节点 <view> 赋予一个 class 或者 id，然后使用对应的选择器来设置页面样式；
【阿里小程序】页面高度如果不是整个屏幕的高度，请附加 height: 100%; position: absolute; 这两条样式；
【阿里系程序】样式不支持属性选择器，因此在处理例如 checkbox 选中态等情况下需要额外处理；
【阿里小程序】CSS 变量 env(safe-area-inset-bottom) 在阿里系小程序中获取不到，请使用条件编译额外判断；
【钉钉小程序】中，使用 this.RELAUNCH_TO 或 uni.reLaunch 来跳转页面会导致重新加载整个小程序，SET_GLOBAL 中的数据等都将被清空；因此开发钉钉小程序时需要特别注意处理调用 this.RELAUNCH_TO 或 uni.reLaunch 的情形；
【钉钉小程序】中在组件中再使用子组件，有可能绑定事件会报错（尤其是绑定到内部子组件的根节点上的事件）；
【钉钉小程序】中在组件中再使用子组件，如果绑定 ref，那么 this.$refs 会获取不到子组件，请避免使用（本条请真机调试测试，模拟器上运行正常）。

App 平台的注意点：

【App】还可以使用 Plus API，这些 API 一般以 plus.* 开头，涵盖了文件操作、推送、设备硬件操作等紧密结合手机系统的 API，也是 uni-app 公司开发的；注意小程序平台、H5 平台调用均会报错，因此如果开发多端 App，这一块的代码请使用条件编译；
【App】中，部分标签属于原生组件，例如 <map>，任何页面内容都无法覆盖原生组件（除了 <cover-view>，但是限制太多），因此在使用诸如 <map> 的原生组件时，需要特别处理覆盖显示问题。

H5 平台的注意点：

【H5】中，存在 HTTP 跨域限制，跨域通讯时返回的响应需要带有 Access-Control-* 相关的响应头；
【H5】中，如果使用了导航栏和底边栏，uni-app 会在页面顶部和底部用 <div> 模拟标题栏和底边栏，这时使用 top 、bottom 属性获取的相对窗口的定位是不准确的，需要分别替换成 var(--window-top) 和 var(--window-bottom)；例如某个元素如果需要距离窗口顶部10像素，应该写成 top: calc(10px + var(--window-top))；
【H5】中，组件在页面中的元素节点外侧会被包裹一层 <uni-view> 的元素，请慎用 > 这个父子级 CSS 选择器。

9.4 KiB Em bruto Ligação permanente Responsabilidade Histórico

力软框架移动端 · 运行平台差异介绍文档

平台差异简介

条件编译

二次开发须知

9.4 KiB

Em bruto Ligação permanente Responsabilidade Histórico