微信小程序将html转为wxml开发案例

微信小程序开发虽说是比较偏向前端开发，但是它们的语法结构又不太一样。例如，wxml跟html就有本质的不同，就拿a标签来说吧，wxml是不支持a标签的，还有就是wxml不兼容html，下面小编就针对这个问题来分析一下怎么才能将html转换成wxml。具体步骤如下：

1、到https://github.com/icindy/wxParse下载

2.1 在你需要使用的xxx.js文件中引入WxParse模块

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

2.2 在使用的Wxss中引入WxParse.css,可以在app.wxss，注意是全局的app.wxss

@import "/wxParse/wxParse.wxss";

3、数据绑定

var article = '<div>我是HTML代码</div>';/** * WxParse.wxParse(bindName , type, data, target,imagePadding) * 1.bindName绑定的数据名(必填) * 2.type可以为html或者md(必填) * 3.data为传入的具体数据(必填) * 4.target为Page对象,一般为this(必填) * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选) */var that = this; WxParse.wxParse('article', 'html', article, that,5);

4、模版引用

//这里data中article为bindName<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

下面我按照以上步骤，分析一下我的个人博客做的微信小程序案例，这里以下载板块为例

我的下载板块是index，点击进入的详情板块是entry。正是因为我点击进入详情的时候，我掉的数据是我html格式，详情里面会带一些p,div,a这样的标签，这不是我们需要的效果，所有我需要转换成小程序所对应的wxml格式。

一、我把下载好了的wxParse文件夹放到我的项目中，这里只需要放wxParse目录就行了，看图片会发现是跟pages同级的目录。

二、我在我需要展现的页面引入：var WxParse = require('../../wxParse/wxParse.js');因为我不需要样式所有，全局的wxParse.wxss我就注释了。

三、这一步是最关键也是最重要的一步了，数据绑定。因为我的数据全部是从数据库取的真实数据，这里就涉及到从列表点击到详情事件加载数据，感兴趣的可以看下《微信小程序如何加载数据库真实数据》。所有我的数据绑定其实就是content内容。

var article = res.data.content;//article是取到的数据

var that = this;

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

四、在我需要的模板中引用刚刚绑定的数据，也就是entry.wxml中

最终效果如下所示

微信小程序将html转为wxml开发案例相关推荐

微信小程序+Python Flask后端实战开发案例
微信小程序安装因为作者操作系统是Ubuntu16.04 所以在安装小程序开发平台时也踩了不少坑首先下载项目和初始化 git clone https://github.com/cytle/wech ...
php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例
本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家. 一.知识点 1.实现动态显示和隐藏某个控件列表1data:{ open:false }, showitem:function() ...
分享一个微信小程序编辑页面的WXML模板
分享一个微信小程序编辑页面的WXML模板最近在进行微信小程序开发的时候经常会碰到编辑页面的搭建,大致格式如图所示: 顶部:返回按钮和确认按钮,在中间还可以自行加上一些别的元素. 中间部分:编辑的标题 ...
微信小程序图片无法存入云开发数据库，求解决
微信小程序图片无法存入云开发数据库,求解决上传图片的js代码片段上传图片的js代码片段上传图片的js代码片段,觉得自己代码的没错,也能打印出来上传的图片地址,但是发现并没有存进数据库,求大神指点 ...
小程序开发语言python_微信小程序是用什么语言开发的呢
原标题:微信小程序是用什么语言开发的呢说到微信小程序可能大部分只是一知半解,您是否清楚小程序是用什么来开发的?如果您不太清楚,那么多美源小程序小编来告诉您小程序开的具体. 微信小程序是什么语言开发的 ...
微信小程序服务器端用什么语言开发?
点击阅读原文微信小程序服务器端用什么语言开发? 首先,比如微信二次开发,可以用java或者php 来做服务器端语言来进行二次开发,那小程序呢?文档写着.js负责业务逻辑,难道服务器端就是纯JS实现 ...
微信小程序使用真机或开发工具进行http请求开发测试亲测有效
微信小程序使用真机或开发工具进行http请求开发测试 1使用微信开发这工具进行http请求的配置 2:真机进行http请求微信开发这平台要求上线微信小程序配置的合法域以及网络请求名必须是https, ...
微信小程序将时间戳转为日期格式
微信小程序,时间戳转为日期格式在小程序中使用时间选择器时,获取到的时间可能是一个时间戳,这并不是我们想要的,这时候我们得将获取到的时间戳进行转换将时间戳转为时间格式 //转换为时间格式format ...
微信小程序：全新独家云开发微群人脉
今天给大家带来一款云开发版本的微群人脉小程序源码该版本属于采集版本(群二维码自动采集) 该版本属于云开发版本(免服务器和域名) 这是一款不怕封小程序版本 PS:支持用户自主发布那一款还是有点危险因为 ...

微信小程序将html转为wxml开发案例

微信小程序将html转为wxml开发案例相关推荐

最新文章

热门文章