微信小程序将html转为wxml(超详细)

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

到GitHub - icindy/wxParse: wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析下载

这里我直接上代码了,不是太难,百度也有很多

先看一下我的数据结构

创建一个common文件夹,把wxParse放进去

在需要的页面js里面引用

const wxParse = require('../../common/wxParse/wxParse')

getBriefIntroduction: function() {
    let _this = this;
    serve({
      url: '/api/user/user/ourself'
    }).then((res) => {
      if(res.data.code == 1) {
        let article = res.data.data.content;            // html
        wxParse.wxParse('article', 'html', article, _this, 5);
      }
    }).catch((err) => {
      console.log(err)
    })
  },

这是我的请求方式,用自己的方式就好

js主要代码

let article = res.data.data.content;            // html
        wxParse.wxParse('article', 'html', article, _this, 5);

然后在wxml用绑定数据

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

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

两行代码不做过多的解释了

最后在wxss里面引用样式

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

以上就是所有代码了,有什么疑问可以在下方留言讨论

如果对你有用，关注一下博主的小程序，登录一下给予支持，以后有什么开源好用的源码都会上传到小程序

 

官方wxParse有很多警告,我已经处理过了,需要的可以下载wxParse.zip_html转wxml-互联网文档类资源-CSDN下载