https://developers.weixin.qq.com/doc/channels/API/leagueheadsupplier/getauth.html [图片]

如题，目前申请了一个小程序，还有撮合类微信服务，想要用小程序对视频号达人进行授权，并将商品添加到达人的橱窗，有没有说明文档该怎么弄，目前的文档太零碎了，有些字段的说明也不是很清晰。谢谢

您好， 我们是视频号的服务商，已对接视频号-我要开店，小程序先试后付的服务商。 现在需要一组接口，就是达人视频号授权接口，一键铺货视频号橱窗接口。 想知道是否已有这些接口，我们想要获取，是否需要什么资质申请？

微信小程序AR [图片] 第一步、AR商品识别 扫一扫产品，扫一扫LOGO，扫一扫海报，扫一扫门店 基于AR图片识别技术，自己上传识别图，自定义识别操作 [图片] 第二步、交互式三维展示 360度产品展示、合拍分享到社交媒体 基于PBR物理渲染引擎，动画，支持手势缩放/拖拉/旋转操作 [图片] 第三步、虚拟试戴、虚拟化妆 逼真试戴体验、引流到在线商城 适合web/小程序的轻量深度神经网络、快速加载，对接微商城/微信小商店 「PLAY2XR眼镜试戴」 [图片] 「PLAY2XR口红试色」 [图片] 「PLAY2XR戒指试戴」 [图片] 扫码体验 [图片]

[图片]

[图片]

