微信小程序开发系列分析《一》视图层

发布：2022-03-16 08:40浏览：次来源：作者：

这一篇中要介绍一个函数：Page，页面就是用它来创建的。本文以一个小例子为线索来讲解。 1、页面文件 App跟Page的关系是，App在整个小程序中只能有一个，唯一的一个。但这个小程序中可以有多个页面，就是多个Page，这些页面相关的文件都放在根目录下的pages目录，每个页面主要由四类文件组成，分另以页面名命名，但不同的后缀的文件：xxx.js / xxx.wxml / xxx.wxss / xxx.json，如下图：

页面目录这个代码目录结构是我们这篇文章中要讲的一个小例子，pages/article 下面放的是文章相关的页面。文件夹article的名字你可以随便写，只要自己觉得目录结构合理就行，但同一个页面的四类文件，一定要用同一个名字，程序是通过这个名字来找到这个页面对应的各个相关文件的。这四个文件除了wxml之外都可以不是必须的，至少要有个wxml，想想就知道了，没有view层的代码哪知道页面要长什么样？js可以没有，就少些行为、数据、逻辑而已；wxss文件也可以没有，页面长得丑而已；json文件更可以没有（这个文件一般都没有），它的定义字段跟全局的app.json文件是一样的，它的作用是定义这页面的一些属性或者说配置，以覆盖全局定义的相关的属性。文件夹的层次结构可以随便定义，甚至你想放到根目录其实都是可以的，只是同个页面相关文件要同名，且放同个目录。那么问题来了，程序怎么知道你的页面都放哪呢？可能有读者已经回想起第一篇文章中讲到的 app.json 这个配置文件了。其中有一个pages的属性，它用来声明这个程序中到底有哪些页面的：


{
"pages":[
"pages/index/index",
"pages/article/content"
],
...
}

2、例子简介下面我们先来总体分析一下这个小例子。上图：

demo界面借用36Kr网站的内容来做个很简单的小程序，新闻列表，点击查看内容。代码放在：https://github.com/jsongo/weapp-tutorial-2 这里。本章的内容写死了数据，下一篇文章中我们会来介绍如何发起网络请求去取数据。 3、wxml代码分析（1）相关组件首先，这里会涉及到三种文件：wxml / wxss 和 js。index.wxml代码：

上一篇：微信小程序开发系列分析《二》数据层

下一篇：微信小程序使用Promise实践

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

微信小程序开发工具常用快捷键2022-03-16
微信小程序架构分析《一》调试技巧，模块构成，理念分析2022-03-16
微信小程序架构分析《二》：view 模块和 service 模块的构成2022-03-16
微信小程序架构分析《三》：实现过程以及实时更新2022-03-16
梁兴臣:微信小程序开发三宗罪和解决方案2022-03-16
微信小程序使用Promise实践2022-03-16
微信小程序开发系列分析《一》视图层2022-03-16
微信小程序开发系列分析《二》数据层2022-03-16
微信小程序官方文档个人分析心得2022-03-16
微信小程序的原型设计尝鲜2022-03-16