1、首先下载 wxParse脚本,到https://github.com/icindy/wxParse下载,将wxParse文件夹放置到小程序根目录,即跟pages同级目录

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节点名称保持一致

小程序html转wxml,微信小程序用wxParse解析html的更多相关文章

  1. 基于小程序云Serverless开发微信小程序

    本文主要以使用小程序云Serverless服务开发一个记事本微信小程序为例介绍如何使用小程序云Serverless开发微信小程序.记事本小程序的开发涉及到云函数调用.云数据库存储.图片存储等功能,较好 ...

  2. 微信小程序全选,微信小程序checkbox,微信小程序购物车

    微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组  1.标题titl ...

  3. 微信小程序自运营器 微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营)

    自动发单,自动评价,自动评论,自动推广 微信小程序自运营器  微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营) 我们会根据你的微信公众号或微信小程序定制开发带有一定AI智 ...

  4. 【微信小程序】转载:微信小程序之购物车功能

    前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求 先来弄清楚购物车的需求. 单选.全选和取消, ...

  5. 「小程序JAVA实战」微信小程序工程结构了解(五)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-05/ 微信小程序工程结构 audio,button,canvas,checkbox 都是由4个文件 ...

  6. 小程序开发-iView Weapp微信小程序UI组件库入门使用

    iView Weapp UI组件库 今天来试试iView Weapp 这个微信小程序组件库,看看好不好用~~ 官网地址: http://inmap.talkingdata.com/wx/index_p ...

  7. 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)

    大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...

  8. 微信小程序语音识别开发过程记录 微信小程序silk转mp3 silk转wav 以及ffmpeg使用

    说说最近在开发微信小程序语音识别遇到的问题吧 最先使用微信小程序录音控件可以拿到silk格式,后来微信官方又支持mp3格式了 但是我们拿到这些格式以后,都还不能直接使用,做语音识别,因为目前百度的语音 ...

  9. 小程序开发过程中常见问题[微信小程序、支付宝小程序]

    目录 一.样式中如何使用background-image呢? 二.使用自适应单位rpx类似于rem,布局尽量使用flex布局 三.万能的{{双大括号,用于在模版中输出变量 四.你想要的基础组件和API ...

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

    前言: 本文仅汇总微信小程序移植支付宝小程序过程中遇到的一些不同的地方,详细请参考官方开发文档. 网络请求: 对于网络请求,基本上改动不大,也就支付宝小程序没有responseType属性及响应码字段 ...

随机推荐

  1. Linux下源码安装xz的方法

    xz是一个不太常见但又效率非常高的解压缩软件,安装方法如下 ,cd /usr/local/src ,wget https://tukaani.org/xz/xz-5.2.3.tar.gz //下载到/ ...

  2. webpack打包css

    1.第一种方式 1.安装css-loader和style-loader $ cnpm install css-loader style-loader --save-dev 2.引用的时候使用css-l ...

  3. C#学习笔记(35)——事件做的登录案例

    说明(2018-4-9 20:11:42): 1. 先自定义了一个登录控件,可以输入账号.密码,点击登录.然后在Form1里面拖入这个控件,要求输入账号密码正确时,点击登录,控件显示绿色,否则显示红色 ...

  4. 【javascript】定时器组件

    'use strict'; module.exports = function() { this.timer = {}; this.config = {}; // 初始化参数 this.init = ...

  5. 通过灰度线性映射增强图像对比度实现PS中的色阶

    通过灰度线性映射增强图像对比度 Halcon中如何通过灰度线性映射增强图片对比度呢?不急,我先讲点其他的. 如果你用过Photoshop,那么想必对增强图像的对比度很熟悉.在Photoshop中,我们 ...

  6. 每天学点Linux-选取命令CUT和GREP

    选取命令就是将一段数据经过分析后,取出我们所想要的.或者是经由分析关键词,取得我们所想要的那一行!一般来说,选取命令通常是针对一行一行的数据来进行分析的, 并不是整篇信息分析.cut cut命令可以将 ...

  7. 每天学点Linux-切割命令split

    一种常见的需求是,有一个比较大的文件,需要把它切割成比较小的几个文件,在Linux系统中你就可以使用Split命令了.Split命令可以将一个大的文件按照文件大小或者行数切割成小文件.Split命令的 ...

  8. 安装svn客户端后,代码不能提交

    转载:https://jingyan.baidu.com/article/e8cdb32b3312f637052badde.html

  9. linux执行python命令后没有反应,不打印日志信息

    实际的python执行的软连接是路径是/opt/python2.7/bin/python,而设置的软连接错误如下: 修改该连接,是python指向/opt/python2.7/bin/python, ...

  10. 【腾讯云的1001种玩法】 Laravel 整合万向优图图片管理能力,打造高效图片处理服务

    版权声明:本文由白宦成原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/574549001488234358 来源:腾云阁 h ...