技術標籤：小程式

微信小程式開發雖說是比較偏向前端開發，但是它們的語法結構又不太一樣。例如，wxml跟html就有本質的不同，就拿a標籤來說吧，wxml是不支援a標籤的，還有就是wxml不相容html，下面小編就針對這個問題來分析一下怎麼才能將html轉換成wxml。具體步驟如下：

到https://github.com/icindy/wxParse下載

這裡我直接上程式碼了,不是太難,百度也有很多

先看一下我的資料結構

建立一個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有很多警告,我已經處理過了,需要的可以下載https://download.csdn.net/download/qq_42543264/14902265