小程序官方明確給出他們現在不支持外鏈,我們再也不能像原來一樣用一個a標簽,鏈接一個我們程序外的頁面了。
其實想想,小程序不支持dom操作,如果支持外鏈的話,那豈不是又開始支持dom操作了嗎,jquery之類的插件又可以用了,顯然這和微信對小程序的定義有出入,所以不支持外鏈html似乎是可以理解的。
這引起一個問題,如果我們已有的成型的項目而我們項目有很多集成別的系統的鏈接,而我們想抓住小程序這個噱頭做一個小程序版本的,似乎變成不能了。
拿我自己的項目為例:我們是一個智能機器人小樂項目,可以很好的解決聯想電腦用戶的問題,此為背景。
此處有兩類需要解析html的地方,用到了兩個方式,第一個方式是我自己寫的,只能解析層級只有兩到三層的html代碼,第二個方式是別人已經寫好的插件(https://github.com/icindy/wxParse),但是你要達到你想要的效果就需要對這個插件進行修改。首先來說簡單的
第一種:
機器人的聊天是用戶發送問題,后端返回的答案是html格式的(項目已成型),這時候我們要做的第一步是把段html代碼翻譯成小程序自己的語言。
返回值為:
{"content":"啟動速度和電腦配置及系統安裝軟件的多少都有關系,以下是小樂搜集到的優化方法,您可以嘗試\n1.您可以通過調整啟動項和服務項提速,<a href=\"http:\/\/robotterm.ecare365.com\/ZmptY2NtYW5hZ2Vy\/p4data\/Rdata\/Rfiles\/1581.html\">➢點擊這里<\/a>查看方法\n\n2.如果是筆記本電腦,可嘗試將電源管理方案調整至高性能,<a href=\"http:\/\/robotterm.ecare365.com\/ZmptY2NtYW5hZ2Vy\/p4data\/Rdata\/Rfiles\/xitongdianyuanguanli.html\">➢點擊這里<\/a>查看操作方法\n\n3.您可以使用小工具優化加速您電腦的系統(<a href=\"http:\/\/tsonline.lenovo.com.cn\/robot\/robot_web_app\/api\/tools_weixin.html?id=1531144&name=8s8_t137\">➢點擊這里填寫您的郵箱<\/a>接收小工具,在電腦上運行)\n\n85%的用戶通過以上方法解決了此問題\/:strong\n\n親~不要着急哦,請回復數字“0”小樂幫您轉接工程師","msgtype":"text","code":1000,"success":true}
下邊開始轉化,
思路:第一步首先把這個html代碼轉化成json,由於這個一部分數據層級只有兩層,所以我們生成的json就不考慮層級,按照順序生成,但是需要注意的是里邊含有a標簽,這時候我們需要做的是把a標簽變成navigator標簽,或者是轉成view標簽,加上點擊事件調用navigator事件。
js生產json后wxml用template循環獲取
這樣就可以生成我們想要的頁面
第二種情況:
如上圖所示,我們解析了a標簽,但是這個a標簽對應的是一個html的方案,而解析整個html我們用上邊的方式就不行了。
這時候我們需要時點擊a標簽時用請求 wx.request請求這個html的url,獲取到html后用html2json直接轉化成json,https://github.com/icindy/wxParse在這里你可以得到獲取轉化成json以及解析成wxml的例子。
需要注意的是你拿到這個例子后展示你的頁面會很差強人意,這時候你只能修改它的邏輯,按照你們的模版進行進一步轉化。
這樣一個簡單的小程序的聊天就形成了,即使里邊有外鏈我們也可以很好的解決