微信小程序开发五

微信小程序开发五

The pony was revised in January 2021

微信小程序开发(五)

第五章 表现层组件

小程序组件框架构成(第一部分)

小程序组件视图容View container 普通视滚动视滑动视基础内View Scroll-view swiper Base content 图标 文字 进度 icon text progress Operation 上拉菜模态窗自消窗Action-sheet model toast 操作反页面导Page navigation 导航 navigator 小程序组件框架构成(第二部分)

小程序组件页面表按钮 表单 输入 多选 单选 列表选 内嵌列滑选 切换 标签 多媒体 音频 视频 图片 Page form button form input checkbox radio picker Picker-view slider switch label Multi media audio video iimage 小程序组件框架构成(第三部分)

小程序组件地图 地图 画布 画布 客服会客服会canvas canvas session Contact-button map map 第1节 视图容器:VIEW CONTAINER

1.普通视图:VIEW

+横向排列 2.滚动视图:SCROLL-VIEW

+上下滚动 3.滑动视图:SWIPER

+轮播图 第2节 基础内容:BASE CONTENT

基础内容包括:图标,文本,进度条.

以下对三项内容分别进行详解.

1. 图标:ICON

+图标 2. 文本:TEXT

+文本 Add line Remove line {{text}} add line 3. 进度条:PROGRESS

+进度条 20% 第3节 页面表单:PAGE FORM

=表单组件 √ +button Label:user-+checkBox 12:512:513:0 +radio +input +label … 第4节 操作反馈:OPERATION INTEATION

1.上拉菜单

Action-sheet:上拉菜单；

Action-sheet-item:上拉菜单项目；

Action-sheet-cancel:上拉菜单取消按钮；

详见图示。

+上拉菜单

MODAL将被废弃,请使用来实现,不讲.

3.自消窗口:TOAST

TOAST将弃,请用,不讲.

4.正加载:LOADING

+正加载 正加载… 第5节 页面导航:PAGE NAVIGATION

新页打开 本页打开 页签切换 新页打开 第6节 多媒体:MULTI MEDIA

1. 音频:AUDIO

从头再来 刘 欢 00:00 Page({ Onready:function(e){=(myAudio)}, Data:{poster:img,name:n,author:a,src:s}, 2. 视频:VIDEO

+图片 第7节 地图:MAP

+地图 +标记结构 Marker:{longitude:lo,latitude:la,name:n,desc:d}第8节 画布:CANVAS

+画布 +JS部分 Page({ 详细绘图API请参照绘图一章

第9节 客服会话:SESSION

客服会话按钮，用于在页面上显示一个客服会话按钮，用户点击该按钮后会进入客服会话。

欢迎阅读下一章