微信小程序框架链接:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html?t=20161122
1.小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
框架提供了自己的视图层描述语言 WXML 和 WXSS(相当于h5和c3),以及基于 JavaScript 的逻辑层框架(微信自己的框架,特点也是双向绑定),并在视图层(view层)与逻辑层 (App Service)间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。
2.框架的核心是一个响应的数据绑定系统;
整个系统分为两块视图层(View)和逻辑层(App Service);
框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。(很明了,就是双向绑定)。
3.新标签和语法:
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>;
var helloData = { name: 'WeChat'}
// Register a Page.
Page({ data: helloData, changeName: function(e) { // sent data change to view
this.setData({ name: 'MINA' })
}
})
4.页面管理:
框架管理了整个小程序的页面路由,可以做到页面间的无缝切换,并给以页面完整的生命周期。开发者需要做的只是将页面的数据,方法,生命周期函数注册进 框架 中,其他的一切复杂的操作都交由 框架 处理。
基础组件
框架 提供了一套基础的组件,这些组件自带微信风格的样式以及特殊的逻辑,开发者可以通过组合基础组件,创建出强大的微信小程序 。
丰富的 API
框架 提供丰富的微信原生 API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
关于微信原生API:
1.wx-for :遍历数组 和 对象
网络API请求:
wx.request
发起网络请求
wx.uploadFile
上传文件
wx.downloadFile
下载文件
wx.connectSocket
创建 WebSocket 连接
wx.onSocketOpen
监听 WebSocket 打开
wx.onSocketError
监听 WebSocket 错误
wx.sendSocketMessage
发送 WebSocket 消息
wx.onSocketMessage
接受 WebSocket 消息
wx.closeSocket
关闭 WebSocket 连接
wx.onSocketClose
监听 WebSocket 关闭
wx.getStorage
获取本地数据缓存
wx.setStorage
设置本地数据缓存
wx.clearStorage
清理本地数据缓存
位置 API 列表:
wx.getLocation
获取当前位置
wx.openLocation
打开内置地图
设备 API 列表:
wx.getNetworkType
获取网络类型
wx.getSystemInfo
获取系统信息
wx.onAccelerometerChange
监听重力感应数据
wx.onCompassChange
监听罗盘数据
界面 API 列表:
wx.setNavigationBarTitle
设置当前页面标题
wx.showNavigationBarLoading
显示导航条加载动画
wx.hideNavigationBarLoading
隐藏导航条加载动画
wx.navigateTo
新窗口打开页面
wx.redirectTo
原窗口打开页面
wx.navigateBack
退回上一个页面
wx.createAnimation
动画
wx.createContext
创建绘图上下文
wx.drawCanvas
绘图
wx.hideKeyboard
隐藏键盘
wx.stopPullDownRefresh
停止下拉刷新动画
开放接口:
wx.login
登录
wx.getUserInfo
获取用户信息
wx.requestPayment
发起微信支付
基础组件:
什么是组件:
组件是视图层的基本组成单元。
组件自带一些功能与微信风格的样式。
一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。
<tagname property="value"> Content goes here ...</tagename>
注意:所有组件与属性都是小写,以连字符-连接
属性类型
类型
描述
注解
Boolean
布尔值
组件写上该属性,不管该属性等于什么,其值都为true,只有组件上没有写该属性时,属性值才为false。
如果属性值为变量,变量的值会被转换为Boolean类型.
Number
数字
1, 2.5
String
字符串
"string"
Array
数组
[ 1, "string" ]
Object
对象
{ key: value }
EventHandler
事件处理函数名
"handlerName"
是 Page中定义的事件处理函数名
Any
任意属性
共同属性类型
(所有组件都有的属性):
属性名
类型
描述
注解
id
String
组件的唯一标示
保持整个页面唯一
class
String
组件的样式类
在对应的 WXSS 中定义的样式类
style
String
组件的内联样式
可以动态设置的内联样式
hidden
Boolean
组件是否显示
所有组件默认显示
data-*
Any
自定义属性
组件上触发的事件时,会发送给事件处理函数
bind* / catch*
EventHandler
组件的事件
详见事件
特殊属性
几乎所有组件都有各自定义的属性,可以对该组件的功能或样式进行修饰,请参考各个组件的定义。
组件列表
基础组件分为以下八大类:
视图容器(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):
组件名
说明
map
地图
画布(Canvas):
组件名
说明
canvas
画布