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

小程序资讯

这一篇中要了解一个函数：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 这里。

本章的内容inotify了数据，下一篇文章中我们可以去了解如何发动网络命令取钱数据。

3、wxml代码分析

（1）有关组件

首先，这里可以牵涉至三种文件：wxml / wxss 和 js。index.wxml代码：

bindscrolltolower="lower" bindscroll="scroll" class="scroll-wrapper">

微信小程序摆弄《四》：text组件，progress组件，button组件

秀杰空战教程系列《四》：倒计时组件，LXStepper组件-商品数量以此类推 ...

有关资讯RELEVANT NEWS 测试智商的小程序 小程序开发技巧: 提高你的小程序开发技能 小程序FAQ答疑你的困惑 Timah小程序 扫码点菜微信小程序 如何维护小程序的appsecret？ 集锦服务SERVICE 小程序订制 商城小程序 / 点餐小程序 / O2O小程序 积极响应式网站 积极响应式网站建设 / 电商网站建设 / 高端网站建设 APP订制 IOS苹果APP / Android安卓APP

最新案例LATEST CASES 精锐部队教育 教育节能环保专场 健康检查无忧网小程序 材易多商城

互动至：     window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)]; 关于我们 公司简介 企业文化 资质荣誉 服务范围 小程序订制 系统平台研发 网站订制研发 营销推展 小程序资讯 小程序官方 小程序开发方案 小程序常见问题 联系我们 联系我们 人才招录 上海 安徽 山东  电话：61554458/61554459  邮箱：service@jijinweb.com  地址：上海市呼兰西路28号智力产业园9号楼209室  电话：021-61554458  邮箱：service@jijinweb.com  地址：安徽省合肥市肥西路1189号金龙国际广场A座707室  电话：021-61554458  邮箱：service@jijinweb.com  地址：山东省烟台市东苑路8388号28号402室 友情链接： 餐饮猫 语料库 周易 石家庄人才网 旅游进击 河北信息港 河南招标 四川城市技师学院 四川五月花技师学院 成都天府航空职业学院 个人简历译者 魔方软件 净土宰杀仪轨 高中网 手抄报模板 花卉网 吾尚健康网 精品女性网 pos机代理 无机涂料 范文屋 石家庄网站建设 非物质文化遗产名录 河北人才网 易经风水 水性工业油漆 井陉招录 四川中职网 值班员工具 全民写作 电子票务系统 网站seo 成都期望职业学校 免费方士 在线排序网 优生优育 建筑资质查阅 杭州网站建设 上海网站建设 网站建设 Copyright©2013-2020 上海集锦信息科技有限公司版权所有 百度统计数据 沪ICP对备13010428号 var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?87bb27c1df348a961502a8b6eea3f4d4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();