微信小程序开发五.docx
- 文档编号:237745
- 上传时间:2022-10-07
- 格式:DOCX
- 页数:10
- 大小:229.31KB
微信小程序开发五.docx
《微信小程序开发五.docx》由会员分享,可在线阅读,更多相关《微信小程序开发五.docx(10页珍藏版)》请在冰豆网上搜索。
微信小程序开发(五)
第五章表现层组件
小程序组件框架构成(第一部分)
小程序组件(启)
视图容器
Viewcontainer
普通视图
View
滚动视图
Scroll-view
滑动视图
swiper
基础内容
Basecontent
图标
icon
文字
text
进度
progress
操作反馈
Operationinteration
上拉菜单
Action-sheet
模态窗口
model
自消窗口
toast
页面导航
Pagenavigation
导航
navigator
小程序组件框架构成(第二部分)
小程序组件(承)
页面表单
Pageform
按钮
button
表单
form
输入
input
多选
checkbox
单选
radio
列表选
picker
内嵌列选
Picker-view
滑选
slider
切换
switch
标签
label
多媒体
Multimedia
音频
audio
视频
video
图片
iimage
小程序组件框架构成(第三部分)
小程序组件(承)
地图
map
地图
map
画布
canvas
画布
canvas
客服会话
session
客服会话
Contact-button
第1节视图容器:
VIEWCONTAINER
1.普通视图:
VIEW
+横向排列
row;"> +纵向排列 column;"> 2.滚动视图: SCROLL-VIEW +上下滚动 +左右滚动 3.滑动视图: SWIPER +轮播图 for={{imageUrls}}> 第2节基础内容: BASECONTENT 基础内容包括: 图标,文本,进度条. 以下对三项内容分别进行详解. 1.图标: ICON +图标 √ √ 2.文本: TEXT +文本 Addline Removeline 3.进度条: PROGRESS +进度条 20% 第3节页面表单: PAGEFORM =表单组件 +button +checkBox +radio +input +label +picker +slider +switch +textArea √ Label: user-name 12: 59 12: 58 13: 00 第4节操作反馈: OPERATIONINTEATION 1.上拉菜单 Action-sheet: 上拉菜单; Action-sheet-item: 上拉菜单项目; Action-sheet-cancel: 上拉菜单取消按钮; 详见图示。 +上拉菜单 for-items={{ary}}> 2.模态窗口: MODAL MODAL将被废弃,请使用wx.showModal来实现,不讲. 3.自消窗口: TOAST TOAST将弃,请用wx.showToast,不讲. 4.正加载: LOADING +正加载 正加载… 第5节页面导航: PAGENAVIGATION 新页打开 本页打开 页签切换 第6节多媒体: MULTIMEDIA 1.音频: AUDIO 从头再来 刘欢 00: 00 Page({ Onready: function(e){this.audioCtx=wx.createAudioContext(myAudio)}, Data: {poster: img,name: n,author: a,src: s}, Play: function(){this.audioCtx.play()}, … }) 2.视频: VIDEO 00: 04 Page({ Onready: function(e){this.videoCtx=wx.createVideoContext()}, Blur: function(e){this.iptVal=e.datail.value} Send: function(){this.videoCtx.sendDanmu(text: xxx,color: rgb)} }) 3.图片: IMAGE +图片 第7节地图: MAP +地图 +标记结构 Marker: {longitude: lo,latitude: la,name: n,desc: d} +覆盖物结构 Cover: {longitude: lo,latitude: la,iconPath: ip,rotate: r} 第8节画布: CANVAS +画布 +JS部分 Page({ Varctx=wx.createContext() Ctx.methods …… }) 详细绘图API请参照绘图一章 第9节客服会话: SESSION 客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话。 type="default-light" size="20" session-from="weapp" > 欢迎阅读下一章
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 微信小 程序 开发