ice.js 小程序开发中使用 HTML 标签的实践指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00243/article/details/148374852

ice.js 小程序开发中使用 HTML 标签的实践指南

ice ICE是阿里巴巴开源的一款企业级中后台搭建工具，提供了丰富的组件库、模板以及可视化拖拽功能，帮助企业快速构建高质量的企业级应用。项目地址: https://gitcode.com/gh_mirrors/ice1/ice

前言

在小程序开发中使用 HTML 标签是 ice.js 提供的一项重要特性，它允许开发者使用熟悉的 HTML 语法来构建小程序界面。本文将详细介绍如何在 ice.js 项目中正确使用 HTML 标签，以及需要注意的各种技术细节和限制。

基础用法

在 ice.js 中，你可以像开发普通网页一样直接使用 HTML 标签：

export default function Home() {
  return (
    <div className="container">
      <h1>欢迎使用 ice.js</h1>
      <p>这是一个使用 HTML 标签的小程序示例</p>
    </div>
  )
}

这种写法会被 ice.js 自动转换为对应的小程序组件，大大降低了学习小程序特有语法的成本。

样式处理

浏览器默认样式

ice.js 提供了两种内置的浏览器默认样式方案：

HTML4 默认样式：
- 仅包含 HTML4 标签的默认样式
- 体积小，兼容性好
- 适合大多数基础项目
HTML5 默认样式：
- 基于 Chrome(Blink) 的 HTML5 默认样式
- 包含更多现代 HTML5 标签样式
- 体积较大，部分小程序容器可能不完全支持

安装样式包后，在全局样式中引入：

npm install @ice/miniapp-html-styles --save

/* 引入 HTML4 默认样式 */
@import '@ice/miniapp-html-styles/html';

/* 或者引入 HTML5 默认样式 */
@import '@ice/miniapp-html-styles/html5';

特殊样式注意事项

span 标签的特殊处理：
- 由于小程序 Text 组件的嵌套限制，ice.js 将 span 映射为 View 组件
- 需要手动添加样式使其表现为行内元素：

/* 自定义 span 样式 */
span {
  display: inline;
}

/* 或者直接引入默认样式 */
@import '@ice/miniapp-html-styles/html';

CSS 选择器限制：
- 不支持通配符 *
- 不支持媒体查询
- 仅支持小程序组件内置属性的属性选择器
rem 单位：
- 目前不支持 rem 单位布局

组件差异与限制

表单组件

表单组件在 HTML 和小程序之间存在较大差异：

复选框和单选框：

{/* 需要手动补充 group 组件 */}
<checkbox-group>
  <input type="checkbox" id="option1" />
  <label htmlFor="option1">选项1</label>
</checkbox-group>

选择器：
- 不支持 HTML 的 <select> 和 <option>
- 必须直接使用小程序的 <Picker> 组件

元素尺寸获取

在小程序中获取元素尺寸是异步操作：

// 正确用法 - 异步获取
const el = document.getElementById('myElement');
const rect = await el.getBoundingClientRect();
console.log(rect);

// 错误用法 - 同步获取在小程序中不工作
const rect = el.getBoundingClientRect(); // 不会返回正确结果

特殊元素 API 差异

对于多媒体元素，需要特别注意：

// 视频元素示例
import { createVideoContext } from '@uni/video';

// 获取视频上下文
const videoContext = createVideoContext('myVideo');

// 控制视频播放
videoContext.play();

图片处理

<img> 标签需要特别注意：

{/* 必须显式设置宽高 */}
<img 
  src="/path/to/image.jpg" 
  width="200" 
  height="150" 
  alt="示例图片"
/>

其他重要限制

ReactDOM 部分 API 不可用：
- 不支持 unstable_renderSubtreeIntoContainer 等 ReactDOM 特有 API
Portal 不支持：
- 无法使用 React 的 Portal 功能
SVG 不支持：
- 目前版本不支持 SVG 相关标签和功能