项目的基本组成结构
1.pages用来存放所有小程序的页面
2.utils用来存放工具性质的模块
3.app.js小程序性质的项目文件
4.app.json小程序项目的全局配置文件
5.app.wxss小程序项目的全局样式文件
6.project.config.json项目的配置文件
7.sitemap.json用来配置小程序及其页面是否允许被微信索引
小程序页面的组成部分
1..js文件,页面的脚本文件,用来存放页面的数据、事件处理函数等
2..json文件,当前页面的配置文件,配置窗口的外观、表现等
3..wxml文件,页面的模板结构文件
4..wxss文件,当前页面的样式表文件
小程序代码的构成-JSON配置文件
1.JSON配置文件的作用
JSON是一种数据格式,在实际开发中,总是以配置文件的形式出现。
小程序中有四种json配置文件,分别是:app.json,project.config.json,sitemap.json,index.json
2.app.json文件
app.json文件是小程序的全局配置,包括了小程序的所有页面路径、窗口外观、底部tab、界面表现等。
Demo项目里边的app.json配置内容如下:
1.pages:用来记录小程序所有的页面路径
2.window:全局定义小程序所有页面的背景色、文字颜色等
3.style:全局定义小程序组件所使用的样式版本
4.sitemapLocation:用来指明sitemap.json文件的位置
3.project.config.json文件
project.config.json是项目配置文件,主要来记录我们对小程序开发工具所做的个性化配置
如:
1.setting中保存了编译相关的配置
2.projectname保存了项目名陈
3.appid保存了小程序的账号id
4.sitemap.json文件
微信现已开放小程序内搜索,效果类似PC页面的SEO,sitemap.json文件主要用来配置小程序页面是否允许微信索引。
5.页面的.json文件
小程序中的每一个页面都可以通过.json文件对本页面的窗口外观进行配置,页面中的配置项会覆盖app.json的window中的相同的配置项。
小程序的代码构成-WXML模板
wxml是小程序框架设计的一套标签语言,用来构建小程序的页面结构,其作用类似于HTML
WXML和HTML的区别
1.标签名不同
HTML(div,span,img,a)
WXML(view,text,image,navigator)
2.属性节点不同
<a href="#">超链接</a>
<navigator url="/pages/home/home"></navigator>
3.提供了类似Vue中的模版语法
数据绑定
列表渲染
条件渲染
小程序的代码构成-WXSS样式
WXSS是一套样式语言,用于描述WXML的组件样式,作用类似于网页开发中的CSS
WXSS和CSS的区别
1.WXSS新增了rpx尺寸单位
WXSS在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算
2.提供了全局样式和局部样式
3.WXSS仅支持部分CSS选择器
要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。 HTML页面中的元素就是通过CSS选择器进行控制的。
“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素
css中五大选择器,id选择器、标签选择器、后代选择器、类选择器、子选择器
小程序的代码构成-JS逻辑交互
一个项目仅仅提供界面展示是不够的,在小程序中我们通过.js文件来处理用户的操作
JS文件的分类
小程序的JS文件分为三大类:
1.app.js文件
是整个小程序的入口文件,通过调用APP()函数来启动整个小程序
2.页面的.js文件
是页面的入口文件,通过调用Page()函数来启动这个页面
3.普通的js文件
是普通的功能模块文件,用来封装公共的属性或函数供页面使用