H5 开发注意
H5发布到服务器注意:
配置发布后的路径(在网站的根目录中发布是可选的),例如发布网站的路径为www.xxx Com/html5,在manifest中编辑json文件中的h5节点,并将base属性添加到路由器下的html5
单击菜单发布->H5
对于在当前项目下的unpackage/dist/build/h5目录中找到的资源,请部署服务器(或使用本地服务器预览)。如果需要部署到相对路径(支持打开本地文件协议),请参阅:https://ask.dcloud.net.cn/article/37432 。
如何引用第三方js:
通过npm引入(只有h5平台可以通过条件编译导入相应的库)
编辑清单中h5节点的模板属性。json文件,填写html模板的路径,并使用脚本在html模板中引入第三方js。以下示例是包含百度统计信息的html模板代码的一部分,
<body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?xxxxxx";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script>
</body>
APP和applet的导航栏
APP和applet的导航栏和选项卡栏是原生控件,元素区域的坐标不包括原生导航栏和标签栏;
在H5中,导航栏和选项卡栏由div模拟,因此元素坐标将包含导航栏和标签栏的高度。
为了优雅地解决多终端高度定位的问题,uni-app添加了两个css变量:–window top和–window bottom,它们表示页面内容区域与顶部和底部之间的距离。例如,如果要将菜单悬停在本机选项卡上方,请在前面写bottom:0。
此写入方法编译为h5后,此菜单将与选项卡重叠,并位于屏幕底部。如果改用bottom:var(–window-bottom),则无论是在app还是h5下,菜单都将浮动在选项卡上。这避免了编写条件编译代码。当然,您仍然可以使用H5条件编译来处理不同的接口。
在CSS中使用vh单位时,请注意100vh包括导航栏。使用时,需要减去导航栏和tabBar的高度。某些浏览器还包含浏览器操作栏的高度。使用时请注意。
它通常支持rpx,这是一个真正的物理像素。暂时不支持设置清单Json的“transformPx”:true,使用px作为动态单位。
使用指南针、地理位置、加速度计和其他相关接口需要使用https协议,本地预览(localhost)可以使用http协议。
测试PC端Chrome浏览器模拟器设备时,需要连接到Google服务器以获取位置API。
组件中不支持onLoad和onShow等页面生命周期(页面除外)。
API Promise 化
特定API承诺策略:
对于异步方法,如果没有传入诸如成功、失败和完成等回调参数,则数据将作为Promise返回。例如:uni。获取图像信息()
具有返回对象的异步方法。如果要获取返回对象,必须至少传入一个回调参数,例如success、failure和complete。例如:
// 正常使用const task = uni.connectSocket(success(res){console.log(res)})// Promise 化uni.connectSocket().then(res => {// 此处即为正常使用时 success 回调的 res// uni.connectSocket() 正常使用时是会返回 task 对象的,如果想获取 task ,则不要使用 Promise 化console.log(res)})
无承诺API:
同步方法(即以同步结束)。例如:uni.getSystemInfoSync()
方法以create开头。例如:uni.createMapContext()
以manager结尾的方法。例如:uni.getBackgroundAudioManager()
Vue 2和Vue 3的API承诺
Vue 2和Vue 3项目中API Promise的返回格式不一致。以下是返回格式之间的差异和转换
差别
Vue2承诺封装一些API。返回数据的第一个参数是错误对象,第二个参数是返回数据。此时,无法使用catch获取错误消息,因为错误是在内部拦截的。
Vue3承诺封装一些API。如果调用成功,它将进入then方法回调。如果调用失败,它将进入catch方法回调
// 默认方式
uni.request({url: "https://www.example.com/request",success: (res) => {console.log(res.data);},fail: (err) => {console.error(err);},
});// Promise
uni.request({url: "https://www.example.com/request",}).then((data) => {// data为一个数组// 数组第一项为错误信息 即为 fail 回调// 第二项为返回数据var [err, res] = data;console.log(res.data);});// Await
async function request() {var [err, res] = await uni.request({url: "https://www.example.com/request",});console.log(res.data);
}
工程化
uni-app支持相对完整的工程支持,主要包括:
版本管理控制:例如git/svn
Cli脚手架
运营环境管理
自动化测试
持续集成
标准js和浏览器js之间的差异
uni应用程序的js代码的web端在浏览器中运行。在非web端(包括小程序和应用程序),Android平台运行在v8引擎中,iOS平台运行在iOS附带的jscore引擎中,而不是在浏览器或web视图中。
非web端不支持窗口、文档、导航器和其他浏览器的js API,但也支持标准的ECMAScript。
注意不要将浏览器中的js等同于标准js。
因此,uni-app的web端还支持标准js、if、for和其他语法、字符串、数字、时间、布尔值、数组、用户定义的对象和其他变量类型以及各种处理方法。仅浏览器特定的对象(如窗口、文档和导航器)不受支持。