微信小程式和H5的祕密
如何使微信小程式解析 H5檔案
前段時間,終於千呼萬喚出來的微信小程式,可謂是坑苦了廣大程式猿了.下面將就我所遇到的問題做一個總結
由於微信的編寫檔案不再是html格式,所以也無法解析 html程式碼,這個著實令人難過. 我在用網上的API介面獲取資料時, 遇到了一個大坑, 那就是 API返回的資料竟然是 含有標籤的字串, 讓我無從下手, 在嘗試過正則失敗後, 不斷在網上看有沒有可以解析的外掛, 終於讓我找到了, 那就是 wxParse-微信小程式富文字解析元件, 它支援Html及markdown轉wxml視覺化, 下面不多說, 程式碼貢獻上:
API返回的資料:
注意:
message 對應的 value 值 為
"<h2>材料 </h2><hr> \n<p>雪梨一個、冰糖適量、牙籤幾根</p> <h2>做法 </h2><hr> \n<p>1、雪梨洗好,用刀切去尾部,用勺子挖出梨核,最好挖乾淨,不然影響口感。 </p> \n<p>2、放幾顆冰糖進去,插幾根牙籤,隔水蒸30分鐘左右就OK了。</p>",
"name": "冰糖雪梨"
這個小程式是無法解析的, 所以, 重點來了.
wxParse-微信小程式富文字解析元件, 通過這個元件, 小程式就可以解析部分的 html檔案 還包括 表情包哦, 下面是大禮包, 我將演示如何使用:
- 下載官方demo
- Copy資料夾wxParse,與 pages檔案目錄同級
//wxParse目錄
- wxParse/
-wxParse.js(必須存在)
-html2json.js(必須存在)
-htmlparser.js(必須存在)
-showdown.js(必須存在)
-wxDiscode.js(必須存在)
-wxParse.wxml(必須存在)
-wxParse.wxss(必須存在)
-emojis(可選)
3.引入必要檔案
3.1 在目標 wxml檔案中新增以下程式碼
<import src="../../wxParse/wxParse.wxml" />
<view class="wxParse">
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>
3.2 在 wxss檔案 中新增以下程式碼(可以是全域性wxss,也可以是目標的 wxss檔案)
@import "/wxParse/wxParse.wxss";
3.3 資料繫結(在目標的 js檔案中新增)
//在 onLoad 函式裡新增哦,
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.你已成功,不信你看模擬器
相關推薦
微信小程式和H5的祕密
如何使微信小程式解析 H5檔案 前段時間,終於千呼萬喚出來的微信小程式,可謂是坑苦了廣大程式猿了.下面將就我所遇到的問題做一個總結 由於微信的編寫檔案不再是html格式,所以也無法解析 html程式碼,這個著實令人難過. 我在用網上的API介面獲取資料時,
微信小程式與H5相互跳轉和傳遞資料
這是小程式和web-vew的H5相互傳參,H5使用小程式的微信支付的程式碼 H5部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--<meta
微信小程式和公眾號區別
小程式和公眾號都是微信的產品;小程式自上市以來一直都是很火爆,但是他和微信公眾號有什麼區別呢?很多人都不清楚這兩者之間有什麼區別,在這裡,小程式開發公司城市網站聯盟(www.cswz.cn)給你分享下小程式和微信公眾號有什麼區別: 公眾號是內容媒體和O2O生活服務的資訊化平臺;小程式是一種
微信小程式和APP的區別
微信小程式是一種不需要安裝下載就可以使用的應用,使用者通過掃一掃或搜尋開啟應用。使用者不用擔心安裝解除安裝佔用記憶體消耗時間。小程式開發門檻相對APP而言難度大大降低,能夠滿足普遍的開發需求。自今年1月,微信之父張小龍釋出小程式正式上線後,創造了一股新商業熱潮。 事實上,小程式的“野心”遠
微信小程式跳H5頁面
主頁面:index.wxml 主頁面:index.js ↑跳轉到另一個wxml頁面→recharge.wxml recharge.wxml web-view中設定跳轉h5的連結,可以加上需要的引數: tips: 1.首先,web-view元件的屬性src,正如你說看到的,這個就是設
基於Taro + Dva構建的適配不同端(微信小程式、H5、React-Native 等)的時裝衣櫥
前言 Taro 是一套遵循 React 語法規範的 多端開發 解決方案。現如今市面上端的形態多種多樣,Web、React-Native、微信小程式等各種端大行其道,當業務要求同時在不同的端都要求有所表現的時候,針對不同的端去編寫多套程式碼的成本顯然非常高,這時候只編寫一套程式碼就能夠適配到多端的能力就顯得極
微信小程式和vue的賦值和迴圈渲染的區別
小程式存放資料的結構 data:{ data:'' } VUE存放資料的結構 data(){ return{ data:'' } } 微信小程式賦值 this.setData({ data:newdata &nbs
微信小程式和後臺API通訊
1、微信小程式不能直接訪問後臺的介面。 2、通過內網穿透實現,暴漏到公網。 3、這裡使用的工具是 ngrok.com 使用ngrok進行內網穿透 1、開啟https://dashboard.ngrok.com,註冊賬號登陸,download 下載適合自己電腦的。
個人微信小程式和企業微信小程式的區別
17年3月27日,微信小程式開放個人主體註冊小程式,相信很多開發者都申請了小程式。但個人主體小程式和組織主體小程式有什麼不同呢?相對而言有什麼限制? 01介面限制 個人主體的小程式肯定是無法完整地使用小程式的介面和能力的,具體哪些介面用不了呢? 微信支付 如
【小程式社群】小程式社群提供微信小程式和支付寶小程式相關的資訊、開發教程、開發指南、小程式DEMO等資源。小程式開發社群是國內微信小程式和支付寶小程式開發的領先社群,這裡有最新的功能、最全的DEMO、最多的教程和最
小程式社群 小程式社群提供微信小程式和支付寶小程式相關的資訊、開發教程、開發指南、小程式DEMO等資源。小程式開發社群是國內微信小程式和支付寶小程式開發的領先社群,這裡有最新的功能、最全的DEMO、最多的教程和最...
微信小程式和微信公眾號開發注意事項(有些是從微信開發文件中摘抄出來的)
先從簡單的說起 (會提醒你的一些注意事項) 1、微信公眾號和小程式名稱可以由中文、數字、英文。長度在3-20個字元之間,一箇中文字等於2個字元。 2、微信公眾號和小程式名稱不得與公眾平臺已有的訂閱號
微信小程式和微信小程式之間的跳轉和傳參示例程式碼附講解
可以掃碼加我微信,承接小程式開發。 微信小程式開發交流qq群 173683895 、 526474645 ; 正文: 一:微信小程式跳轉 使用限制 需要使用者觸發跳轉 從 2.3.0 版本開始,若使用者未點選小程式頁面任意位置,則開發者將無法呼叫此介面自動
mpvue 同時開發和打包成H5和微信小程式(簡易模板)
開始 這個專案是一個mpvue 的demo, 沒有具體的業務實現方法,只有簡單的頁面切換,還有常用的一些方法封裝,總體提供分開打包開發的思路 目錄結構 . ├── README.md ├── build
微信小程式中資料的儲存和獲取
/儲存資料 try { wx.setStorageSync('key',this.data.radioCheckVal2) //key表示data中的引數
【微信小程式】在js中匯入第三方js或自己寫的js,使用外部js中的function的兩種方法 import和require的區別使用方法
如下 定義了一個外部js檔案,其中有一個function import lunaCommon from '../lunaCommon.js'; var ctx = wx.getStorageSync("ctx"); var filter = "/ms-code"; var apis
微信小程式登入-openid和unionid
本文轉自https://www.cnblogs.com/yaoyuqian/p/8203792.html 我們一般都是先獲取到微信的 unionid,然後再通過 unionid 去登入自己的網站,就可以關聯到使用者在自己網站上的 user_id,但是在小程式登入中,有時候可以獲取到
H5(Taro+dvajs)微信小程式
dva.js +antd 上手 https://www.jianshu.com/p/c7b3b9c98d04 什麼是ANTD ??? antd-mobile - Ant Design Mobile - 移動端設計規範 antd - 教程中心 - 阿里雲 &nbs
坑:微信小程式wx.request和wx.uploadFile中傳引數的區別
微信小程式中通過元件<form>提交表單的時候,在js中通過e.detail.value得到所提交表單的json格式資料。一般提交表單我們都是通過wx.request請求,提交表單資料,通過引數data傳資料, wx.request({ url: 'test.php', //僅為示例,
promise和callback在微信小程式非同步呼叫中的應用
本部落格所有文章採用的授權方式為 自由轉載-非商用-非衍生-保持署名 ,轉載請務必註明出處,謝謝。 宣告: 本部落格歡迎轉發,但請註明出處,保留原作者資訊 部落格地址:孟阿龍的部落格 所有內容為本人學習、研究、總結。如有雷同,實屬榮幸 背景 近期,因為工作需要在研
在微信小程式裡使用 watch 和 computed
在開發 vue 的時候,我們可以使用 watch 和 computed 很方便的檢測資料的變化,從而做出相應的改變,但是在小程式裡,只能在資料改變時手動觸發 this.setData(),那麼如何給小程式也加上這兩個功能呢? 我們知道在 vue 裡是通過 Object.defineProperty 來實現資