前言 在开发小程序的过程中，很多时候会需要使用富文本内容，然而现有的方案都有着或多或少的缺陷，如何更好的显示富文本将是一个值得继续探索的问题。 [图片] 现有方案 WxParse [代码]WxParse[代码] 作为一个应用最为应用最广泛的富文本插件，在很多时候是大家的首选，但其也明显的存在许多问题。 格式不正确时标签会被原样显示 很多人可能都见到过这种情况，当标签里的内容出现格式上的错误（如冒号不匹配等），在[代码]WxParse[代码]中都会被认为是文本内容而原样输出，例如：[代码]<span style="font-family:"宋体"">Hello World!</span> [代码] 这是由于[代码]WxParse[代码]的解析脚本中，是通过正则匹配的方式进行解析，一旦格式不正确，就将导致无法匹配而被直接认为是文本[代码]//WxParse的匹配模式 var startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/, endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/, attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; [代码] 然而，[代码]html[代码] 对于格式的要求并不严格，一些诸如冒号不匹配之类的问题是可以被浏览器接受的，因此需要在解析脚本的层面上提高容错性。 超过限定层数时无法显示 这也是一个让许多人十分苦恼的问题，[代码]WxParse[代码] 通过 [代码]template[代码] 迭代的方式进行显示，当节点的层数大于设定的 [代码]template[代码] 数时就会无法显示，自行增加过多的层数又会大大增加空间大小，因此对于 [代码]wxml[代码] 的渲染方式也需要改进。 对于表格、列表等复杂内容支持性差 [代码]WxParse[代码] 对于 [代码]table[代码]、[代码]ol[代码]、[代码]ul[代码] 等支持性较差，类似于表格单元格合并，有序列表，多层列表等都无法渲染 rich-text [代码]rich-text[代码] 组件作为官方的富文本组件，也是很多人选择的方案，但也存在着一些不足之处 一些常用标签不支持 [代码]rich-text[代码] 支持的标签较少，一些常用的标签（比如 [代码]section[代码]）等都不支持，导致其很难直接用于显示富文本内容 ps：最新的 2.7.1 基础库已经增加支持了许多语义化标签，但还是要考虑低版本兼容问题 不能实现图片和链接的点击 [代码]rich-text[代码] 组件中会屏蔽所有结点事件，这导致无法实现图片点击预览，链接点击效果等操作，较影响体验 不支持音视频 音频和视频作为富文本的重要内容，在 [代码]rich-text[代码] 中却不被支持，这也严重影响了使用体验 共同问题 不支持解析 [代码]style[代码] 标签 现有的方案中都不支持对 [代码]style[代码] 标签中的内容进行解析和匹配，这将导致一些标签样式的不正确 [图片] 方案构建 因此要解决上述问题，就得构建一个新的方案来实现 渲染方式 对于该节点下没有图片、视频、链接等的，直接使用 [代码]rich-text[代码] 显示（可以减少标签数，提高渲染效果），否则则继续进行深入迭代，例如： [图片] 对于迭代的方式，有以下两种方案： 方案一 像 [代码]WxParse[代码] 那样通过 [代码]template[代码] 进行迭代，对于小于 20 层的内容，通过 [代码]template[代码] 迭代的方式进行显示，超过 20 层时，用 [代码]rich-text[代码] 组件兜底，避免无法显示，这也是一开始采用的方案[代码]<!--超过20层直接使用rich-text--> <template name='rich-text-floor20'> <block wx:for='{{nodes}}' wx:key> <rich-text nodes="{{item}}" /> </block> </template> [代码] 方案二 添加一个辅助组件 [代码]trees[代码]，通过组件递归的方式显示，该方式实现了没有层数的限制，且避免了多个重复性的 [代码]template[代码] 占用空间，也是最终采取的方案[代码]<!--继续递归--> <trees wx:else id="node" class="{{item.name}}" style="{{item.attrs.style}}" nodes="{{item.children}}" controls="{{controls}}" /> [代码] 解析脚本 从 [代码]htmlparser2[代码] 包进行改写，其通过状态机的方式取代了正则匹配，有效的解决了容错性问题，且大大提升了解析效率 [代码]//不同状态各通过一个函数进行判断和状态跳转 for (; this._index < this._buffer.length; this._index++) this[this._state](this._buffer[this._index]); [代码] 兼容 [代码]rich-text[代码] 为了解析结果能同时在 [代码]rich-text[代码] 组件上显示，需要对一些 [代码]rich-text[代码]不支持的组件进行转换[代码]//以u标签为例 case 'u': name = 'span'; attrs.style = 'text-decoration:underline;' + attrs.style; break; [代码] 适配渲染需要 在渲染过程中，需要对节点下含有图片、视频、链接等不能由 [代码]rich-text[代码]直接显示的节点继续迭代，否则直接使用 [代码]rich-text[代码] 组件显示；因此需要在解析过程中进行标记，遇到 [代码]img[代码]、[代码]video[代码]、[代码]a[代码] 等标签时，对其所有上级节点设置一个 [代码]continue[代码] 属性用于区分[代码]case 'a': attrs.style = 'color:#366092;display:inline;word-break:break-all;overflow:auto;' + attrs.style; element.continue = true; //冒泡：对上级节点设置continue属性 this._bubbling(); break; [代码] 处理style标签 解析方式 方案一 正则匹配[代码]var classes = style.match(/[^\{\}]+?\{([^\{\}]*?({[\s\S]*?})*)*?\}/g); [代码] 缺陷： 当 [代码]style[代码] 字符串较长时，可能出现栈溢出的问题 对于一些复杂的情况，可能出现匹配失败的问题 方案二 状态机的方式，类似于 [代码]html[代码] 字符串的处理方式，对于 [代码]css[代码] 的规则进行了调整和适配，也是目前采取的方案 匹配方式 方案一 将 [代码]style[代码] 标签解析为一个形如 [代码]{key:content}[代码] 的结构体，对于每个标签，通过访问结构体的相应属性即可知晓是否匹配成功[代码]if (this._style[name]) attrs.style += (';' + this._style[name]); if (this._style['.' + attrs.class]) attrs.style += (';' + this._style['.' + attrs.class]); if (this._style['#' + attrs.id]) attrs.style += (';' + this._style['#' + attrs.id]); [代码] 优点：匹配效率高，适合前端对于时间和空间的要求 缺点：对于多层选择器等复杂情况无法处理 因此在前端组件包中采取的是这种方式进行匹配 方案二 将 [代码]style[代码] 标签解析为一个数组，每个元素是形如 [代码]{key,list,content,index}[代码] 的结构体，主要用于多层选择器的匹配，内置了一个数组 [代码]list[代码] 存储各个层级的选择器，[代码]index[代码] 用于记录当前的层数，匹配成功时，[代码]index++[代码]，匹配成功的标签出栈时，[代码]index--[代码]；通过这样的方式可以匹配多层选择器等更加复杂的情况，但匹配过程比起方案一要复杂的多。 [图片] 遇到的问题 [代码]rich-text[代码] 组件整体的显示问题 在显示过程中，需要把 [代码]rich-text[代码] 作为整体的一部分，在一些情况下会出现问题，例如： [代码]Hello <rich-text nodes="<div style='display:inline-block'>World!</div>"/> [代码] 在这种情况下，虽然对 [代码]rich-text[代码] 中的顶层 [代码]div[代码] 设置了 [代码]display:inline-block[代码]，但没有对 [代码]rich-text[代码] 本身进行设置的情况下，无法实现行内元素的效果，类似的还有 [代码]float[代码]、[代码]width[代码](设置为百分比时)等情况 解决方案 方案一 用一个 [代码]view[代码] 包裹在 [代码]rich-text[代码] 外面，替代最外层的标签[代码]<view style="{{item.attrs.style}}"> <rich-text nodes="{{item.children}}" /> </view> [代码] 缺陷：当该标签为 [代码]table[代码]、[代码]ol[代码] 等功能性标签时，会导致错误 方案二 对 [代码]rich-text[代码] 组件使用最外层标签的样式[代码]<rich-text nodes="{{item}}" style="{{item.attrs.style}}" /> [代码] 缺陷：当该标签的 [代码]style[代码] 中含有 [代码]margin[代码]、[代码]padding[代码] 等内容时会被缩进两次 方案三 通过 [代码]wxs[代码] 脚本将顶层标签的 [代码]display[代码]、[代码]float[代码]、[代码]width[代码] 等样式提取出来放在 [代码]rich-text[代码] 组件的 [代码]style[代码] 中，最终解决了这个问题[代码]var res = ""; var reg = getRegExp("float\s*:\s*[^;]*", "i"); if (reg.test(style)) res += reg.exec(style)[0]; reg = getRegExp("display\s*:\s*([^;]*)", "i"); if (reg.test(style)) { var info = reg.exec(style); res += (';' + info[0]); display = info[1]; } else res += (';display:' + display); reg = getRegExp("[^;\s]*width\s*:\s*[^;]*", "ig"); var width = reg.exec(style); while (width) { res += (';' + width[0]); width = reg.exec(style); } return res; [代码] 图片显示的问题 在 [代码]html[代码] 中，若 [代码]img[代码] 标签没有设置宽高，则会按照原大小显示；设置了宽或高，则按比例进行缩放；同时设置了宽高，则按设置的宽高进行显示；在小程序中，若通过 [代码]image[代码] 组件模拟，需要通过 [代码]bindload[代码] 来获取图片宽高，再进行 [代码]setData[代码]，当图片数量较大时，会大大降低性能；另外，许多图片的宽度会超出屏幕宽度，需要加以限制 解决方案 用 [代码]rich-text[代码] 中的 [代码]img[代码] 替代 [代码]image[代码] 组件，实现更加贴近 [代码]html[代码] 的方式 ；对 [代码]img[代码] 组件设置默认的效果 [代码]max-width:100%;[代码] 视频显示的问题 当一个页面出现过多的视频时，同时进行加载可能导致页面卡死 解决方案 在解析过程中进行计数，若视频数量超过3个，则用一个 [代码]wxss[代码] 绘制的图片替代 [代码]video[代码] 组件，当受到点击时，再切换到 [代码]video[代码] 组件并设置 [代码]autoplay[代码] 以模拟正常效果，实现了一个类似懒加载的功能 [代码]<!--视频--> <view wx:if="{{item.attrs.id>'media3'&&!controls[item.attrs.id].play}}" class="video" data-id="{{item.attrs.id}}" bindtap="_loadVideo"> <view class="triangle_border_right"></view> </view> <video wx:else src='{{controls[item.attrs.id]?item.attrs.source[controls[item.attrs.id].index]:item.attrs.src}}' id="{{item.attrs.id}}" autoplay="{{item.attrs.autoplay||controls[item.attrs.id].play}}" /> [代码] 文本复制的问题 小程序中只有 [代码]text[代码] 组件可以通过设置 [代码]selectable[代码] 属性来实现长按复制，在富文本组件中实现这一功能就存在困难 解决方案 在顶层标签上加上 [代码]user-select:text;-webkit-user-select[代码] [图片] 实现更加丰富的功能 在此基础上，还可以实现更多有用的功能 自动设置页面标题 在浏览器中，会将 [代码]title[代码] 标签中的内容设置到页面标题上，在小程序中也同样可以实现这样的功能[代码]if (res.title) { wx.setNavigationBarTitle({ title: res.title }) } [代码] 多资源加载 由于平台差异，一些媒体文件在不同平台可能兼容性有差异，在浏览器中，可以通过 [代码]source[代码] 标签设置多个源，当一个源加载失败时，用下一个源进行加载和播放，在本插件中同样可以实现这样的功能[代码]errorEvent(e) { //尝试加载其他源 if (!this.data.controls[e.currentTarget.dataset.id] && e.currentTarget.dataset.source.length > 1) { this.data.controls[e.currentTarget.dataset.id] = { play: false, index: 1 } } else if (this.data.controls[e.currentTarget.dataset.id] && e.currentTarget.dataset.source.length > (this.data.controls[e.currentTarget.dataset.id].index + 1)) { this.data.controls[e.currentTarget.dataset.id].index++; } this.setData({ controls: this.data.controls }) this.triggerEvent('error', { target: e.currentTarget, message: e.detail.errMsg }, { bubbles: true, composed: true }); }, [代码] 添加加载提示 可以在组件的插槽中放入加载提示信息或动画，在加载完成后会将 [代码]slot[代码] 的内容渐隐，将富文本内容渐显，提高用户体验，避免在加载过程中一片空白。 最终效果 经过一个多月的改进，目前实现了这个功能丰富，无层数限制，渲染效果好，轻量化（30.0KB），效率高，前后端通用的富文本插件，体验小程序的用户数已经突破1k啦，欢迎使用和体验 [图片] github 地址 npm 地址 总结 以上就是我在开发这样一个富文本插件的过程大致介绍，希望对大家有所帮助；本人在校学生，水平所限，不足之处欢迎提意见啦！ [图片]

