2.wxml部分组件的使用(不定期更新)

作者自己尝试帮助不太熟悉一些基础组件的人写的,有些代码并不是为了展示界面而写的,所以没有展示图。通过看这些能够理解一些组件最基础的用法,如果需要知道组件所有的属性和信息,请去微信开发文档查阅:https://developers.weixin.qq.com/miniprogram/dev/framework/
1.text:
文本组件

<text class ="info" id = "first" style = "display:inline;" bindtap = "" hidden ="true" data-user-name = "user">
//此处可以设置文本组件的属性,还可以自定义属性(例如data-user-name,封装起来可以传递参数),display表示文本展示样式
Hello World
//被夹杂的是文本内容,且此内容为纯文本,其他组件会被忽略掉
</text>
//这是文本组件结束语

2.image
图片组件

<image class = '***'/*用于style,可以在wxss中定义一个***进行内容补充*/ src=''></image>
//可以是本地路径,也可以是个url。本地路径格式应该为/***/***.jpg(不一)

3.view
容器视图

<view> </view>

view是容器,可以理解为父组件,类似于flutter中的Container,用来包裹组件的。


4.navigator
路由跳转

<navigator url = '/pages/***/***' open-type = "redirect" hover-class = ''>
//redirect无返回页,navigate可返回,hover-class为点击样式
<text>
***
</text>
</navigator>

5.input
文本输入框

<input type="text" placeholder="统一认证密码" 
placeholder-style="text-align:center" password="true" bindinput="inputPass">
</input>

6.button
按钮组件

<button style="border:10rpx solid #ffffff;border-radius:40rpx" bindtap="minsPage">
上一页
</button>

7.textarea
文本输入域

<textarea type="text" placeholder="统一认证密码" 
placeholder-style="text-align:center" password="true" bindinput="inputPass"/>

8.icon
图标
具体代码演示和image相似,这里就不多赘述


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值