HTML を WeChat アプレットに変換する WXML のケース

この記事では、一定の参考価値のある HTML を WXML に変換する方法を紹介します。WeChat アプレット開発を学習している友人の役に立てば幸いです。

HTML を WeChat ミニ プログラムに変換する WXML のケース

WeChat ミニ プログラムの開発はフロントエンド寄りですが、発展途上ですが、文法構造は異なります。たとえば、wxml は html とは根本的に異なります。a タグを例に挙げます。Wxml は a タグをサポートしていません。また、wxml は html と互換性がありません。次のエディタはこの問題を分析し、html を変換する方法を分析します。 wxml。具体的な手順は次のとおりです:

1. https://github.com/icindy/wxParse からダウンロード

2.1 使用する必要がある xxx.js ファイルに WxParse モジュールを導入します

var WxParse = require('../../wxParse/wxParse.js');

2.2 WxParse.css を使用している Wxss に導入します (app.wxss に含めることができます)。これはグローバル app.wxss

@import "/wxParse/wxParse.wxss";

3 であることに注意してください。データ バインディング

var article = &#39;<div>我是HTML代码</div>&#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. テンプレートのリファレンス

//这里data中article为bindName<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

次に、上記の手順に従って、私の個人ブログ用に作成された WeChat アプレットのケースを分析します。ここでは例としてダウンロード セクションを取り上げます

私のダウンロードセクションはインデックスであり、クリックして入力する詳細セクションはエントリです。これは、クリックして詳細を入力すると、ドロップするデータが HTML 形式であるためです。詳細には、p、div、a などのタグが含まれます。これは必要な効果ではありません。変換する必要があるのはすべてです対応するミニプログラムの wxml 形式に変換します。

1. ダウンロードした wxParse フォルダーをプロジェクトに配置します。ここに wxParse ディレクトリを配置するだけです。図を見ると、pages と同じレベルのディレクトリであることがわかります。

2. 表示する必要があるページに導入しました: var WxParse = require('../../wxParse/wxParse.js'); すべてのスタイルが必要なわけではないので、グローバル wxParse.wxss コメントしたところです。

3. このステップは、データ バインディングという最も重要かつ重要なステップです。私のデータはすべてデータベースから取得された実際のデータであるため、これにはリストのクリックから詳細イベントまでのデータのロードが含まれます。興味がある場合は、「WeChat アプレットでデータベースから実際のデータをロードする方法」を参照してください。すべてのデータ バインディングは実際にはコンテンツです。

 var article = res.data.content;//article是取到的数据
 var that = this;
 WxParse.wxParse('article', 'html', article, that, 5);

4.必要なテンプレート、つまりentry.wxml
#

 <template is="wxParse" data="{{wxParseData:article.nodes}}"/>

にバインドされたばかりのデータを参照します。最終的な効果は次のとおりです

#WeChat アプレット開発チュートリアルの詳細については、

PHP 中国語 Web サイト

に注目してください。

以上がHTML を WeChat アプレットに変換する WXML のケースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。