资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

微信小程序开发之小程序架构的示例分析-创新互联

这篇文章给大家分享的是有关微信小程序开发之小程序架构的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联建站是专业的江州网站建设公司,江州接单;提供网站设计、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行江州网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

一、小程序架构

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

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

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 中相同的配置项。


微信小程序开发之小程序架构的示例分析

感谢各位的阅读!关于“微信小程序开发之小程序架构的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


名称栏目:微信小程序开发之小程序架构的示例分析-创新互联
当前链接:http://cdkjz.cn/article/hpjis.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220