小程序开发（一）

记录学习笔记，嘿嘿，以免遗忘。

一、小程序代码构成——项目结构

1.项目基本结构

 ①pages用来存放所有小程序的页面

 ②utils用来存放工具性质的模块（eg.格式化时间的自定义模块）

utils.js 文件里 ，fomatTime 格式化时间模块

通过module.exports共享

③app.js小程序项目的入口文件

④app.json小程序项目全局配置文件

对页面窗口选项等进行全局配置

⑤app.wxss小程序项目的全局样式文件 

⑥ project.config.json项目的配置文件

⑦sitemap.json 用来配置小程序及其页面是否允许被微信索引

2.小程序页面组成

页面存放在pages目录中，以单独文件夹存在

index 和 logs 页面在单独文件夹

 一个页面由四个组成

3.json配置文件

作用：通过不同的.json配置文件，可以对小程序进行不同级别的配置。

小程序中有四种配置文件

 

 3.1 app.json

全局配置文件，包括小程序所有页面路径，窗口外观，界面表现，底部tab

 demo 例子如下

 这四个配置的作用

 style ：v2是版本号——全新样式

sitemaplocation:指明sitemap.jason的存放路径

3.2 project.config.json

对小程序开发工具的个性化配置。

eg.

tips 若使用其他人的小程序项目在本机需要修改此文件夹里的appid 不然运行报错。

3.3 sitemap.json文件

微信开发的小程序内搜索，类似于PPC网页的SEO, sitemap.json文件用于配置小程序页面是否被允许微信索引。

 rules数组索引规则——所有的页面（page*),都被允许allow索引。disallow不允许被索引。

 project.config.jason setting 写入"checkSiteMap": false,  去掉控制台是否允许索引提示。

3.4 页面的.json配置文件

页面json 和全局app.json同步，但可以单独使用页面界面个性化配置。

"navigationBarBackgroundColor": "#00b26a"

页面背景栏变绿

4 认识小程序页面

 4.1 新建小程序页面

app.json——pages 新增页面存放路径，自动创建页面文件。新建list页面

 4.2 修改项目首页

调整app.json——pages数组页面路径的前后顺序，可以修改项目的首页。

4.3 WXML模板

 wxml 小程序设计的标签语言，构建小程序页面结构——类似html。

4.4 WXSS样式

 4.5.js文件