关于微信小程序框架的理解

微信小程序框架链接: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
画布

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,686评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,668评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,160评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,736评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,847评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,043评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,129评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,872评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,318评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2 351

推荐阅读更多精彩内容