微信小程序选项卡功能开发步骤与方法全解析
310
2024-07-29
本篇文章介绍了如何将html转为wxml,具有一定的参考价值,希望对学习微信小程序开发的朋友有帮助!
将HTML转为微信小程序的WXML案例
微信小程序开发虽说是比较偏向前端开发,但是它们的语法结构又不太一样。例如,wxml跟html就有本质的不同,就拿a标签来说吧,wxml是不支持a标签的,还有就是wxml不兼容html,下面小编就针对这个问题来分析一下怎么才能将html转换成wxml。具体步骤如下:
1、到https://github.com/icindy/wxParse-
2.1 在你需要使用的xxx.js文件中引入WxParse模块
1 |
|
2.2 在使用的Wxss中引入WxParse.css,可以在app.wxss,注意是全局的app.wxss
1 |
|
3、数据绑定
1 |
|
4、模版引用
1 |
|
下面我按照以上步骤,分析一下我的个人博客做的微信小程序案例,这里以-板块为例
我的-板块是index,点击进入的详情板块是entry。正是因为我点击进入详情的时候,我掉的数据是我html格式,详情里面会带一些p,div,a这样的标签,这不是我们需要的效果,所有我需要转换成小程序所对应的wxml格式。
一、我把-好了的wxParse文件夹放到我的项目中,这里只需要放wxParse目录就行了,看图片会发现是跟pages同级的目录。
二、我在我需要展现的页面引入:var WxParse = require('../../wxParse/wxParse.js');因为我不需要样式所有,全局的wxParse.wxss我就注释了。
三、这一步是最关键也是最重要的一步了,数据绑定。因为我的数据全部是从数据库取的真实数据,这里就涉及到从列表点击到详情事件加载数据,感兴趣的可以看下《微信小程序如何加载数据库真实数据》。所有我的数据绑定其实就是content内容。
1 2 3 |
|
四、在我需要的模板中引用刚刚绑定的数据,也就是entry.wxml中
1 |
|
最终效果如下所示
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~