uni-app 实战之单击菜单发布 -＞H5 的 Promise 化在工程项目的实战演练项目心得

作者：黎燃

2022-11-19
内蒙古
本文字数：2259 字
阅读完需：约 7 分钟

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);  },});
// Promiseuni  .request({    url: "https://www.example.com/request",  })  .then((data) => {    // data为一个数组    // 数组第一项为错误信息 即为 fail 回调    // 第二项为返回数据    var [err, res] = data;    console.log(res.data);  });
// Awaitasync function request() {  var [err, res] = await uni.request({    url: "https://www.example.com/request",  });  console.log(res.data);}

复制代码

工程化

uni-app 支持相对完整的工程支持，主要包括：版本管理控制：例如 git/svnCli 脚手架运营环境管理自动化测试持续集成

标准 js 和浏览器 js 之间的差异

uni 应用程序的 js 代码的 web 端在浏览器中运行。在非 web 端（包括小程序和应用程序），Android 平台运行在 v8 引擎中，iOS 平台运行在 iOS 附带的 jscore 引擎中，而不是在浏览器或 web 视图中。非 web 端不支持窗口、文档、导航器和其他浏览器的 js API，但也支持标准的 ECMAScript。注意不要将浏览器中的 js 等同于标准 js。因此，uni-app 的 web 端还支持标准 js、if、for 和其他语法、字符串、数字、时间、布尔值、数组、用户定义的对象和其他变量类型以及各种处理方法。仅浏览器特定的对象（如窗口、文档和导航器）不受支持。

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/7fc3c85974d8ea017b7721ccd】。文章转载请联系作者。

黎燃

关注

前端工程师 2022-05-06 加入

专注学习分享前端知识。

发布

暂无评论

创作场景

uni-app 实战之单击菜单发布 -＞H5 的 Promise 化在工程项目的实战演练项目心得

H5 开发注意

单击菜单发布->H5

如何引用第三方 js：

APP 和 applet 的导航栏

API Promise 化

Vue 2 和 Vue 3 的 API 承诺

工程化

标准 js 和浏览器 js 之间的差异

黎燃

评论