您现在的位置: 微信小程序 > 微信小程序开发 > 入门 >

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

来源:微信小程序 编辑:Yiyongtong.com 发布时间:2018-02-07 15:11热度:
这一篇中要介绍一个函数: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. 
    <view class="container">
    <scroll-view scroll-y="true" bindscrolltoupper="upper"
    bindscrolltolower="lower" bindscroll="scroll" class="scroll-wrapper">
    <view