29. WeChat アプレット (コンポーネント -- 基本コンテンツ コンポーネント)

WeChat ミニ プログラム (コンポーネント – 基本コンテンツ コンポーネント)

序文

(1) アイコン アイコン コンポーネント
(2) プログレス プログレス バー コンポーネント
(3) テキスト テキスト コンポーネント
(4) 拡張: リッチ テキスト エディタ UE および UM
(5) リッチ テキスト リッチ テキスト コンポーネント

基本的なコンテンツ コンポーネント

(1) icon アイコン コンポーネント component
属性の長さ単位のデフォルトは px で、入力単位 (rpx/px) は 2.4.0 以降でサポートされています
ここに画像の説明を挿入
(1) アイコン アイコン コンポーネント タイプ タイプ パラメータ

ここに画像の説明を挿入
(1) アイコン アイコン コンポーネント

ここに画像の説明を挿入
ここに画像の説明を挿入
(2) プログレスバーコンポーネントコンポーネント
プロパティの長さの単位はデフォルトでpx、入力単位(rpx/px)は2.4.0から対応

基本的な表示プロパティ
ここに画像の説明を挿入

色属性

ここに画像の説明を挿入

アニメーション プロパティ
ここに画像の説明を挿入
(3) テキスト テキスト コンポーネント

基本属性
ここに画像の説明を挿入

属性スペース
ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入
デコードの正当な値は、文字エンティティを解析できます
ここに画像の説明を挿入

(4)拡張:リッチテキストエディタ
ここに画像の説明を挿入

リッチ テキスト エディター

(4) 公式な説明の前に、すべてのバックグラウンド エディターが編集された後、[公開] をクリックすると、エディターのコード セグメントが表示用にフロント ページにスプライスされることを最初に明確にしておく必要があります。

例えば、リッチテキストエディタ UE(UEditor)や UM(UeditorMINI)は、エディタ内のコンテンツを html に変換し、バックグラウンドで編集後、フロントページに表示します。同様に、リッチ テキスト エディタを使用してミニ プログラムのバックグラウンドで記事を公開する場合、ミニ プログラム ページに正常に表示される必要があります。


したがって、アプレット ページは htmlタグを解析できる必要があります

最初に ul>li を直接書いて試してみてください

ここに画像の説明を挿入

検証の結果、アプレットが HTML ul タグ要素を正常に表示できないことがわかり、ここで rich-text リッチ テキスト コンポーネントが必要になります。

場合:

ここに画像の説明を挿入

ケースの書き換え: 次に、ノードの html 文字列を変更します。

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入
ノード属性は
、タイプによって区別される 2 つのタイプのノードをサポートするようになりました, これらは、要素ノードとテキスト ノードです. デフォルトは要素ノードです. リッチ テキスト領域に表示される HTML ノード要素ノード: type = node
ここに画像の説明を挿入

テキスト ノード: タイプ = テキスト
ここに画像の説明を挿入

信頼できる HTML ノードと属性は、
class と style 属性をグローバルにサポートしますが、id 属性はサポートしません

信頼できる HTML ノード: a、abbr、address、article、aside、b、bdi、bdo、big、blockquote、br、caption、center、cite、code、col、colgroup、dd、div、dl、dt、em、footer、 h1-h6、ヘッダー、hr、img (属性 alt、src、高さ、幅)、li、ol、p、span、テーブル関連、ul

ノードの型は配列です

ここに画像の説明を挿入
ここに画像の説明を挿入

分析結果

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

分析結果

ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

分析結果

ここに画像の説明を挿入

ご質問やご不明な点がございましたら、メッセージを残して編集者までご連絡ください。! ! !

訪問していただきありがとうございます! ! !

おすすめ

転載: blog.csdn.net/weixin_45582846/article/details/103452545