自定义交易组件 本文主要介绍新版自定义交易组件的业务流程及各流程的注意事项，文档篇幅较长，如无需查看完整文档可以使用浏览器自带页面搜索功能进行关键字搜索（快捷键Ctrl+F ）。 在开始开发前应确认以下必要前置条件是否完成： 1、开通场景经营商户号； 2、部分接口强制校验来源IP白名单，白名单配置方式： 1）服务商配置方式"点我查看" 2）普通小程序：登录小程序管理后台->开发管理->开发设置->“开发者ID”下的“IP白名单” 3、因视频号场景受控订单无微信支付回调，支付结果等事件是通过小程序消息推送进行下发的，需要登录小程序管理后台后，在「开发」-「开发设置」-「消息推送」中启用并设置消息推送配置，开发者接收到的消息需要解密， 消息加解密说明可在开发文档查询。 1、业务流程图 1.1 关键流程逻辑 [图片] 1.2 售后流程 [图片] 1.3 主要业务变动 [图片] 2、接入流程详细说明 整体接入流程 注：本文2.1-2.2为前置必做流程，完成后才可以进行接口调试 [图片] 2.1 开通自定义交易组件 2.1.1 公众平台后台开通 登录公众平台,点击功能下方的“交易组件”，点击“开通”阅读并同意开通协议后即可进行下一步操作。[图片] 开通后页面如图所示[图片] 2.1.2 接口申请开通 调用接口 “shop/register/apply” 申请开通自定义版交易组件，请求成功后将发送“法务协议确认”到管理员微信，管理员需要在“24小时内”点击该模板消息，并确认服务协议。服务协议签署成功后，开发者可以通过“获取接入状态接口（可点击跳转）”或“”事件回调“进行开通状态判断，若状态为“已开通”，开发者才可以继续调用后续接口进行调试接入。[图片][图片][图片] 2.1.3 自定义交易组件“升级版”跟升级前的自定义交易组件有什么区别，哪些接口需要进行升级？ 1.新支付接口，必须走新商户号。 2.取消订单， 小程序(小程序内以及发现-小程序我的订单)和视频号双向可取消，之前只可以在小程序上取消，然后同步给视频号状态。 3.申请退款，小程序和视频号双向可申请退款。 4.申请退货退款,小程序和视频号双向可申请退货退款，之前只有小程序上操作。 5.未付款订单，小程序和视频号 可在各自订单中心重新支付，同步状态。 6.确认收货，小程序和视频号双向可确认收货。 7.同步发货状态接口更新。 2.2 开通场景经营所需商户号 视频号场景下，会通过开通商户号、补齐资料，获得一个新的电商收付通的商户号。商家在视频号内的交易资金流，需要使用这个新商户号。 准备事项：需准备营业执照、法人身份证、商户号超级管理员手机号、邮箱信息 注意事项：小程序超管将作为微信支付商户号的超级管理员，如管理员已离职、管理员曾变更过姓名未在小程序后台更新等情况，将影响商户号的签约，请确认无误后再进行商户号申请。 2.2.1 通过公众平台后台申请 在小程序官方后台自定义交易组件页面，点击商户号申请所对应的“去开通”按钮进入商户号申请页面，共计三部分（不想开商户号了，暂时不放图）： 2.2.1.1 填写基础信息 此部分主要为上传营业执照、法人身份证、填写商户号超管信息 2.2.1.2验证账户小额打款/法人验证 此部分会有两种情况，如为“小额打款”验证方式，在页面输入收到的打款金额即可；如为法人验证，需要使用实名认证为法人同名微信扫码进行验证。 2.2.1.3确认账户真实性。 点击“去签署”按钮会展示签约二维码，使用超管微信进行扫码，用于确认经营意愿并签署协议，完成商户号注册。 2.2.2 通过API接口申请 调用“提交支付资质”接口，提交场景经营所需商户号申请，提交成功后，商户申请是没有事件回调的，需要服务商主动调用“状态查询接口”查询申请单进度，申请单状态同“电商收付通二级商户进件申请单状态查询”。此处不做过多描述，有问题可以留言，后续视情况补充更新。 2.2.3 开通场景经营商户常见问题 2.2.3.1 Q：新版交易组件需要重新申请商户号吗？是否可以使用原有商户号？ A：不可以，新版交易组件必须要申请开通场景专用商户号 2.2.3.2 Q:新版场景专用商户号费率是多少，是否有优惠，结算周期是多久？ A：商户号费率为0.6%，无费率优惠，结算周期为7+7日，即用户收货后7天后结算。 2.2.3.3 Q：申请新商户号时，最后一步签约遇到“微信实名信息与管理员信息不一致”是什么原因？ A：申请新的场景专用商户号时，“超级管理员”这一项不支持修改，默认为小程序“超级管理员”实名信息，如需修改，需要为该用户前往成员管理为小程序绑定超级管理员。 2.2.3.4 Q：申请新的商户号时，为什么不能修改主体信息? A：“当前主体”这一项不支持修改，因为商户号主体必须和该小程序注册主体保持一致。 2.2.3.5 Q：通过新版自定义交易组件申请的场景专用商户号是否对跨境类小程序（自助报关）有影响？ A：会，二级商户当前暂不支持自助清关接口调用，留意后续更新通知 2.2.3.6 Q：新商户号是否支持分账功能？ A：即将支持，敬请期待。 2.3 上传商品并通过审核，完成商品接口调用（仅有API接入方式） 基础流程，不做过多说明，只写流程、常见错误和注意事项 2.3.1 添加商品流程： （1）首先去“获取类目详情”，与自己的系统商品类目相匹配 （2）查看对应类目是否需要行业资质，如果需要，请上传相关资质 （3）“上传相关类目资质”获得对应类目的使用权限 （4）如果商品有品牌，“上传品牌信息”获得品牌的使用权限 （5）调用“添加商品”接口将商品进行上传 2.3.2 SPU接口常见错误及注意事项 2.3.2.1 Q：自定义交易组件提交上传类目资质时报错{“errcode”: 1000009, “errmsg”: “调用的类目id不存在”} A: 调用获取类目详情，看对应““qualification_type"与"product_qualification_type"参数是否为"0”，为"0"无需上传类目资质 2.3.2.2 Q：调用自定义交易组件“添加商品”接口shop/spu/add时报错“该账号客服方式必须包含微信客服/小程序客服” {“errcode”:1040042,“errmsg”:"该账号客服方式必须包含微信客服/小程序客服”} A11:需要在MP后台配置微信客服/小程序客服后，然后通过“更新商家信息”接口更新商家信息 [图片] 调用“获取商家信息”接口应返回一下内容才为成功，“service_agent_type”字段需要同时包含0，1，2三个值 [图片] 2.3.2.3 Q：类目审核成功，但是添加商品报错，{“errcode”:1000005,“errmsg”:"该商品使用了未申请通过的类目，请先申请类目且通过后再提审商品 "} A: 检查是否取消开通过，取消开通会清空品牌类目。对于服务商，可以监听账户接入回调事件，目前只有取消开通回调。 2.3.2.4 Q：调用自定义组件上传图片接口报错{“errcode”:1070001,“errmsg”:"文件/图片为空 "} A25:检查请求报文协议，需[代码]Content-Type: multipart/form-data[代码] 2.4 调试支付校验，完成订单接口调用 2.4.1 支付流程： （1）按照"开发指引"修改基础库配置 （2）在小程序中调用"生成订单"接口生成一笔订单 （3）完成订单的支付（视频号场景需要调用生成支付参数后完成收银台的拉起，其他场景按照已有业务逻辑进行支付） （4）调用"同步订单支付结果"接口同步订单的支付结果（二级商户单无需同步支付结果，系统自动流转订单状态） 注意： 这里两个接口都需要调用，以同步订单结果为最后确认步骤，视频号场景则以支付成功作为最终确认步骤。 基础库拉起收银台接口改造后需要发版才可以生效。 完成接口调用后，点击完成，切换状态。 2.4.2 订单接口接口常见错误及注意事项 2.4.2.1 Q：二级商户号订单支付流程与原有订单支付流程有什么区别？ A17:主要区别是：二级商户号订单调起支付所需参数是通过“生成支付参数”获取，无需同步支付结果；原流程调起支付是需要通过微信支付统一下单获取，需要同步支付结果。 2.4.2.2 Q：调用自定义交易组件“创建订单”接口shop/order/add时报错“不支持的发货方式” {“errcode”:1010036,“errmsg”:"不支持的发货方式“} A：视频号场景当前只支持“正常快递”方式，其他请留意后续更新。 2.4.2.3 Q：自定义交易组件申请视频号专用商户号后，唤起支付报错: “商户号该产品权限未开通” A:需要先调用“生成订单”接口，生成订单时将fund_type设为1，然后调用“生成支付参数”接口获取调取支付所需参数，不要调用微信支付统一下单接口获取调用支付参数 2.4.2.4 Q：自定义交易组件二级商户单调起支付时报错“JSAPI缺少参数total_fee” A:生成支付参数失败，没返回正确的预支付 ID，重新调用生成支付参数接口获取新的支付参数即可 2.4.2.5 Q：自定义交易组件调用同步订单支付结果时报错 {“errcode”:990022,“errmsg”:"暂不支持操作“} A：二级商户单无需同步支付结果，付款成功后系统自动流转订单状态并下发支付结果回调事件。 2.5 调试发货接口，完成物流相关接口调用 2.5.1 发货流程 （1）先调用获取快递公司列表接口获取快递公司信息 （2）调用"订单发货"接口，完成发货 2.5.2 发货接口常见错误及注意事项 注意事项： 视频号订单状态流转不可逆的，当finish_all_delivery=0时，订单状态流转到21（部分发货）， 当finish_all_delivery=1时，订单状态从20（待发货）/ 21(部分发货）流转到30（待收货），部分发货时finish_all_delivery一定要传0，最后一次发货才可以传1，切记！切记！切记！！！ 2.5.2.1 Q：调用自定义交易组件“创建订单”接口shop/order/add时报错“不支持的发货方式” {“errcode”:1010036,“errmsg”:"不支持的发货方式“} A：视频号场景当前只支持“正常快递”方式，其他请留意后续更新。 2.5.2.2 Q：当自定义交易组件订单只存在一个SKU，发货时误操作为部分发货，订单状态码流转为21时，在既不能确认收货、也不能退款的情况下应该如何处理？ A：按照截图示例传参，即可完成发货，订单状态由21转为30，订单状态变更后就可以正常流转 注：传参时order_id与out_order_id二选一传参 [图片] 2.6 调试售后接口，完成售后接口调用 2.6.1 售后流程、超时时间及售后事件和API、回调的对应关系 看本文1.2 售后流程图 用户及商户处理售后超时时间 类型 超时时间 商家处理退款超时 48小时 商家处理退货超时 48小时 用户超时未申请平台接入 7天 用户上传退货物流超时 7天 商家超时未确认收货 10天 售后事件和API、回调的对应关系 事件 API 触发回调 说明 用户申请退款 用户提交售后申请 用户提交售后申请回调 - 用户申请退货 用户提交售后申请 用户提交售后申请回调 - 用户修改申请 用户更新售后申请 用户更新售后申请回调 - 用户取消申请 用户取消售后申请 用户取消售后申请回调 - 用户申请平台介入 无API，只能由用户在微信侧触发 暂无 - 用户超时未申请平台介入（7天） - 用户申请平台介入超时回调 - 用户上传退货物流 用户上传物流信息 用户上传退货物流回调(待商家确认收货) - 用户超时未上传退货物流（7天） - 用户上传退货物流超时回调 - 用户确认退款凭证 无API，只能由用户在微信侧触发 用户确认退款凭证回调 - 商家同意退款 同意退款 - - 商家处理退款超时（48小时） - 商家处理退款请求超时回调 - 商家同意退货 同意退货 - - 商家处理退货超时（48小时） - 商家处理退货申请超时回调 - 商家拒绝退款 拒绝售后 - - 商家拒绝退货 拒绝售后 - - 商家上传退款凭证 上传退款凭证 - 商家确认收货 同意退款 商家确认收到的货没问题后，调用同意退款API表示确认收货，如果有问题就调用拒绝售后API 商家超时未确认收货（10天） - 商家确认收货超时回调 - 平台退款成功 - 平台退款成功回调 - 平台退款失败 - 平台退款失败回调(待商家线下退款) - 平台判定用户责任 - 纠纷事件更新售后单状态回调 纠纷事件通知请见纠纷回调 平台判定商家退款 - 纠纷事件更新售后单状态回调 纠纷事件通知请见纠纷回调 平台判定商家退货 - 纠纷事件更新售后单状态回调 纠纷事件通知请见纠纷回调 2.6.2 售后接口常见错误及注意事项 注意事项 新旧接口不可混用，新售后接口无法处理旧接口订单，否则会出现很多意想不到的错误 2.6.2.1 枚举值定义 （1）AfterSalesReason 枚举值 描述 1 排错/多拍 2 不想要了 3 无快递信息 4 包裹为空 5 已拒签包裹 6 快递长时间未送达 7 与商品描述不符 8 质量问题 9 卖家发错货 10 三无产品 11 假冒产品 12 其他 （2）AfterSalesState 枚举值 描述 1 用户取消 2 商家受理退款申请中 4 商家拒绝退款 5 商家拒绝退货退款 6 待买家退货 7 售后单关闭 8 待商家收货 11 平台退款中 13 退款成功 21 平台受理退款申请中 22 平台介入处理完成 23 商家受理退货申请中 24 平台受理退货申请中 2.6.2.2 Q：调用自定义交易组件售后相关接口：“创建售后单”、“用户取消售后单”、“用户上传物流信息”、“获取售后单列表”、“获取售后单详情”、“同意退款“、”同意退货“、“拒绝售后”、“上传退款凭证”、“更新售后单”等接口时报错{“errcode”: 48001,“errmsg”: “api unauthorized”} A18:未开通视频号场景经营商户号，需要先开通场景经营商户号才可以调用。 2.6.2.3 Q：调用自定义交易组件创建售后接口ecaftersale/add时报错2747002，参数错误{“errcode”:2747002,“errmsg”:"参数错误 "} A9：1.请检查“orderamt”参数，传参金额应不含邮费。 2.新旧接口不可混合调用，新接口不支持对旧接口生成的订单创建售后。 2.6.2.4 Q：调用自定义交易组件创建售后接口ecaftersale/add时报47001错误{“errcode”:47001,“errmsg”:"data format error "} A：请检查“product_info”字段，注意对应类型为“object”。 2.6.2.5 Q：调用自定义交易组件“同意退款”接口shop/ecaftersale/acceptrefund时报错“同意退款失败” {“errcode”:9700209,“errmsg”:"同意退款失败 退款失败“} A：1.该问题是订单流转状态不对导致，请严格按照文档流程进行操作调用； 2.新旧接口混合调用也会报此错误 3.“orderamt"传参为"0” 2.6.2.6 Q：用自定义交易组件创建售后接口ecaftersale/add时是报错“售后金额不合法，大于最大可退款金额”{“errcode”:2747014,“errmsg”:" 售后金额不合法，大于最大可退款金额"} A：1.请确认请求创建售后时"orderamt"金额是否大于下单时"sku_real_price"金额 2.订单已进行部分退款 码字中 稍后回来

写在前面： 大家不要将ICP证和ICP备案搞混了。 ICP证指的是【电信增值业务经营许可证】，这个资质需要企业主体至少100万注金，去工信部办理，比较难办理；社交-交友需要ICP证。 而ICP备案，【非经营性互联网信息服务备案核准】仅仅是指企业主体的域名备案，可以简单的按以下步骤免费办理成功，其他社交类目如社区、论坛、笔记等，只需要ICP备案即可。 1､在腾讯云注册一个账号并认证企业主体（不吹不黑，开发小程序当然首选腾讯云，好用）。http://www.qcloud.com/ 如果你是个人主体，就不要往下看了，没必要折腾了。 2､找到腾讯云免费活动页：https://cloud.tencent.com/act/free?from=10107 3､选择一款云服务器，180天免费试用。 云服务器申请成功后，它的使命就完成了，没用了，让它自生自灭吧。 在整个备案过程中，也不需要部署网站（域名都没有备案，哪来的网站？）。 [图片] 云服务器180天到期后，可以自己决定是否续费，每个月也才99元，促销期甚至更低，完全可以接受吧。 备案成功后，该服务器就没什么作用了，让它180天后自然欠费销毁得了。 服务器销毁后会有什么影响？答：没有任何影响。 但是。。。。。 你备案的域名最后还得指向一个网站，因为腾讯云会应工信部的要求定期检查网站是否合规，所以你还是要建一个简单的网站，（备案期间，可以暂时不管网站的事，等将来需要的时候再管理）。 至于有多简单，答，多简单都行。此时你可以在七牛、腾讯云、阿里云租点免费的对象存储空间，做个简单的网站。 4､在进行ICP备案之前，你需要在腾讯云注册你的域名地址，如果你已有域名，但不在腾讯云，建议先将要域名过户到腾讯云的账号上。 5､进入控制台，开始ICP备案，这个流程就不介绍了，因为完全一看就懂。而且现在使用备案小程序后，不需要幕布或现场拍照了，极其方便，大家跟着流程走就一点问题没有，有人脸识别和在线拍一段小视频。另外，大家可以随便作，随便填，填错或者填得不合适也不用怕，会有专门的备案客服打电话告诉你哪哪要改，还会告诉你应该怎么填才更容易通过工信部的审核，客服的态度好得发指。 仅说一点其中的几个小坑： a､人脸识别的时候，白色背景、白色背景、白色背景，笔者在人脸识别的时候，满世界找白墙，结果还被打回来重拍了3次。 b､网站用途一律写：公司官网，好通过工信部审核。 6､腾讯云提交资料到工信部审核。这是一个漫长的让人无语的等待，20-30天。笔者最近两次都是20天才过审；不要幻想会有可能提前完成审核，这是政府部门在审核，提前完成说明某政府人员的工作安排有问题，会犯错误的。 7､备案成功后，会有短信通知你，但是，你需要去工信部网站查询结果，并将结果切屏拷贝下来，因为小程序类目审核需要上传这张图片。http://beian.miit.gov.cn/publish/query/indexFirst.action [图片] 把上面这张图片保存好，小程序类目审核的时候需要上传。收到通知后，如果在这里查不到结果，也别急，据说需要24小时。 8､接下来是小程序上线审核。 因为ICP备案的小程序内容肯定涉及到社交，最后小程序上线时还要提交到工信部审核，还需要7天左右的时间，加上前面ICP备案的时间，加起来怎么也得30-40天。大家估计时间，别影响小程序上线。这7天也是政府部门在审核，不要幻想会提前。  9､计算一下时间： 腾讯云注册账号和认证：1-3天； 域名备案：腾讯云环节：1-3天； 域名备案：工信部环节：20-30天； 小程序添加服务类目：社交类目审核：1-3天； 小程序上线审核：腾讯环节：1-2天； 小程序上线审核：工信部环节：7+天； 总天数：30-40天； 10、节省时间的一些建议： 在开发小程序之前，就开始备案工作，小程序可以同时开发，相互不影响； 在开发完成之前一、两星期之内，先发布一版小程序，别管功能是不是完整，能通过审核就行，这样会有7天的等待类目审核的时间，这个时间里，小程序可以照常开发，不影响进度； 只要是社交类，基本需要有文字和图片安全检查功能，别忘了加上，别到时审核通过不了。 11、结束。 [图片]

前言 在开发小程序的过程中，很多时候会需要使用富文本内容，然而现有的方案都有着或多或少的缺陷，如何更好的显示富文本将是一个值得继续探索的问题。 [图片] 现有方案 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 地址 总结 以上就是我在开发这样一个富文本插件的过程大致介绍，希望对大家有所帮助；本人在校学生，水平所限，不足之处欢迎提意见啦！ [图片]