美文网首页
微信小程序大体框架

微信小程序大体框架

作者: 轩辕小爱 | 来源:发表于2016-10-08 15:13 被阅读0次

    文件结构

    框架程序包含一个描述整体程序的app和多个描述各自页面的page。

    一个框架程序主体部分由三个文件组成,必须放在项目的根目录,

    文件                必填                  作用

    app.js              是                    小程序逻辑

    app.json            是                    小程序公共设置

    app.wxss          否                    小程序公共样式表

    一个框架页面由4个文件组成

    文件类型                        必填                        作用

    js                                    是                          页面逻辑

    wxml                              是                          页面结构

    wxss                              否                          页面样式表

    json                                否                          页面配置

    配置

    我们使用app.json 文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等

    app.json配置项列表

    属性                        类型                          必填                         描述

    pages                    Array                          是                            设置页面路径

    window                Object                         否                            设置默认页面的窗口表现

    tabBar                  Object                         否                            设置底部 tab 的表现

    networkTimeout   Object                       否                             设置网络超时时间

    debug                  Boolean                      否                             设置是否开启 debug 模式

    逻辑层(App Service)

    小程序开发框架的逻辑层是由JavaScript编写。

    逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。在JavaScript的基础上,我们做了一些修改,以方便地开发小程序。

    * 增加App 和 Page 方法,进行程序和页面的注册。

    * 提供丰富的API,如扫一扫,支付等微信特有的能力。

    * 每个页面有独立的作用域,并提供模块化能力。

    * 由于框架并非运行在浏览器中,所以JavaScript在web中一些能力都无法使用,如document,window等。

    * 开发者写的所有代码最终会打包成一份JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似ServiceWorker,所以逻辑层也称之为App Service。

    视图层:

    * 框架的视图层由WXML 与 WXSS编写,由组件来进行展示。

    * 将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。

    * WXML(WeiXin Markup language)用于描述页面的结构。

    * WXSS(WeiXin Style Sheet)用于描述页面的样式。

    * 组件(Component)是视图的基本组成单元

    相关文章

      网友评论

          本文标题:微信小程序大体框架

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