引入wxs文件 {{tools.filter(item.description)}} return text.replace(/↵/g, '/n') 使用replace报错说  / 这个不能用，到底应该怎么识别 ↵这个换行

小程序发布了 miniprogram-ci 已经一段时间了。 不建议采用通过命令行来触发上传动作, 通过 miniprogram-ci 更为方便 小程序中的 体验版 和 开发板 开发版: 开发者通过 [代码]微信开发者工具[代码] 上传代码的版本。不同开发者上传后，对应着不同的 [代码]开发版[代码]，[代码]开发版[代码] 不能直接被访问到。通过 微信开发者工具 上的 [代码]预览[代码] 功能，生成二维码预览（二维码有效时间较短 20~30 min）。 体验版: 在 微信公众平台 后台，指定某个 [代码]开发版[代码] 指定为 [代码]体验版[代码]。[代码]体验版[代码] 长期有效，只能指定一个。 所以如果我们可以将 [代码]体验版[代码] 始终指定某一个开发者 的 [代码]开发版[代码] 上，然后每次通过这个开发者上传小程序代码。这样就只需要访问 [代码]体验版[代码] 即可。 小程序自动部署 常用的 CI/CD 有很多，由于小程序上传代码只能通过 [代码]微信开发者工具[代码]。 而 [代码]微信开发者工具[代码] 只能支持 Windows/Mac 而不支持 Linux，所以最后决定采用 GitLab CI。 因为 [代码]GitLab CI[代码] 中的 GitLab Runner 可以执行 GitLab CI 中的任务。我们使用 [代码]GitLab Runner[代码] 在自己电脑上注册个 Runner 来执行上传小程序代码的任务。 GitLab CI 配置流程 下载 GitLab Runner Install，注册一个 Runner 运行 gitlab-runner register 根据命令提示操作 [代码]# 输入 GitLab 服务地址 Please enter the gitlab-ci coordinator URL (e.g. <https://gitlab.com/>): https://gitlab.com # token 在对应项目中的 Setting => CI/CD => Runners 中 如下 图1 Please enter the gitlab-ci token for this runner: hVGe8TvU5KL-ZQqsv48z # 输入描述信息 Please enter the gitlab-ci description for this runner: this is description for the runner # 注意: 这里输入的 tags 会在后面 .gitlab-ci.yml 配置的时候用到。 Please enter the gitlab-ci tags for this runner (comma separated): test # 是否作执行没有指定 tags 的 builds Whether to run untagged builds [true/false]: false # 是将 Runner 锁定至当前项目 Whether to lock the Runner to current project [true/false]: true # 注册成功 Registering runner... succeeded runner=hVGe8TvU # 输入 Runner 执行环境 Please enter the executor: docker, docker-ssh, shell, parallels, ssh, virtualbox, docker+machine, docker-ssh+machine, kubernetes: shell Runner registered successfully. Feel free to start it, but if it's running already the config should be automatically reloaded! [代码] [图片] 这个时候就注册号好了。我们去到项目的 Setting => CI/CD => Runners 下会发这个 Runner [图片] 注意: 此时这个 Runner 前面是个 感叹号，我们运行 [代码]gitlab-runner start [代码] 配置 .gitlab.yml 文件，在项目根目录下创建 .gitlab-ci.yml 文件 [代码]image: node:9 # 制定任务执行时的 docker 镜像 stages: # 定义阶段用于执行任务（定义了 build 和 deploy 两个阶段） - build - deploy build: # 定义 build 任务 stage: build # 该任务属于 build 阶段 script: # 执行下面脚本 - yarn install - yarn build artifacts: # 制定任务成功后保存的文件(可以在 GitLab 上下载) name: $CI_JOB_NAME untracked: false # 是否添加所有 git untracked 的文件 paths: # 需要添加文件的位置 - dist tags: # tags 制定运行在哪个 Runner 上 - gitlab-org deploy: # 定义 deploy 任务 stage: deploy # 该任务属于 deploy 阶段 dependencies: # 该任务依赖 build 阶段的所有任务 - build variables: # 定义变量 VERSION: 1.0.0 DESCRIPTION: 描述内容 CLI: C:\Program Files (x86)\Tencent\微信web开发者工具\cli.bat script: # 执行下面脚本 # 下面是 小程序 上传代码的脚本，以 Windows 为例 # https://developers.weixin.qq.com/miniprogram/dev/devtools/cli.html#4-%E5%91%BD%E4%BB%A4%E8%A1%8C%E4%B8%8A%E4%BC%A0%E4%BB%A3%E7%A0%81 - %CLI% -u %VERSION%@%cd% --upload-desc %DESCRIPTION% tags: # 这里需要在我们刚注册的 Runner 运行，和注册时的 tags 匹配 - test [代码] 注意：小程序上传代码通过开发工具的 命令行调用 GitLab Pipelines 当我们提交将代码 push GitLab 后, 当 GitLab 检测到 [代码].gitlab-ci.yml[代码] 文件后， 会自动触发 Pipeline 任务，如图： [图片] 我们在 GitLab 上看 这个 Pipeline 下的 Jobs 的运行状态 当 [代码]deploy[代码] Job 成功后，就表示我们自动化的上传代码流程成功。 修改开发者工具源代码。 由于在执行cli的时候，错误并不会抛出。(比如开发者工具没有登录，但是 cli 执行 upload 命令的时候错误没有抛出，导致就pipeline 显示成功) 所以我们需要在修改开发者工具目录下的 cli.bat 文件，添加一行内容 [代码]@echo off set CALLING_DIR=%CD% cd /d %~dp0 .\node.exe .\cli.js %* + if %errorlevel% neq 0 exit /b %errorlevel% ... [代码]

