2.微信小程序的页面结构 微信小程序

shuke 2017-11-21 1736

微信小程序其实并不是安装了一个你开发的应用,还是归于网页开发。

通过以下对比你们发现,与h5有太多的相似;


微信小程序页面 vs 网页(web)

====================================================

.wxml(view,text)  .html 标签 div,span,nav,header......

.wxss == .css 样式

.js(.wxs)         .js 脚本

.json 页面独立配置

====================================================

实际上在微信小程序项目中生成了不同类型的四种文件:

.json 后缀的 JSON 配置文件

.wxml 后缀的 WXML 模板文件

.wxss 后缀的 WXSS 样式文件

.js 后缀的 JS 脚本逻辑文件


对比后发现其实小程序还是属于H5的范畴;更倾向于WEBAPP;


着重说明的一点是:

app.json 全局配置负责入口页面(主页),注册页面(路由),导航等配置;

引用官方:APP.JSON是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置


JSON 页面配置 

如果你整个小程序的风格是蓝色调,那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样,可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块,因此我们提供了 page.json,让开发者可以独立定义每个页面的一些属性,例如刚刚说的顶部颜色、是否允许下拉刷新等等。


WXML 模板

不过布局标签默认只有两个(一个VIEW块级标签,一个TEXT行内标签)

从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互. 小程序中也有同样的角色,其中 WXML 充当的就是类似 HTML 的角色.


WXSS 样式

WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。


JS 交互逻辑

一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。






最新回复 (0)
全部楼主
返回