作者自己尝试帮助不太熟悉一些基础组件的人写的,有些代码并不是为了展示界面而写的,所以没有展示图。通过看这些能够理解一些组件最基础的用法,如果需要知道组件所有的属性和信息,请去微信开发文档查阅: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相似,这里就不多赘述