小程序代码包总包上限提升至12M为了让开发者开发出功能更丰富的小程序，小程序或小游戏代码包总包上限由8M提升到12M。建议开发者优化小程序性能并将每个分包做得尽可能小，以便提升用户的打开速度，优化用户体验。 开发者可登录开发者工具，在详情-项目配置中点击刷新按钮，获取最新的配置信息。 [图片] 内置扩展库支持扩展库是将官方提供的一系列扩展能力打包而成的一些类库。为方便开发者使用，我们在最新的nightly版开发者工具支持了内置扩展库，开发者只需在app.json配置文件声明引用指定扩展库即可，无需自行引入相关 npm 包且不计入小程序代码包大小，目前支持了kbone和WeUI两种扩展库，更多详情请参考文档。 欢迎各位开发者接入，如有问题，可在本帖下方留言或在社区发帖反馈。 微信团队   2019.11.22

这篇文章主要是解决小程序无限滚动瀑布流页面引起的ios内存不足，自动退出问题 问题回顾：我们有一个列表展示页，是无限瀑布流式的，展示的元素我们封装成了单个组件，暂且叫它[代码]Item组件[代码]。这个瀑布流包含若干个Item组件，并且这个Item组件也比较复杂，包含各种展示样式（根据不同类型，大概有9种吧，反正渲染节点很多），在进行滑动的过程中，item大概加载30-40个以后，就会造成小程序内存不足而退出，蓝瘦香菇… 点击此处查看二期 解决思路： 将超出屏幕一定部分的列表内的组件进行不渲染的处理（也就是用wx:if卸载掉组件），当到达渲染临界点时再开始渲染；保证每次少量的数据展示。 我们的项目中是保持15条Item，我们是每次分页请求5条，按照前5条，中间5条和后5条来划分，如果不在这个范围，则用一个等高度的骨架代替，并且卸载这些组件 实现方式 使用曝光监听，当一个Item曝光时，记录Item高度，并放到数组里面，作为骨架的填充高度，如果已经记录了高度，则不再重复记录；曝光时向外传递一个当前渲染范围的中心值（比如当前Item所属页码，或者当前Item索引），以此进行处理； 这里有一点要注意，如果你的列表item组件比较复杂，需要在ready的时候将记录的高度设置为item最小高度，不然组件重新装载时会有一定的渲染时间，在临界点会造成跳屏【此处已经通过骨架组件解决，可以忽略，只是作为踩坑记录】 此时优化点 为避免频繁setData和渲染，做了防抖函数，时间是600ms 此时缺点 滑动特别快时，会出现白屏，是因为曝光监听是在组件里面，而超快速滚动时，组件没有装载进来，也无法进行曝光监听，所以无法触发，这里考虑用骨架组件进行二次监听曝光 优化迭代 将骨架组件作为外壳套在Item外面（用[代码]slot[代码]），并对骨架进行监听曝光，可以解决上面缺点 给骨架组件做一个常规骨架屏样式，而不是纯白色，看起来更优雅 最后，还是尽量减少节点数，优化代码

