ホームページ > WeChat アプレット > ミニプログラム開発 > WeChat アプレットの H5 ファイル解析方法

WeChat アプレットの H5 ファイル解析方法

PHPz
リリース: 2017-05-01 11:02:44
オリジナル
4990 人が閲覧しました

要約: ネットユーザーはよく、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 はプロジェクトに登録されているページのみを読み込むことができ、外部リンクを開くことはできず、サーバーからデータを取得することしかできません

少し前に、WeChat で書かれたファイルは HTML 形式ではなくなったため、 HTML コードは解析できません。これは非常に悲しいことですが、オンライン API インターフェイスを使用してデータを取得したときに、API から返されたデータがラベルを含む文字列であることが判明するという大きな落とし穴に遭遇しました。正規表現を試してみましたが、失敗しました。その後、解析できるプラグインがないかネットで探し続け、最終的に見つけたのが wxParse-WeChat アプレット リッチ テキスト解析コンポーネントです。

、wxml 視覚化への Html およびマークダウン変換をサポートするコードについては、以下では詳しく説明しません。 貢献: API によって返されるデータ:

注: message に対応する値は次のとおりです。
WeChat アプレットの H5 ファイル解析方法
[AppleScript]

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


このアプレットは解析できません。ここで重要な点があります。

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


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


ページのファイル ディレクトリと同じレベルにある 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";
ログイン後にコピー


3.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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート