WeChat ミニプログラム: ページレイアウトの概要

1. 基本ラベル (ビューと同様):

1. <text> テキストタグ:

<text>文本内容</text>

2. <image> イメージタグ:

プロパティの説明:

src：图片本地路径或URL
mode：缩放或裁剪模式，值：scaleToFill(拉伸填满)、aspectFit(按长边等比缩放)、aspectFill(按短边等比缩放)、widthFix(按高度等比缩放)、heightFix(按宽度等比缩放)、top(保留顶部    )、bottom(保留底部)、center(保留中间)、left(保留左侧)、right(保留右侧)、topleft(保留左上)、topright、bottomleft、bottomright
webp：支持webp格式
lazy-load:是否懒加载
show-menu-by-longpress：长按弹出分享

(1). .wxml で画像を表示します。

<image class="样式" src="http://..." mode="aspectFit" show-menu-by-longpress="true" />

3. <アイコン> アイコンラベル:

プロパティの説明:

type：显示哪种图标，值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size：图标宽高值
color：图标颜色

(1). アイコンは .wxml に表示されます。

<icon type="waiting" size="40" color="#e0e0e0" />

4. <progress> 進行状況バーのラベル:

プロパティの説明:

percent：进度值，0-100
show-info：进度条右侧显示xx%，值：true、false
font-size：进度条右侧百分比文字字号
border-radius：进度条两侧圆角大小
stroke-width：进度条高度
color：进度条颜色
backgroundColor：进度条背景色
active：显示从左到右动画(1次)
active-mode：动画，值：backwards(重新)、forwards(继续)
duration：进度增加1%所需毫秒数
bindactiveend：动画完成事件

(1).進行状況バーが .wxml に表示されます。

<progress percent="10" show-info="true" border-radius="0" font-size="20" stroke-width="30" color="#b9d1a6" backgroundColor="#e0e0e0" active="true" active-mode="forwards" duration="200" />

5. <rich-text> には html タグ (サポート部分) が含まれます。

(1). .js で HTML タグ文字列を定義します。

const htmlStr =
`<div>
  <h1>文本1</h1>
</div>
`
Page({
  data: {
    htmlStr: htmlStr,    //给页面中<rich-text>设值
  },
  ...
})

(2). .wxml ページでは、HTML タグ文字列が使用されます。

<rich-text nodes="{
   
   {htmlStr}}" />

2. コンテナラベル (ViewGroup と同様):

1. <view> 空のコンテナタグ (<div> と同様、レイアウトはスタイルによって制御されます):

(1) スタイルを定義します。例:

.样式名 {
  width: 宽值rpx;
  height: 高值rpx;
  background-color: white;
  ...
}

(2) <ビュー> を使用します。

<view class="样式名">
  ...子布局
</view>

2. <scroll-view> スクロールラベル (ScrollView と同様):

例証します:

scroll-x：true允许横向滚动，需在样式中指定宽度
scroll-y：true允许纵向滚动，需在样式中指定高度
enable-passive：true开启passive特性，优化滚动性能

使用：

<scroll-view class="样式名" scroll-y="true" scroll-x="true" enable-passive="true">
  ...子布局
</scroll-view>

3. <swiper>+<swiper-item> はリストを実現します (ListView と同様)。

(1) データの初期化：

Page({
  data: {
    listData: [ ...]  //listData为自定义key名
  },
})

(2) リストと項目のスタイルを定義します。

.swiper_class { //列表样式
  width: 宽度px;
  height: 高度px;
  ...
}
.swiper_item_class { //item样式
  width: 宽度px;
  height: 高度px;
  ...
}

(3) <swiper>+<swiper-item> 実装リスト:

プロパティの説明:

vertical：滑动方向是否为纵向，无此字段时不会滚动

例：

<swiper class="swiper_class" vertical="true">
    <swiper-item class="swiper_item_class" wx:for="{
   
   {listData}}" wx:for-item="item">
      ...item布局
    </swiper-item>
</swiper>

4. <root-portal> はダイアログボックスを実現します。

プロパティの説明:

enable：true从页面中脱离出来

例：

<root-portal enable="true" wx:if="{
   
   { isShow }}">
  ...子布局
</root-portal>

5. <page-container> はポップアップウィンドウを実装します。

プロパティの説明:

show：true显示弹窗，false隐藏弹窗
overlay：true显示遮罩层
position：弹出位置，值：top、bottom、right、center
round：true显示圆角

例：

<page-container show="true" overlay="true" position="top" round="true">
  ...子布局
</page-container>

3. フォームラベル:

1. <ボタン> ボタンのラベル:

size：按钮大小，值：mini为小尺寸、default为默认(大)
type：按钮样式，值：default为绿字灰背景(带框时黑字黑框)、primary为白字绿背景(带框时绿字绿框)、warn为红字灰背景(带框时红字红框)
plain：是否带框无背景
disabled：是否禁用按钮(灰色不能点击)
loading：按钮左内是否显示加载中图标
form-type：按钮在表单中类别，值：submit为提交、reset为重置表单

(1). ボタンは .wxml で表示されます。

<button size="mini" type="default" plain="true" form-type="submit">按钮</button>

2. <input> 入力ボックスのラベル:

プロパティの説明:

value：输入框的值
type：输入框类型，值：text(标准键盘)、number(数字键盘)、idcard(身份证键盘)、digit(带小数点数字键盘)、safe-password(密码键盘)、nickname(昵称键盘)
password：是否为密码框
placeholder：提示文字
placeholder-class：提示文字样式类
disabled：是否禁用输入
maxlength：最大长度
focus：获得焦点
confirm-type：回车键类型，值：send(发送)、search(搜索)、next(下一个)、go(前往)、done(完成)
confirm-hold：按回车键时是否隐藏键盘
adjust-position：弹出键盘时是否上推界面

(1). 入力ボックスは .wxml で表示されます。

<input type="text" value="dd" placeholder="提示文字" maxlength="10" focus="true" adjust-position="true"/>

3. <チェックボックス> チェックボックスのラベル:

プロパティの説明:

value：checkbox标识，选或不选时触发checkbox-group.bindchange中的函数
disabled：是否禁用
checked：是否选中
color：复选框颜色
bindchange：复选框选中事件监听方法，通过e.detail.value获取选中的<checkbox>列表

(1). チェックボックスは .wxml に表示されます。

<checkbox-group bindchange="onCheckboxChange">
  <checkbox value="checkbox_1" checked="true"></checkbox>
  <checkbox value="checkbox_2" checked="false"></checkbox>
</checkbox-group>

(2). .js で check イベントをリッスンします。

Page({
  onCheckboxChange(e){ //复选框选中事件监听
    console.log("onCheckboxChange 选择改变 selectList: " + e.detail.value);
  }
})

4. <ラジオ> ラジオボタンラベル:

プロパティの説明:

value：radio标识，选或不选时触发radio-group.bindchange中的函数
disabled：是否禁用
checked：是否选中
color：单选框颜色
bindchange：单选框选中事件监听方法，通过e.detail.value获取选中的<radio>

(1). ラジオボタンは .wxml に表示されます。

<radio-group bindchange="onRadioChange">
  <radio value="radio_1" checked="true" />
  <radio value="radio_2" checked="false" />
</radio-group>

(2). .js でラジオイベントを聴きます。

Page({
  onRadioChange(e){ //单选框选中事件监听
    console.log("onCheckboxChange 选择改变 selectItem: " + e.detail.value);
  }
})

5. <スライダー> ドラッグ可能な進行状況バーのラベル:

プロパティの説明:

min：进度最小值，默认0
max：进度最大值，默认100
step：进度步长，值>0且能被(max - min)整除
disabled：是否禁用
value：当前进度值
color：可拖动按钮右侧进度条颜色
activeColor：可拖动按钮左侧进度条颜色
backgroundColor：进度条背景色
block-size：滑块大小值
block-color：滑块颜色
show-value：进度条右侧是否显示进度值
bindchange：进度条监听方法，通过e.detail.value获取进度值

(1). ドラッグ可能な進行状況バーが .wxml に表示されます。

<slider bindchange="onSliderChange" color="#CC6600" activeColor="#CC66FF" block-size="15" block-color="#7FFF00"/>

(2). .js での進行状況バーのドラッグを監視します。

Page({
  onSliderChange(e){ //进度条拖动事件监听
    console.log("onSliderChange 进度条拖动 progress: " + e.detail.value);
  }
})

6. <switch> スイッチラベル:

プロパティの説明:

checked：是否选中
disabled：是否禁用
type：样式，值：switch(左右开关样式)、checkbox(复选框样式)
color：开关的颜色
bindchange：开关事件监听方法，通过e.detail.value获取开关状态

(1). 切り替えボタンは .wxml で表示されます。

<switch checked="true" type="switch" bindchange="onSwitchChange" />

(2). .js でスイッチイベントをリッスンします。

