小程序html转为wxml,微信小程序用wxParse解析html

发布时间:2017-11-10

猛击这里加客服QQ:2334512685了解

新会员福利:免费学微信开发1-10中任一课程 点击查看 点击下载本课程课件和源代码

我们在上一节课程中提到,

小程序解析html网页标签,

有3种方法:

1) 使用 wxPasr 解析html

2) 单独解析 html标签

3) 使用最新的小程序组件 web-view


今天子恒老师跟你分享第一种方法,

wxparse解析html效果

一、 wxParse 把html转换为wxml的方法和流程

1) 首先下载 wxParse脚本

放到项目根目录


2) 在样式页面 wxss 中引入 wxparse 样式文件

@import "../../wxParse/wxParse.wxss";


3) 在逻辑处理页面 js 中引入 wxparse 模块

核心代码片段

...

var wxParse = require('../../wxParse/wxParse.js');

...

wxParse.wxParse('article', 'html', content, that, 5);

...


参数说明

article:节点名称,会在 wxml 中引用

html:代表解析的是html代码,其实wxparse还可以解析markdown代码

content:代表从服务器取到取html内容

that:代表 app 实例

5:代表图片的内边距


4) 在 wxml 结构页面中使用

核心代码片段

...

<import src="../../wxParse/wxParse.wxml" />

...

<template is="wxParse" data="{{wxParseData:article.nodes}}" />

...


代码说明

import... 引入 wxparse 模板文件

<template is="wxParse" data="{{wxParseData:article.nodes}}" /> 是固定格式,其中的article与第3步中的article节点名称保持一致。

wxparse解析html代码

二、 小程序使用wxparse解析html的缺点

你看wxparse的源代码,

就会发现,

主要有下面两个不足的地方,

1) 加载的文件多且大


由于小程序对整个项目的大小,

要求在2M以内,

如果你不需要wxparse的emotion,

可以把这个删除,

节省空间。


2) 性能有损失

wxparse在html转wxml过程中,

需要多次调用小程序setData()方法,

小程序开发官方文档中,

会提示你尽可能的少调用setData()方法,

因为这个方法会损耗性能。


下一节课程,

《小程序单独解析html》课程中,

就只调用一次setData()方法,

在性能上损失会更少。

来源:秦子恒小程序平台,欢迎转载分享,请保留出处

小程序html转为wxml,微信小程序用wxParse解析html 链接:https://211.qinziheng.com/lesson/546/

购买课程

小程序html转为wxml,微信小程序用wxParse解析html同系列课程

你什么时候需要自己开发小程序-微信小程序支付开发1

微信开发进化论-微信小程序支付开发2

小程序通过get方式与服务器通信-微信小程序支付开发3

小程序通过post方式与服务器通信-微信小程序支付开发4

小程序开发涉及到的知识结构和层面-微信小程序支付开发5

充值小程序参考案例-微信小程序支付开发6

实现充值小程序前端页面布局-微信小程序支付开发7

小程序获取保存session key-微信小程序支付开发8

获取用户openid-微信小程序支付开发9

小程序开发调试函数-微信小程序支付开发10

小程序解码wx.getUserInfo中的decryptData数据-微信小程序支付开发11

小程序生成统一支付prepay_id相关配置和类介绍-微信小程序支付开发12

生成小程序支付的prepay_id-微信小程序支付开发13

生成小程序支付签名paysign-微信小程序支付开发14

实现小程序支付-微信小程序支付开发15

异步处理小程序支付结果notify_url-微信小程序支付开发16

小程序发送模板消息template-微信小程序支付开发17

获取小程序模板消息的formId-微信小程序支付开发18

小程序提交表单后发送模板消息-微信小程序支付开发19

小程序支付后发送模板消息-微信小程序支付开发20

小程序支付开发案例总结-微信小程序支付开发21

小程序二维码开发,微信小程序码开发

php开发生成小程序二维码,PHP生成微信小程序码

小程序三级分销推广海报,php开发小程序

小程序解析html的3种常用方法,小程序html转wxml

小程序html转为wxml,微信小程序用wxParse解析html

小程序rich-text解析html网页,小程序显示html5标签内容

小程序设置web-view业务域名

小程序web-view打开html网页内容

小程序wx.chooseAddress获取用户收货地址,手机号码

小程序getPhoneNumber获取用户微信认证时的手机号码

小程序解密getPhoneNumber中的手机号码

小程序码合并到推广海报

小程序推广海报中几个重要参数

获取小程序码中的参数,scene场景值

购买课程

小程序html转为wxml,微信小程序用wxParse解析html点评

小程序html转为wxml,微信小程序用wxParse解析html课件下载

下载视频课件和源代码

购买课程 点击下载课件

本课程大纲

你什么时候需要自己开发小程序-微信小程序支付开发1

微信开发进化论-微信小程序支付开发2

小程序通过get方式与服务器通信-微信小程序支付开发3

小程序通过post方式与服务器通信-微信小程序支付开发4

小程序开发涉及到的知识结构和层面-微信小程序支付开发5

充值小程序参考案例-微信小程序支付开发6

实现充值小程序前端页面布局-微信小程序支付开发7

小程序获取保存session key-微信小程序支付开发8

获取用户openid-微信小程序支付开发9

小程序开发调试函数-微信小程序支付开发10

小程序解码wx.getUserInfo中的decryptData数据-微信小程序支付开发11

小程序生成统一支付prepay_id相关配置和类介绍-微信小程序支付开发12

生成小程序支付的prepay_id-微信小程序支付开发13

生成小程序支付签名paysign-微信小程序支付开发14

实现小程序支付-微信小程序支付开发15

异步处理小程序支付结果notify_url-微信小程序支付开发16

小程序发送模板消息template-微信小程序支付开发17

获取小程序模板消息的formId-微信小程序支付开发18

小程序提交表单后发送模板消息-微信小程序支付开发19

小程序支付后发送模板消息-微信小程序支付开发20

小程序支付开发案例总结-微信小程序支付开发21

小程序二维码开发,微信小程序码开发

php开发生成小程序二维码,PHP生成微信小程序码

小程序三级分销推广海报,php开发小程序

小程序解析html的3种常用方法,小程序html转wxml

小程序html转为wxml,微信小程序用wxParse解析html

小程序rich-text解析html网页,小程序显示html5标签内容

小程序设置web-view业务域名

小程序web-view打开html网页内容

小程序wx.chooseAddress获取用户收货地址,手机号码

小程序getPhoneNumber获取用户微信认证时的手机号码

小程序解密getPhoneNumber中的手机号码

小程序码合并到推广海报

小程序推广海报中几个重要参数

获取小程序码中的参数,scene场景值

购买课程

交流社区

微信开发QQ群:274952558