小程序直播组件插件使用问题： 用wx.redirectTo跳转到直播页面之后，左上角返回无效，也不会变成返回首页按钮

希望对你有所帮助和启发

[代码]// 获取评论节点信息[代码][代码]queryMultipleNodes: [代码][代码]function[代码][代码]() {[代码][代码]  [代码][代码]var[代码] [代码]query = wx.createSelectorQuery();[代码][代码]  [代码][代码]//选择id[代码][代码]  [代码][代码]query.select([代码][代码]'.comment-list-wrp'[代码][代码]).boundingClientRect()[代码][代码]  [代码][代码]query.exec((res) => {[代码][代码]    [代码][代码]//取高度[代码][代码]    [代码][代码]this[代码][代码].setData({[代码][代码]      [代码][代码]commentTop: res[0].top[代码][代码]    [代码][代码]})[代码][代码]  [代码][代码]})[代码][代码]},[代码]  [代码]        [代码][代码]this[代码][代码].setData({[代码][代码]          [代码][代码]comment: result.items,[代码][代码]          [代码][代码]current_page: result._meta.currentPage,[代码][代码]          [代码][代码]count_page: result._meta.pageCount,[代码][代码]        [代码][代码]}, () => { setTimeout(() => { [代码][代码]this[代码][代码].queryMultipleNodes()},1000)})[代码][图片] 然后偶尔会有这样的问题 是什么问题呢

