欢迎光临,了解各类小程序、网站开发,就上众彬建站! 退出 注册 登录

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

发布: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的属性,它用来声明这个程序中到底有哪些页面的:

  1. 
    {
    "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代码:

  1. 
    
    
    
    										









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