【支付宝小程序】 rich-text的应用

问题描述:在支付宝小程序中,rich-text的nodes 属性只支持使用 Array 类型,如果需要支持 HTML String,则需要自己将 HTML String 转化为 nodes 数组

解决方案:使用mini-html-parser2

代码样例:

index.axml

<rich-text type="text" nodes="{{htmlData}}"></rich-text>

index.js

import parse from ‘mini-html-parser2‘;

Page({

  data: {

    htmlData:[]

  }, 

  onLoad: function (options) {

    var that = this;    

    var strhtml =

`<div><span>test</span>

<div><span>table test</span><table><thead><tr><th>title</th><th>title</th></tr></thead><tbody><tr><td colspan="2">yy</td><td>xx</td></tr></tbody></table></div></div>`;

    parse(strhtml, (err, htmlData) => {

      if (!err) {

        that.setData({

          htmlData,

        });

      }

    })

  }

})

注意事项:html字符串里的标签都要闭合,否则会转不了nodes数组,比如:<br>一定要是<br/>

     import parse from ‘mini-html-parser2‘,有一个前提需要提前将mini-html-parser2安装到小程序根目录下,安装代码为npm install mini-html-parser2 --save(cmd命令行下安装,要先cd跳转到小程序目录,在执行安装命令)

如果电脑没有安装npm,请参考https://blog.csdn.net/wjnf012/article/details/80422313 先安装好npm

安装组件参考https://blog.csdn.net/mentalitys/article/details/89400478

原文地址:https://www.cnblogs.com/LiCoco/p/11106192.html

时间: 2024-10-06 18:51:38

【支付宝小程序】 rich-text的应用的相关文章

支付宝小程序正式上线公测 附开发者工具和开发文档

支付宝小程序正式进入公测阶段,开发者可以申请公测了.支付宝小程序是一种全新的开放模式,它运行在支付宝客户端,可以被便捷地获取和传播,为终端用户提供更优的用户体验.小程序开放给开发者更多的JSAPI和OpenAPI能力,通过小程序可以为用户提供多样化便捷服务.公测申请地址:https://openhome.alipay.com/platform/miniBeta.htm 支付宝小程序特色能力 1.支付能力.满足商户各商业经营场景的支付需求2.信用能力.为商户高效识别用户的真实.靠谱性3.大数据能力

快速申请支付宝小程序流程

2017年9月21日,支付宝小程序正式上线,那么如何快速申请支付宝小程序?附上流程 准备工具: 1.支付宝账号 2.蚂蚁金服|开放平台 步骤: 一.支付宝账号登录蚂蚁金服|开放平台 使用企业支付宝账户登录,依照入驻指引选择自己入驻的身份角色,完善身份信息,签署平台服务协议,成为开放平台合作伙伴. 二.选择入驻身份 目前小程序只用于自研,小程序开发者请选择 - 自研开发者. 三.完善信息 根据所选择的身份角色填写相应的身份信息,如需在入驻后修改身份角色,请进入"账户管理"进行修改. 四.

支付宝小程序PHP全栈开发--前端样式的设计.acss样式详解

关于.acss文件 在视频中已经说过了,小程序的设计思想和原生app的设计思想颇为相似,基本的应用单元为页面.当然对于一个页面来说每一个元素的放置位置在哪儿以及显示成什么样子这个是由样式来决定的.我们知道在web开发中样式是在css文件中规定的,叫做层叠样式表 (Cascading Style Sheets).其实在APP中样式的约束也是使用css,在支付宝小程序中也是使用css不过文件的后缀是.acss而且对css3进行了扩充而已. CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化

支付宝小程序如何申请 制作 打包 上线 完整流程汇总

快速上线支付宝小程序 六步骤&注意事项  第一步:注册企业支付宝账号 用[企业支付宝账号]登录开放平台 : 进入[小程序公测首页] 申请小程序公测,审核时间为1个工作日:注意1:公测期间尚未开放个人支付宝账户注意2:未注册企业支付宝账号请访问:注册企业支付宝账号 第二步:支付宝小程序入驻 http://bbs.zhichiwangluo.com/thread-13063-1-1.html 第三步:支付宝小程序创建 http://bbs.zhichiwangluo.com/thread-13008

微信(支付宝)小程序蓝牙4.0线上项目

需求 : 微信(支付宝)小程序链接BLE4.0 ,发送指令到蓝牙硬件 过程 : 小程序分为安卓和ios两套系统,支持连接BLE 蓝牙 ,其中会遇到机型问题(其中安卓,华为荣耀机型,小米,问题很多,稍微代码有出入都会出问题10008错误 .ios 苹果5s 会出问题 10001 ),以及蓝牙程序不可长时间运行的问题 . 回顾 : 2017年是我难受不堪回首和不敢去想的一年,公司主要做共享方面的产品,结合蓝牙所做的产品,产品设计就是一直在运行,知道电量到达某一点的时候,停止运行,硬件方面分为<单片机

支付宝小程序开发之与微信小程序不同的地方

前言: 本文仅汇总微信小程序移植支付宝小程序过程中遇到的一些不同的地方,详细请参考官方开发文档. 网络请求: 对于网络请求,基本上改动不大,也就支付宝小程序没有responseType属性及响应码字段改成了status. 用户授权登录: 1. 登录: wx.login ====  my.getAuthCode wx.checkSession ==== 无(需后端接口验证) 缓存: 以常用的 wx.getStorageSync() 为例,先看微信的代码: wx.setStorageSync("id

全网首发 商业级支付宝小程序入门与实战

第1章 课程导学与准备工作 本章主要介绍为何学习支付宝小程序,以及开发支付宝小程序能为我们带来哪些收获.之后会为大家介绍本课程内容具体安排,最后给出如何学好这门课程的一些学习建议.希望大家都能通过这门课程,学有所成,学有所归. 1-1 课程导学 第2章 初识支付宝小程序 本章首先会为大家介绍如何配置开发环境,如何使用蚂蚁开发者工具,随后我们会一起开发第一个hello world小例子,通过对开发工具以及基本文件类型的介绍,让大家快速熟悉支付宝小程序.为后面技术的学习,项目的开发做好基本准备.大家

支付宝小程序注意事项

1.支付宝小程序和微信小程序的开发流程及逻辑代码几乎相同,它的开发者工具名称由蚂 蚁金服而来,其文件组成由js,json,acss,axml组成. 2.支付宝小程序在生命周期函数中多了个onTitleClick函数(标题被点击时). 3.视图层和微信小程序的视图层数据的渲染区别在于,支付宝是以a:开头,而微信是以wx: 开头. **```4.其中点击事件是以onTap或catchTap进行绑定,它们的区别在于on 事件绑定不会阻止 冒泡事件向上冒泡,catch 事件绑定可以阻止冒泡事件向上冒泡*

支付宝小程序狂欢月来了,怎么玩?商家如何抢占红利?

读完本文仅需3分钟:1.支付宝小程序狂欢月怎么玩:2.支付宝小程序前景优势解读. 前天,支付宝APP内悄然上线小程序狂欢月活动,通过多种方式推广小程序,再次让开发者看到了支付宝发力小程序的决心,下面就一起来看看支付宝小程序狂欢月怎么玩,以及当前前景如何: 一.支付宝小程序狂欢月怎么玩? 活动于前天上线后,用户通过首页下拉小程序收藏或发现页入口,可进入狂欢月活动,活动一共分为四轮:玩乐周.祖祖乐.踏青出游周和乐享生活周,分别推广不同类型的小程序. 具体的参与方式则是通过玩"叠叠乐"小游戏