微信小程序——小白入门
微信小程序架构
主体：
app.js（初始化逻辑）
app.json（公共配置）
app.wxss（公共样式）
页面：
js（页面逻辑）
json（页面配置）
wxss（页面样式）
wxml（页面结构）
View（页面视图）
View-WXML
支持数据绑定
支持逻辑算数、运算
支持模板、引用
支持添加事件（bindtap）
View-WXSS
支持大部分CSS特性
添加尺寸单位rpx，可根据品目宽度自适应
使用@import语句可以导入外联样式表
不支持多层选择器，避免被组件内结构破坏
View-WXSS Selectors
View-Component
大类 |
细分 |
WXML |
HTML |
视图容器 |
普通视图容器 |
view |
div、ul、li、article、section... |
滚动视图 |
scroll-view |
||
滑块视图 |
swiper |
||
基础内容 |
文本 |
text |
span、em、p... |
图标 |
icon |
span、em、i... |
|
进度条 |
progress |
div... |
|
链接、导航 |
链接、导航 |
navigator |
a |
表单 |
按钮 |
button |
button、input |
单选 |
radio |
input |
|
多选 |
checkbox |
input |
|
表单 |
form |
form |
|
输入框 |
input |
input |
|
改进表单可用性 |
label |
label |
|
滚动选择器 |
picker |
select |
|
开关选择器 |
switch |
input、div... |
|
操作反馈 |
底部菜单 |
action-sheet |
div、ul... |
弹窗 |
modal |
div... |
|
toast |
toast |
div... |
|
加载 |
loading |
img、span、div... |
|
媒体 |
图片 |
image |
img |
视频 |
audio |
audio |
|
音频 |
video |
video |
|
地图 |
地图 |
map |
map |
画布 |
画布 |
canvas |
canvas |
View-Native Component
Native组件层在WebView层之上
APP Service(逻辑层)
逻辑层将数据进行处理后发送给视图层，同时接受视图层的时间反馈
1、APP（）小程序的入口；Page（）页面的入口
2、提供丰富的API，如微信用户数据、扫一扫、支付等微信特有能力
3、每个页面有独立的作用域，并提供模块化能力
4、数据绑定、时间分发、生命周期管理、路由管理
数据绑定demo
<view>{{message}}</view>
Page{{ data:{
message:'Hello Weixin!'
}
}}
<view wx:if="{{length>5}}">1</view>
<view wx:eles="{{length>2}}">2</view>
<view wx:else>3</view>
遍历列表demo
<view wx:for="{{array}}">
{{index}}
</view>
Page{{
data:{
array:[{'aaa','bbb','ccc'}]
}
}}
运行环境
IOS-JSCore
Android-X5 JS解析器
DevTool-nwjs Chrome内核
APP Service-Life Cylce
APP Service -API
分类 |
名称 |
API |
网络 |
发起请求 |
request |
上传下载 |
uploadFile/downloadFile |
|
WebSocket |
connectSocket/onSocketOpen/onScocketError/sendSocketMessage/onSocketMessage/closeSocket/onSocketClose |
|
媒体 |
图片 |
chooseImage/previewImage/getImageInfo |
视频 |
chooseVideo |
|
音频 |
playVoice/pauseVoice/stopVoice |
|
录音 |
startRecord/stopRecord |
|
文件 |
saveFile/getSvaedFileList/getSavedFileInfo/removeSavedFile |
|
数据 |
数据缓存 |
setStorage/getStorage/removeStorage/clearStorage |
位置 |
获取位置 |
getLocation |
查看位置 |
openLocation |
|
设备 |
网络状态 |
getNetworkType |
系统信息 |
getSystemInfo |
|
重力感应 |
onAccelerometerChange |
|
罗盘 |
onCompassChange |
|
拨打电话 |
makePhoneCall |
|
界面 |
Canvas |
drawCanvas/drawCanvas/canvasToTempFilePath |
动画 |
createAnimation |
|
导航、设置导航条 |
navigateTo/redirectTo/navigateBack |
|
交互反馈 |
showToast/showModal/showActioonSheet |
|
开放接口 |
登录 |
login |
用户信息 |
getUserInfo |
|
| 微信支付 | requesPayment |
|
模板消息 |
App Service -Router
navigateTo（Object）
保留当前页面，跳转到应用内的某个页面，使用navigateBack可以返回到原页面。页面路径只能是五层
redirectTo（Object）
关闭当前页面，跳转到应用内某个页面
navigateBack（Object）
关闭当前页面，返回上一个页面或多级页面。可通过getCurrentPages（）获取当前的页面栈，决定需要返回几层。