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

CodeJourney
71 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情

H5 开发注意

H5发布到服务器注意： 配置发布后的路径（在网站的根目录中发布是可选的），例如发布网站的路径为www.xxx Com/html5，在manifest中编辑json文件中的h5节点，并将base属性添加到路由器下的html5 在这里插入图片描述

单击菜单发布->H5

对于在当前项目下的unpackage/dist/build/h5目录中找到的资源，请部署服务器（或使用本地服务器预览）。如果需要部署到相对路径（支持打开本地文件协议），请参阅：ask.dcloud.net.cn/article/374… 。

如何引用第三方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和其他语法、字符串、数字、时间、布尔值、数组、用户定义的对象和其他变量类型以及各种处理方法。仅浏览器特定的对象（如窗口、文档和导航器）不受支持。

avatar
文章
阅读
粉丝