微信 小程序 python 渲染_微信小程序渲染html内容

最近又做了一个新的小程序关于物流订单查询欢迎来体验

bVbkBYY?w=2800&h=800

遇到了一个小问题:数据中返回电话号码的字符串识别出来并且高亮和可以绑定事件。比如数据中包含您的派送员黄xx正在派件,电话:137xxxx41460已经在派送。其中就要识别出137xxxx41460并且绑定点击事件可以点击拨打电话号码。

对于这个功能搜集了不少资料其中包含了3个解决方案但是各有优缺点因此记录下来

wxParse

小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「 wxParse 」的库。它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来。

rich-text

后来,小程序增加了「rich-text」组件用于展示富文本内容。然而,这个组件存在一个极大的限制: 组件内屏蔽了所有节点的事件 。也就是说,在该组件内,连「预览图片」这样一个简单的功能都无法实现。

web-view

再后来,小程序允许通过「web-view」组件嵌套网页,通过网页展示HTML内容是兼容性最好的解决方案了。然而,因为要多加载一个页面,性能是较差的,个人小程序也是没法用webview。

因为我这个只是需求只是需要识别出来电话号码并且不是那种复杂的字符模板。因此参考wxparse 的原理自己写了一个关于电话号码识别的功能。

效果如下:

bVbkBZb?w=1120&h=541

技术重点就是

