WeChat アプレットに H5 ファイルを解析させる方法-ミニプログラム開発-php.cn

WeChat アプレットに H5 ファイルを解析させる方法

巴扎黑

リリース： 2017-04-30 10:16:02

オリジナル

2149 人が閲覧しました

要約: ネットユーザーはよく、WeChat アプレットに H5 ファイルを解析させる方法、または H5 Web ページを APP にカプセル化する方法を尋ねます。公式の答えは次のとおりなので、最初はこれは不可能だと思いました。各ミニプログラムページは、index.js、index.wxm... など、同じパスにある同じ名前の 4 つの異なるサフィックスファイルで構成されています。 H5 Web ページを APP にカプセル化するための H5 ファイルまたは類似のものはありますか?公式の答えは次のとおりなので、最初はこれは不可能だと思いました:

各ミニプログラムページは、同じパスにある同じ名前を持つ 4 つの異なるサフィックスファイルで構成されます。 js、index.wxml、index.wxss、index.json。接尾辞 .js の付いたファイルはスクリプトファイル、接尾辞 .json の付いたファイルは構成ファイル、接尾辞 .wxss の付いたファイルはスタイルシートファイル、接尾辞 .wxml の付いたファイルはページ構造ファイルです。

上記の意味はすでに非常に明らかです。翻訳:
.js は javascript

.wxss は css と同等

.wxml は html
と同等ですが、wxml と wxs の構文はs は WeChat 自体によって定義されますHTML と CSS の構文では異なります。構文が異なるため、WeChat アプレットは H5 ページをロードできません。 WeChat はプロジェクトに登録されているページしか読み込むことができず、外部リンクを開くこともできず、HTML コードを解析することもできません。これは、オンライン API インターフェイスを使用して取得した場合には非常に残念です。つまり、API から返されたデータがタグを含む文字列であることが判明したため、開始できなくなりました。正規化が失敗した後、オンラインで検索し続けました。解析できるプラグインを探し、最終的に見つけたのが、
wxParse - WeChat アプレットリッチテキスト解析コンポーネント

です。これは、Html とマークダウンの WXML 視覚化への変換をサポートしています。コードコントリビューション:

API によって返されるデータ:

注: message の対応する値は

[AppleScript] プレーンテキストビュー
WeChat アプレットに H5 ファイルを解析させる方法コードをコピー

"<h2>材料 </h2><hr>  \n<p>雪梨一个、冰糖适量、牙签几根</p>   <h2>做法 </h2><hr>  \n<p>1、雪梨洗好，用刀切去尾部，用勺子挖出梨核，最好挖干净，不然影响口感。 </p> \n<p>2、放几颗冰糖进去，插几根牙签，隔水蒸30分钟左右就OK了。</p>",
      "name": "冰糖雪梨"

ログイン後にコピー

このアプレットはできませんwxParse - WeChat アプレットリッチテキスト解析コンポーネント。このコンポーネントを通じて、アプレットは絵文字を含むいくつかの HTML ファイルを解析できます。これがギフトパッケージです。その使用方法を説明します。

公式デモをダウンロードします

Pages ファイルディレクトリと同じレベルにある wxParse フォルダーをコピーします

//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";

ログイン後にコピー

33.3 データバインディング (追加)ターゲットの JS ファイルにコピーします)

//在 onLoad 函数里添加哦,
var article = &#39;<p>我是HTML代码</p>&#39;;
/**
* 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(&#39;article&#39;, &#39;html&#39;, article, that,5);

ログイン後にコピー

4. 成功しました。シミュレーターが表示されたとは信じないでください

以上がWeChat アプレットに H5 ファイルを解析させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。