- 当前 Bug 的表现（可附上截图） 设备：iPhone Xs 问题：数字文本中含有数字1的文本在ios上的表现和安卓不一致，数字未对齐。通过硬编码，对文本数字中含有数字1的文本添加类名，给其数字增加间距，也不行。 [图片] [图片] - 预期表现 以下为安卓机上表现： 安卓表现正常 [图片] - 复现路径 - 提供一个最简复现 Demo

wxParse 微信小程序富文本解析 原因 由于原作者仓库 wxParse 不再维护，我们项目中商品信息展示又是以wxParse这个用做富文本解析的； 于是乎，决定采用 递归Component 的方式对其进行重构一番； 原项目使用的 [代码]template[代码] 模板的方式渲染节点，存在以下问题： 节点渲染支持到12层，超出会原样输出 [代码]html[代码] 代码； 每一层级的循环模板都重复了一遍所有的可解析标签，代码十分臃肿。 [代码]li[代码]标签不支持 [代码]ol[代码] 有序列表渲染（统一采用的是 [代码]ul[代码] 无序列表），[代码]a[代码]标签无法实现跳转，也无法获取点击事件回调等等； 节点渲染没有绑定 [代码]key[代码] 值，一是在开发工具看到一堆的 [代码]warning[代码]信息（看着十分难受），二是节点频繁删除添加，无法比较[代码]key值[代码]，造成 [代码]dom[代码] 节点频繁操作。 功能标签 目前该项目已经可以支持以下标签的渲染： audio标签（可自行更换组件样式，暂时采用微信公众号文章的[代码]audio[代码]音乐播放器的样式处理） ul标签 ol标签 li标签 a标签 img标签 video标签 br标签 button标签 h1, h2, h3, h4标签 文本节点 其余块级标签 其余行级标签 支持 npm包 引入 [代码]npm install --save wx-minicomponent [代码] 使用 原生组件使用方法 克隆 项目 代码，把 components目录 拷贝到你的小程序根目录下面; 在你的 page页面 对应的 [代码]json[代码] 文件引入 [代码]wxParse[代码] 组件 [代码]{ "usingComponents": { "wxParse": "/components/wxParse/wxParse" } } [代码] 组件调用 [代码]<wxParse nodes="{{ htmlText }}" /> [代码] npm组件使用方法 安装组件 [代码]npm install --save wx-minicomponent [代码] 小程序开发工具的 [代码]工具[代码] 栏找到 [代码]构建npm[代码]，点击构建； 在页面的 json 配置文件中添加 [代码]wxParse[代码] 自定义组件的配置 [代码]{ "usingComponents": { "wxParse": "/miniprogram_npm/wx-minicomponent/wxParse" } } [代码] [代码]wxml[代码] 文件中引用 wxParse [代码]<wxParse nodes="{{ htmlText }}" /> [代码] 提示：详细步骤可以参考小程序的npm使用文档 补充组件：代码高亮展示组件使用 在 [代码]page[代码]的 [代码]json[代码] 文件里面引入 [代码]highLight[代码] 组件 原生引入： [代码]{ "usingComponents": { "highLight": "/components/highLight/highLight" } } [代码] npm组件引入： [代码]{ "usingComponents": { "highLight": "/miniprogram_npm/wx-minicomponent/highLight" } } [代码] 组件调用 [代码]<highLight codeText="{{codeText}}" /> [代码] 参数文档 wxParse：富文本解析组件 参数 说明 类型 例子 nodes 富文本字符 String “<div>test</div>” language 语言 String 可选：“html” | “markdown” (“md”) 受信任的节点 节点 例子 audio <audio title=“我是标题” desc=“我是小标题” src=“https://media.lycheer.net/lecture/25840237/5026279_1509614610000.mp3?0.1” /> a <a href=“www.baidu.com”>跳转到百度</a> p div span li ul ol img button h1 h2 h3 h4 … highLight：代码高亮解析组件 参数 说明 类型 例子 codeText 原始高亮代码字符 String “var num = 10;” language 代码语言类型 String 可选值：“javascript/typescript/css/xml/sql/markdown” 提示：如果是html语言，language的值为xml wxAudio：仿微信公众号文章音频播放组件 参数 说明 类型 例子 title 标题 String “test” desc 副标题 String “sub test” src 音频地址 String 示例展示 富文本解析 html文本解析实例 [图片] markdown文本解析实例 [图片] 代码高亮 [图片] 更新历史 2020-5-31 迁移utils目录到wxParse目录下； 富文本增加markdown文本解析支持； 2020-5-21: 富文本组件image标签添加loading过渡态，优化图片加载体验 2020-5-17: 完善组件参数文档，增加wxParse对audio标签标题，副标题的解析功能 2020-5-13: 增加css，html，ts，sql，markdown代码高亮提示支持 2020-5-6: 增加图片预览功能 项目地址 项目地址：https://github.com/csonchen/wxParse