1、在数据返回后对于字符串用正则(/(

bVbkBZp?w=690&h=391

2、新建一个关于字段读取的模板

{{item.acceptStation}}

{{item.acceptStation}}

其中,在模板里面绑定点击事件方便后期做逻辑处理还可以绑定不同的参数方便获取

3、在需要用到的地方引入模板

那就满足现在的功能呢需求了。不用复杂的插件也比直接引入原生组件来得方便。关键就是思路。。特此记录哈。

d ↩

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/298788.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

shell oracle查询数组,shell 脚本 ---数组

数组的定义:所谓数组,就是相同数据类型的元素按一定顺序的集合,就是把有限个类型相同的变量用一个名字命令,也就是说这些变量被定义成数组之后,它们就不在有自己的名字了,那么我们怎么找到各个变量或者元素…

Dockerfile 使用 ARG 参数实现构建模板

Dockerfile 使用 ARG 参数实现构建模板IntroDockerfile 里用来表示变量的主要有两个东西,一个是 ENV 代表了环境变量,另外一个则是 ARG 代表是构建 docker 镜像时的一个构建参数,需要在执行 docker build 命令时指定变量的值,最近…

华人AI界痛失“一代宗师”,计算机视觉之父黄煦涛教授去世

全世界只有3.14 % 的人关注了爆炸吧知识美东时间2020年4月25日夜间,华人计算机视觉一代宗师,黄煦涛教授(Thomas S. Huang)在美国印第安纳州逝世,享年 84 岁。由于他在图像处理、模式识别等计算机视觉领域作出的开创性贡…

oracle 参照完整性,Oracle中用表外键来保证系统参照完整性

欢迎进入Oracle社区论坛,与200万技术人员互动交流 >>进入 Oracle中表的外键是保证系统参照完整性的手段,而参照完整性是指分布在两个表中的列所满足的具有主从性质的约束关系。外键涉及到两个表,其中一个称之为父项表,另一个…

你好,同学!在云端学习最潮的技术吧!

开学季大礼包9月开学了,作为学生的你,有想过在这个数字化年代,学最cool的技术吗?人工智能,物联网,云计算,还有区块链这些互联网产物影响着你的生活,也影响着你将来的职业发展。不论你…

seo关键词互点软件报价_SEO关键词优化收费问题和外包报价问题,一文详解

在竞争日益激烈的市场环境中,企业为了在互联网平台中获得较好的排名,以及实现产品的较好变现,大多数都是使用SEO搜索引擎,因为通过优化关键词可以不断地为用户创造“用户最想得到的”“最匹配”搜索结果,在快速找到心仪…

15张令人震撼的物理动图,看完惊呆了!

全世界只有3.14 % 的人关注了爆炸吧知识比抖音还上瘾看了会让人上瘾的物理动图,赶紧给家里的孩子看看吧,绝对让他开拓眼界,脑洞大开。1.有弹性的岩浆2.高速转动时,因向心力不足而被撕开的的CD(慢镜头)3.震荡…

linux目录结果说明,Linux目录结构及文件说明

Linux中所有文件都是从(/)根开始的,下面是典型的Linux目录结构说明:/:根目录/bin: binary 主要用来存放可执行文件/sbin: super bin 存放系统管理程序,通常只有管理员才有权限使用/boot: 存放内…

Java wait notify

2019独角兽企业重金招聘Python工程师标准>>> Java wait && notify ‍wait、notify和notifyAll方法是Object类的final native方法,所以这些方法不能被子类重写。 方法 notifyAll() Wakes up all threads that are waiting on this objects monito…

使用ETag协议实现ASP.NET Core API缓存

通常,我们在ASP.NET Core API服务端实现缓存,数据直接从缓存中取出,返回给客户端,以便加快响应速度。但是这样的做法,解决不了数据传输到客户端需要占用带宽带来的性能问题。这时,可以尝试使用ETag。ETag协…

深度优化sql 查询, 提升性能一百倍是什么概念?

正在做一个软件设计, 希望有个功能, 然而, 对于加上该功能后对系统性能造成的影响很是担忧. 可以说是, 一方面想要有这个功能, 另一方面又对性能问题是否能够解决很怀疑, 正处于犹豫不决状态. 于是决定进行实验. 首先对表结构和索引进行了优化, 初步结果还不错, 性能基本进入可…

女老师vs男老师的区别...

1 被帅到了2 失传已久的如来神掌??!!3 哎呦,谁拉我一把?4 决定到底要不要开始学习的我…5 女老师vs男老师监考的区别...6 函数广播体操7 这个打包装置够便捷,够酷炫!关键是省事你点的…

Redis Windows环境安装

1、下载Windows 版本 Redis: https://github.com/ServiceStack/redis-windows 2、 解压文件: F:\开源代码学习\01_Redis 打开 目录:F:\开源代码学习\01_Redis\src\msopentech\redis64-2.6.12.1 3、启动Redis 指向CMD命令: 4、测试安装成果&am…

Hello Blazor:(11)全局截获事件执行

前言在Blazor中&#xff0c;我们使用on{DOM EVENT}"{DELEGATE}"这样的Razor语法在组件标记中指定委托事件处理程序&#xff1a;<button onclick"IncrementCount">Click me</button>但是没有提供解除委托的方法。比如&#xff0c;我们需要在某种…

深度学习会不会被取代?深度学习必看发展史

近年来&#xff0c;随着人工智能时代的来临&#xff0c;数据科学、计算机科学迎来飞速发展&#xff0c;多次引发讨论的人机对战也正是人工智能与人类的对决。从无人驾驶汽车到AlphaGo战胜人类&#xff0c;机器学习成为了当下最热门的技术。而机器学习中一种重要的方法就是深度学…

Xcode6中如何对scrollview进行自动布局(autolayout)

本文转载至 http://www.cocoachina.com/ios/20141011/9871.html XCodeAutolayoutscrollView Xcode6中极大的增强了IB中自动布局的能力&#xff0c;下面就通过对刺儿头scrollview进行一次自动布局实战&#xff0c;看看自动布局在Xcode6中到底值不值得使用。 说 UIScrollView是个…

linux文件读保护,Linux Rootkit实现文件保护

一个非常基础的rootkit&#xff0c;禁止读取指定文件编译系统:CentOS 7uname -r3.10.0-957.21.3-el7.x86_64#include #include #include asmlinkage long(*real_open)(const char __user *filename, int flags, unsigned short mode);unsigned long **syscall_table NULL;char…

python的网页解析器_python 之网页解析器

一、什么是网页解析器 1、网页解析器名词解释 首先让我们来了解下&#xff0c;什么是网页解析器&#xff0c;简单的说就是用来解析html网页的工具&#xff0c;准确的说&#xff1a;它是一个HTML网页信息提取工具&#xff0c;就是从html网页中解析提取出“我们需要的有价值的数据…

写一个聊天辅助程序

Codeprocedure TForm1.Button1Click(Sender: TObject);varhParent,hButton,hMemo: HWND;beginMemo1.SelectAll;//Memo内容全选Memo1.CopyToClipboard;//把Memo中选中的语句拷贝到剪贴板中try//找发送消息的QQ窗口hParent : FindWindow(nil, 发送消息);//然后找回话时用的编辑窗…

真是个狠人!开学第一天,这批小学生的造型刷爆朋友圈!

全世界只有3.14 % 的人关注了爆炸吧知识在史上最长的长假过后杭州一二三年级小学生回到学校忘记座位在哪里、老师姓什么各种有趣故事不断……而在养正小学门口&#xff0c;从入校门开始&#xff0c;大家笑声就不断&#xff0c;别样的开学礼一下刷屏了朋友圈&#xff1a;每个小朋…