基本概念

• 商品笔记：在图片/视频左下方带有商品样式的方形图片、点击后会打开商品详情页半层的笔记被称作商品笔记。商品笔记是商家在小红书上售卖商品的最重要的功能之一（见下方示意图）

在上图点击左下角卡片后，会打开商品详情页半层。在小程序店铺的情形下，也会在半层上展示小程序店铺的商品详情页

半层适配所需事项

• 在半层状态下打开小程序时，用户打开的首个页面小红书框架会强制使用原生导航栏，因此开发者需配置导航栏标题，并且避免顶部功能受到影响；用户有任何点击动作打开非首个页面后，半层将自动伸展到顶部（时间栏下方），此时开发者可以自行判断使用原生导航栏或者自定义导航栏。对于小程序内再次出现半层的情况，需要对半层遮罩颜色进行处理

开发调试细节

• 小红书原生设计稿示意图如下

• 开发实现逻辑介绍
  • 开发者代码中如何判定是否是半层容器？ *
    js

    复制代码

    // index.js
    xhs.getSystemInfoSync().displayMode
    // index.xhsml
    <half-header xhs:if={{ displayMode !== 'half' }}></half-header>
    

    • 代码如上
      • displayMode 等于 half，表示是半层容器；
      • displayMode 等于 full，表示全屏容器。
    • 注意：老版本下，仅有全屏容器，没有 displayMode 字段，需要进行兼容
  • 半层模式下，除了首个页面强制使用原生导航栏，其他的导航栏配置（包括首个页面的 title 配置） 与 全局配置/页面配置 逻辑一致
  • 开发者如何生成半层二维码进行开发调试？
    • 打开 IDE 「自定义编译条件」→ 切换「小程序模式」至 「商品笔记半层」。如下图所示：
      • 
    • 注意：只能通过预览进行半层容器开发。