美文网首页
关于微信小程序框架的理解

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

作者: wuliwolfyuan | 来源:发表于2016-12-05 14:46 被阅读0次

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

    相关文章

      网友评论

          本文标题:关于微信小程序框架的理解

          本文链接:https://www.haomeiwen.com/subject/lmgkmttx.html