频道栏目
首页 > 微信学院 > 微信小程序 > 正文
微信小程序开发系列分析《一》视图层技术分析
2018-01-06 15:12:17           
收藏   我要投稿

微信小程序开发系列分析《一》视图层技术分析,这一篇中要介绍一个函数: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. {
  2. "pages":[
  3. "pages/index/index",
  4. "pages/article/content"
  5. ],
  6. ...
  7. }

2、例子简介

下面我们先来总体分析一下这个小例子。上图:

demo界面

借用36Kr网站的内容来做个很简单的小程序,新闻列表,点击查看内容。代码放在:https://github.com/jsongo/weapp-tutorial-2 这里。

本章的内容写死了数据,下一篇文章中我们会来介绍如何发起网络请求去取数据。

3、wxml代码分析

(1)相关组件

首先,这里会涉及到三种文件:wxml / wxss 和 js。index.wxml代码:

  1. <view class="container">
  2. <scroll-view scroll-y="true" bindscrolltoupper="upper"
  3. bindscrolltolower="lower" bindscroll="scroll" class="scroll-wrapper">
  4. <view
点击复制链接 与好友分享!回本站首页
上一篇:微信小程序学习点滴《四》:网络请求实现教程
下一篇:前端外行的微信小程序瞎折腾之旅
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站