错误原因： 微信开发者工具从 1.05.2201210 版本开始，对小程序项目新增了无依赖文件过滤能力。 如果某个 js 文件被静态分析显示是无依赖文件，在实际运行时又被其他 js 文件 require 引用了，则会在工具模拟器中报错这个错误。 此时，如果你继续预览或者上传代码，则在真机运行环境中会报 xxx.js is not defined 的错误。 解决方式： 修改依赖引用的代码：可根据控制台中的【代码依赖分析异常】提示进行修改。（推荐）关闭过滤无依赖文件：project.config.json 中 settings 选项添加 ignoreDevUnusedFiles: false , ignoreUploadUnusedFiles: false详细分析： 微信开发者工具的无依赖文件过滤能力，是基于代码静态依赖分析的数据来实现的。 也就是会分析小程序项目中的代码内容，如果发现某个 js / wxml / wxss / json 文件没有被使用到，则会将其列为无依赖文件。 无依赖文件在模拟器运行时会被忽略，在上传时也不会打入代码包中，因此可以有效减少代码包大小。 但由于 js 代码的灵活性，代码静态依赖分析功能在某些情况下，无法准确分析出依赖引用关系（控制台中会有对应的 warning 提示），此时部分 js 文件会被误判为无依赖文件，导致报错。开发者需配合提示信息修改代码，才能继续使用此功能。 导致依赖异常的常见情况： 动态引用的情况，如 var a = 'somefile.js'; require(a);将 require 函数赋值给其他变量的情况，如 var a = require; a('somefile.js');

最近开发代码时发现，日期格式化官方没有给出一个很好地解决方案，虽然使用wxs文件在wxml中可以引入使用，但是无法获取实时数据。 由于小程序中的js跟es5的规则类似，为便于使用工具性方法获取实时日期信息或根据传递的日期获取指定格式的日期信息。 下面将代码贴出，使用时，请在指定js中引入创建的工具js文件即可。 示例： const util = require('util.js'); let date = new Date(); console.log(util.formatDate(date, 'yyyy-mm-dd hh:mi:ss')); 如果是使用云开发，请参考官方云开发数据库查询文档，进行日期格式化。 /** * date 为日期Date类型， * 日期格式化信息 matter 定义 * 年:yyyy/YYYY/yy/YY * 月:mm/MM (不足两位用0补全) * 日:dd/DD (不足两位用0补全) * 时:hh/HH (24小时制) * 分:mi/MI (不足两位用0补全) * 秒:ss/SS (不足两位用0补全) */ const formatDate = function (date, matter) { let year = date.getFullYear().toString(); let month = (date.getMonth() + 1).toString(); month = (month.length > 1) ? month : ('0' + month); let day = date.getDate().toString(); day = (day.length > 1) ? day : ('0' + day); let hours = date.getHours().toString(); hours = (hours.length > 1) ? hours : ('0' + hours); let minutes = date.getMinutes().toString(); minutes = (minutes.length > 1) ? minutes : ('0' + minutes); let seconds = date.getSeconds().toString(); seconds = (seconds.length > 1) ? seconds : ('0' + seconds); let retVal = matter; if (matter.indexOf('yyyy') >= 0) { retVal = retVal.replace('yyyy', year); } else if (matter.indexOf('YYYY') >= 0) { retVal = retVal.replace('YYYY', year); } else if (matter.indexOf('yy') >= 0) { retVal = retVal.replace('yy', year.substring(2)); } else if (matter.indexOf('YY') >= 0) { retVal = retVal.replace('YY', year.substring(2)); } if (matter.indexOf('mm') > 0) { retVal = retVal.replace('mm', month); } else if (matter.indexOf('MM') > 0) { retVal = retVal.replace('MM', month); } if (matter.indexOf('dd') > 0) { retVal = retVal.replace('dd', day); } else if (matter.indexOf('DD') > 0) { retVal = retVal.replace('DD', day); } if (matter.indexOf('hh') > 0) { retVal = retVal.replace('hh', hours); } else if (matter.indexOf('HH') > 0) { retVal = retVal.replace('HH', hours); } if (matter.indexOf('mi') > 0) { retVal = retVal.replace('mi', minutes); } else if (matter.indexOf('MI') > 0) { retVal = retVal.replace('MI', minutes); } if (matter.indexOf('ss') > 0) { retVal = retVal.replace('ss', seconds); } else if (matter.indexOf('SS') > 0) { retVal = retVal.replace('SS', seconds); } return retVal; } exports.formatDate = formatDate;