Page({
  onSwitchChange(e){ //开关事件监听
    console.log("onSwitchChange 开关事件 isOpen: " + e.detail.value);
  }
})

7. <form> フォームタグ:

プロパティの説明:

bindsubmit：提交表单时触发的函数，表单内的<button>标签formType="submit"，取表单各项值：e.detail.value.标签name属性值
bindreset：重置表单时触发的函数，表单内的<button>标签formType="reset"

(1). フォームは .wxml で表示されます。

<form bindsubmit="onFormSubmit">
  <input name="input_name" type="text" value="" />
  <button size="mini" type="default" plain="true" form-type="reset">重置</button>
  <button size="mini" type="default" plain="true" form-type="submit">提交</button>
</form>

(2).js でフォーム送信イベントをリッスンします。

Page({
  onFormSubmit(e){ //表单提交事件监听
    console.log("onSwitchChange 表单提交事件 input_name: " + e.detail.value.input_name);
  }
})

4. <canvas> カスタム描画ラベル:

プロパティの説明:

canvas-id：唯一标识符
type：canvas类型，值：2d、webgl
disable-scroll：当在canvas中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart：按下时触发的方法
bindtouchmove：移动时触发的方法
bindtouchend：移动结束时触发的方法
bindtouchcancel：触控被打断时触发的方法
bindlongtap：长按500ms后触发的方法
binderror：发生错误时触发的方法

1. カスタム図面を .wxml で表示します。

<canvas type="2d" id="canvas_id" style="width: 300px; height: 300px;" />

2. .js で描画ロジックを実装します。

(1) キャンバス 2D 描画:

Page({
  onLoad: function (e) {
    const query = wx.createSelectorQuery()
    query.select('#canvas_id_1')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        //0.设置画布宽度+高度
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr //设置画布宽度
        canvas.height = res[0].height * dpr //设置画布高度
        console.log("dpr : " + dpr)
        ctx.scale(dpr, dpr)
        //1.设置画笔属性
        ctx.strokeStyle = "blue"  //画笔颜色
        ctx.lineWidth = 1         //线粗细度
        //2.绘图
        ctx.rect(0, 0, 20, 20)                    //画矩形，参数分别为左上角x坐标、左上角y坐标、宽、高
        ctx.moveTo(20, 40) //移动画笔坐标位置
        ctx.arc(10, 40, 10, 0, 2 * Math.PI, true) //画圆，参数分别为起始点x坐标、起始点y坐标、半径、开始角度、结束角度
        ctx.moveTo(20, 60) //移动画笔坐标位置
        ctx.arc(10, 60, 10, 0, Math.PI, false)    //画圆环
        ctx.stroke()
        ctx.draw()
      })
  },
  ...
})

(2) WebGL描画：

Page({
  onLoad: function () {
    const query = wx.createSelectorQuery()
    query.select('#canvas_id').node().exec((res) => {
      const canvas = res[0].node
      const gl = canvas.getContext('webgl')
      ...  //绘图
    })
  }
})

5. TDesign コンポーネント環境の構成/導入/使用:

1. 環境構成:

(1) 初期化して (cmd を開き、cd でアプレットプロジェクトのルートディレクトリに移動します)、次のコマンドを実行します (各ステップのプロンプトに内容を入力するか Enter キーを押し、最後のステップで「yes」と入力します)。

npm init

(2) NPM を使用してサードパーティパッケージをインストールします (cmd を開き、アプレットプロジェクトのルートディレクトリに cd します)。

npm i tdesign-miniprogram -S --production

(3) WeChat開発者ツールを開き、「ツール」メニューをクリックし、「npmのビルド」をクリックしてビルドします。

(4) project/app.json から「style」:「v2」を削除します。

2. TDesign コンポーネントを使用します。

公式ドキュメント:

ティーデザイン

(1) project/app.json (またはこのコンポーネントを使用する page.json) にコンポーネントを導入します。

{
  ...,
  "usingComponents": {  //引入TDesign组件
    "t-button": "tdesign-miniprogram/button/button",   //此为按钮组件
    "t-imagen": "tdesign-miniprogram/image/image",     //此为图片显示组件
    ...  //省略更多组件
  }
}

(2). .wxml で使用されるコンポーネント (画像表示例):

<t-image src="{
   
   {图片地址}}" mode="heightFix" width="20" height="20" />

WeChat ミニ プログラム: ページ レイアウトの概要

おすすめ

WeChat ミニプログラム: ページレイアウトの概要