微信小程序开发五Word文件下载.docx
- 文档编号:20066176
- 上传时间:2023-01-16
- 格式:DOCX
- 页数:9
- 大小:17.01KB
微信小程序开发五Word文件下载.docx
《微信小程序开发五Word文件下载.docx》由会员分享,可在线阅读,更多相关《微信小程序开发五Word文件下载.docx(9页珍藏版)》请在冰豆网上搜索。
导航
navigator
小程序组件框架构成(第二部分)
小程序组件(承)
页面表单
Pageform
按钮
button
表单
form
输入
input
多选
checkbox
单选
radio
列表选
picker
内嵌列选
Picker-view
滑选
slider
切换
switch
标签
label
多媒体
Multimedia
音频
audio
视频
video
图片
iimage
小程序组件框架构成(第三部分)
地图
map
画布
canvas
客服会话
session
Contact-button
第1节视图容器:
VIEWCONTAINER
1.普通视图:
VIEW
+横向排列
<
viewclass="
flex-wrp"
style="
flex-direction:
row;
"
>
flex-itembc_green"
<
/view>
flex-itembc_red"
flex-itembc_blue"
+纵向排列
style=”flex-direction:
column;
<
2.滚动视图:
SCROLL-VIEW
+上下滚动
scroll-viewscroll-y=”true”>
viewclass=”scroll-view-itembg=red”>
viewclass=”scroll-view-itembg=blue”>
/scroll-view>
+左右滚动
scroll-viewclass=”scroll-view-h”scroll-x=”true”>
viewclass=”scroll-view-item_hbg=red”>
viewclass=”scroll-view-item_hbg=blue”>
3.滑动视图:
SWIPER
+轮播图
swiperindicator-dots=3autoplay=trueinterval=50duration=10>
blockwx:
for={{imageUrls}}>
swiper-item>
<
imagesrc={{item}}/>
/swiper-item>
/block>
/swiper>
第2节基础内容:
BASECONTENT
基础内容包括:
图标,文本,进度条.
以下对三项内容分别进行详解.
1.图标:
ICON
+图标
icontype=successsize=40/>
√
2.文本:
TEXT
+文本
view>
text>
{{text}}<
/text>
buttonbindTap=add>
addline<
/button>
buttonbindTap=remove>
removeline<
Addline
Removeline
3.进度条:
PROGRESS
+进度条
progresspercent=20show-info/>
progresspercent=30stroke-width=30/>
progresspercent=40active/>
progresspercent=35color=pink/>
20%
第3节页面表单:
PAGEFORM
=表单组件
+button
buttontype=pramarybindrap=hdl>
+checkBox
checkboxvalue=vchecked=true/>
+radio
radiovalue=vchecked=true/>
+input
inputplaceholder=enter/>
+label
label>
…<
/label>
+picker
pickermode=time|datevalue={{idx}}range={{ary}}>
{{ary[idx]}}<
/picker>
+slider
sliderstep=1bindchange=evt/>
+switch
switchbindchange=evtchecked/>
+textArea
textArea>
/textArea>
Label:
user-name
12:
59
58
13:
00
第4节操作反馈:
OPERATIONINTEATION
1.上拉菜单
Action-sheet:
上拉菜单;
Action-sheet-item:
上拉菜单项目;
Action-sheet-cancel:
上拉菜单取消按钮;
详见图示。
+上拉菜单
action-sheethidden=truebindchange=evt>
for-items={{ary}}>
action-sheet-item>
{{itm}}<
/action-sheet-item>
action-sheet-cancel>
取消<
/action-sheet-cancel>
/action-sheet>
2.模态窗口:
MODAL
MODAL将被废弃,请使用来实现,不讲.
3.自消窗口:
TOAST
TOAST将弃,请用,不讲.
4.正加载:
LOADING
+正加载
loadinghidden=true>
正加载…<
/loading>
正加载…
第5节页面导航:
PAGENAVIGATION
navigatorurl=url>
新页打开<
/navigator>
navigatorurl=urlopen-type=redirect>
本页打开<
navigatorurl=urlopen-type=swictTab>
页签切换<
新页打开
本页打开
页签切换
第6节多媒体:
MULTIMEDIA
1.音频:
AUDIO
从头再来
刘欢
00:
audioposter=pname=nauther=asrc=sid=idcontrolsloop>
/audio>
buttontype=primarybindtap=play|pause|p-14|p-start>
播放|暂停|14秒|开始<
(4个)
Page({
Onready:
function(e){=(myAudio)},
Data:
{poster:
img,name:
n,author:
a,src:
s},
Play:
function(){…
})
2.视频:
VIDEO
04
videosrc=sdanmu-list=aenable-danmu=tdanmu-btncontrols>
buttonbindtap=get>
获取<
inputbindblur=blur/>
buttonbindtap=send>
发送<
/video>
function(e){=()},
Blur:
function(e){=Send:
function(){
3.图片:
IMAGE
+图片
imagestyle=stylesrc=src/>
第7节地图:
MAP
+地图
maplongitude=lolatitude=lamarkers=mcovers=c>
/map>
+标记结构
Marker:
{longitude:
lo,latitude:
la,name:
n,desc:
d}
+覆盖物结构
Cover:
{longitude:
la,iconPath:
ip,rotate:
r}
第8节画布:
CANVAS
+画布
canvasstyle=sid=id>
/canvas>
+JS部分
Varctx=()
……
详细绘图API请参照绘图一章
第9节客服会话:
SESSION
客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话。
contact-button
type="
default-light"
size="
20"
session-from="
weapp"
/contact-button>
欢迎阅读下一章
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 微信小 程序 开发