[图片][图片]

[图片] 非自定义导航栏高度怎么计算？ 自定义导航栏高度由谁决定？ 小程序自定义导航栏开发注意点与参考文档 一、默认导航栏高度怎么计算？（非custom情况下获取） wx.getSystemInfo 和 wx.getSystemInfoSync 获取机器信息 screenHeight - windowHeight   计算标题栏高度 [代码]{[代码][代码]       [代码][代码]'iPhone'[代码][代码]: 64,[代码][代码]       [代码][代码]'iPhone X'[代码][代码]: 88,[代码][代码]       [代码][代码]'android'[代码][代码]: 68[代码][代码] [代码][代码]}[代码]不完全统计（ip6 , ip5 , ip6p , ipx , 小米mix2  , 小米5等综合了开发工具提供的数据和真机数据）所得 二、自定义导航栏高度由谁决定？（自定义情况下，屏幕高度和窗口高度没有差别，所以要通过步骤1先获取数据，预定义到代码中） 开发时发现，自定义导航栏的实现需要 包含状态栏+胶囊 ：没有自定义导航栏的时候页面是全屏幕滚动会出现在状态栏的下一层 根据上一标题中步骤1的函数，可以获得状态栏高度 statusBarHeight demo，点击打开小程序开发工具 三、小程序自定义导航栏开发注意点与参考文档 微信官方设计指导中关于胶囊按钮的描述 由此得知胶囊宽度87pt=116px，设置之后，的确能产生较好的兼容性效果 社区Q&A：自定义标题栏高度计算、在 navigationStyle: 'custom',苹果X和8兼容问题 注意某些方法、参数的兼容性，时刻关注官方更新信息 开一个项目采集设备的screenHeight,windowHeight,pixelRatio等信息到一个数据库中，或者微信可以提供这样一个数据库便于计算，亦或者微信优化自定义标题栏（譬如通知栏可以改变颜色但不要算在自定义范围内，给出胶囊宽高到通知栏距离到右侧屏幕边框距离等相关参数）