• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >微信小程序 > 微信小程序开发小程序架构篇图解

微信小程序开发小程序架构篇图解

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-11-30

匿名通过本文主要向大家介绍了微信小程序等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
一、小程序架构

每个小程序的结构都是由两个主要部分构成:主体部分 + 各个页面。

类似于许多框架,主体部分主要用于核心的配置,各个页面主要用于不同业务场景。

1.1,主体部分主要由3个文件构成

1)app.js:小程序逻辑,初始化APP

2)app.json :小程序配置,比如导航、窗口、页面http请求跳转等

3)app.wxss:公共样式配置

主体配置完成之后,就是对应的业务开发了,也就是开发者最常操作的页面。小程序页面设计基本上也是遵循 MVC 结构进行构建。

MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,
用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,
在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、
处理和输出功能在一个逻辑的图形化用户界面的结构中。

1.2,页面由4个文件构成

1)js:页面逻辑,相当于控制层(C);也包括部分的数据(M)

2)wxml:页面结构展示,相当于视图层(V)

3)wxss:页面样式表,纯前端,用于辅助wxml展示

4)json:页面配置,配置一些页面展示的数据,充当部分的模型(M)

如图

微信小程序开发小程序架构篇图解

代码结构参考

微信小程序开发小程序架构篇图解

二、配置 app.json

简单介绍核心架构配置,详细内容请参考小程序开发文档。

app.json

全局配置页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

pages
接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成

微信小程序开发小程序架构篇图解

window
用于设置小程序的状态栏、导航条、标题、窗口背景色。

微信小程序开发小程序架构篇图解

tabBar

通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

tabBar 配置数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

微信小程序开发小程序架构篇图解

networkTimeout
可以设置各种网络请求的超时时间。

微信小程序开发小程序架构篇图解

debug

true/false

可以在开发者工具中开启 debug 模式,在开发者工具的控制台面板,调试信息以 info 的形式给出,其信息有Page的注册,页面路由,数据更新,事件触发 。 可以帮助开发者快速定位一些常见的问题。

page.json
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多,只是设置 app.json 中的 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。

微信小程序开发小程序架构篇图解

相关文章:

微信小程序 数据访问实例详解

微信小程序label组件详解实例代码

微信小程序开发教程实例步骤详解

以上就是微信小程序开发小程序架构篇图解的详细内容,更多请关注微课江湖其它相关文章!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2018-11-30关于图表插件的6篇文章推荐
  • 2018-11-30微信小程前端源码逻辑和工作流详细介绍
  • 2018-08-20微信小程序 WXML
  • 2018-11-30分享微信小程序开发石头剪刀布实例代码
  • 2018-11-30微信小程序开发基础篇之初识(1)
  • 2018-08-20微信小程序 模板(template)
  • 2018-11-30微信小程序 wxapp导航 navigator详解
  • 2018-11-23微信小程序云开发 开发指引
  • 2018-11-30微信小程序-仿盒马鲜生
  • 2018-11-30微信小程序 action-sheet详解及实例代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 微信小程序Page构造函数以及生命周期函数的内容解析(附代码)
    • C语言实现的一个万年历小程序(附代码)
    • 微信小程序 解决swiper不显示图片的方法
    • 微信小程序开发基础篇之初识(1)
    • 猜画小歌:Google AI的小歌去猜你所画的画
    • 微信小程序实战开发之视图层WXML:事件
    • 微信小程序云开发API 查询筛选条件
    • 微信小程序Tab页切换更新数据详细介绍
    • 关于微信小程序前端源码逻辑和工作流详解
    • 小程序开发教程文档

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有