导航:首页 > 软件知识 > 微信小程序icon组件叫什么

微信小程序icon组件叫什么

发布时间:2023-05-27 20:16:45

① 微信小程序_组件

1.基础组件:

什么是组件:
<ul>
<li>组件是视图层的基本组成单元。</li>
<li>组件自带一些功能与微信风格的样式。</li>
<li>一个组件通常包括开始标签
和结束标签
,属性
用来修饰这个组件,内容
在两个标签之内。</li>
</ul>

2.属性类型
<ul>
<li>Boolean 布尔值 组件写上该属性,不管该属性等于什么,其值都为true
,只有组件上没有写该属性时,属性值才为false
。如果属性值为变量,变量的值会被转换为Boolean类型</li>
<li>Number 数字 1
, 2.5</li>
<li>String 字符串 "string"</li>
<li>Array 数组 [ 1, "string" ] </li>
<li>Object 对象 { key: value } </li>
<li>EventHandler 事件处理函数名 "handlerName"
是 Page中定义的事件处理函数名</li>
<li>Any 任意属性 </li>
</ul>

3.共同属性类型

id , class , style , hidden , data-* , bind* / catch*

4.特殊属性

几乎所有组件都有各自定义的属性,可以对该组件的功能或样式进行修饰

5.组件列表

基础组件分为以下八大类:

视图容器(View Container):
view 视图容器 , scroll-view 可滚动视图容器, swiper 滑块视图容器

基础内容(Basic Content):
icon 图标, text 文字, progress 进度条

表单(Form):
button 按钮, form 表单, input 输入框, checkbox 多想选择器, radio 单选器, picker 列表选择器, slider 滚动选择器, switch 开关选择器, label 标签.
操作反馈(Interaction)
action-sheet 上拉菜单
modal 模态弹窗
toast 消息提示框
loading 加载提示符

导航Navigation

navigator 应用链接

多媒体(Media)

audio 音频, image 图片, video 视频
** 地图 **

map 地图

画布Canvas
canvas 画布

flex: vt.折曲,使收缩; vi.玩去,收缩

② 微信小程序---tabBar&页面跳转

1、tabBar

在app.json文件中添加tabBar节点。tabBar是小程序客户端底部或顶部tab栏的实现。

(1)tabBar相关属性

color:tab上的文字默认颜色,仅支持十六进制颜色。

selectedColor:tab上的文字选中时的颜色,仅支持十六进制颜色。

backgroundColor:tab的背景色,仅支持十六进制颜色。

borderStyle:tabbar上边框的颜色, 仅支持 black / white。

position:tabBar的位置,默认值是: bottom,仅支持 bottom / top。当 position 为 top 时,不显示 icon。

custom:自定义tabBar。

"tabBar": {

    "color": "#000000",

    "selectedColor": "#336699",

    "backgroundColor": "#ffffff",

    "borderStyle": "black",

    "position": "bottom"

  }

(2)list

list:tab的列表。

list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。

pagePath:页面路径,必须在pages 中先定义。

text:tab 上按钮文字。

iconPath:图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。selectedIconPath:选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。

    "list": [

      {

        "text": "首页",

        "pagePath": "pages/index/index",

        "iconPath": "assets/icon/home.png",

        "selectedIconPath": "assets/icon/home2.png"

      },

      {

        "text": "列表",

        "pagePath": "pages/list/list",

        "iconPath": "assets/icon/list.png",

        "selectedIconPath": "assets/icon/list2.png"

      }

]

2、页面跳转

(1)跳转普通页面

方法① navigator组件

 <!-- 跳转到普通页,可以通过返回按钮返回 -->

 <navigator url="../detail/detail">到详情页</navigator>

方法② navigateTo()方法

navigateTo()方法,用于跳转普通页面。

<view bindtap="gotoDetail">到详情页</view>

gotoDetail(){

    //使用全局api跳转,navigateTo()方法,用于跳转普通页面

    wx.navigateTo({

      url: '../detail/detail',

    })

   }

(2)跳转tabBar页面

方法① navigator组件

如果要使用navigator组件跳转tabBar页面,需要设置open-type="switchTab"。

 <!-- 跳转到tabBar页面,不可以通过返回按钮返回。因为跳转到指定的tabBar页面后,会关闭其他所有页面 -->

<navigator url="../list/list" open-type="switchTab">到列表页</navigator>                                                                                      

方法② switchTab()方法

switchTab()方法,用于跳转tabBar页面。

  <view bindtap="gotoList">到列表页</view>

gotoList(){

    wx.switchTab({

      url: '../list/list',

    })

  }

③ 微信小程序ui框架有哪些

微信小程序开发,是目前火爆的开发方式,也是适应中小企业快速解决的一个方案。选择一个合适自己的开发UI框架,能够让自己开发速度提升数倍。
推荐两个小程序UI框架:
WeUI
WeUI是由微信官方设计团队分别支持微信H5网页和微信原生小程序的开源UI组件
ColorUI
ColorUI是开源且支持原生小程序的UI组件,由于我目前在帮朋友改一个原生的微信小程序,所以就选择了这款开源组件。

④ 微信小程序使用iconfont及引入vant-icon使用iconfont

(此步骤时可以精简文件,只复制保留iconfont.wxss文件到assets/iconfont文件友激稿下,其余文件删好孝除,依然会正常显示图标)

准备工作到此已经完成,接下来铅誉进入项目配置使用;

可以使用view text等标签引入iconfont;

页面效果:

其中:

引入VantUI组件内容可参考 VantUI官网快速上手 进行配置;

页面效果:

阅读全文

与微信小程序icon组件叫什么相关的资料

热点内容
神州技术学院有哪些专业 浏览:462
代理国库税收收缴什么时候生效 浏览:277
为什么做趋势交易很多人都没钱 浏览:120
小程序的diy是什么意思 浏览:328
产品经理ppt怎么写 浏览:251
技术培训机构如何做 浏览:723
扬州驾驶求职市场前景如何 浏览:997
信息经营在哪个类目下 浏览:940
贴牌产品如何分类 浏览:397
产品被判定为受限产品怎么解决 浏览:28
汽车漂移技术要多少钱 浏览:212
为什么产品排名始终靠后 浏览:937
健身胶囊如何建立身体数据档案 浏览:888
无需手术就能生发是什么技术 浏览:839
二手房交易锐费怎么分 浏览:764
大三如何做产品经理 浏览:738
什么叫取现冲正交易 浏览:955
精选速购怎么做代理 浏览:534
嘉定区市场包装材料哪个好 浏览:431
村合作社的产品怎么外销 浏览:868