3 项目目录结构
3.1 项目目录结构
3.1.1 目录介绍
# 1 项目主配置文件，在项目根路径下，控制整个项目的
-app.js # 小程序入口文件，小程序启动，会执行此js
-app.json # 小程序全局配置文件，配置小程序导航栏颜色等信息
-app.wxss # 小程序全局样式
-app.js和app.json必须存在
# 2 页面文件
-pages文件夹内，有一个个文件夹（index，login，register）--> 每个文件夹下有4个文件，
-xx.js # 页面逻辑：js代码控制
-xx.wxml # 页面结构/布局，html === wxml，部分标签不一样
-xx.json # 页面配置，当前页面导航栏颜色等
-xx.wxss # 页面样式，当前页面的样式，当前页面样式优先级高于小程序全局样式
-xx.js和xx.wxml必须存在
# 3 其他非重点
-components 页面会用到的组件，每个组件放到一个文件夹内，每个文件夹内有4个文件
-xx.js
-xx.wxml
-xx.json
-xx.wxss
-exlintrc.js 语法检查，不用
项目配置，基础配置，整个项目存放位置，是否开启https
-project.config.json 开发者工具默认配置
-project.private.config.json 开发者工具用户配置，优先用这个，可以删除
-sitemap.json 页面抓取相关，搜索优化，上线后他人通过哪些关键字搜索到小程序
3.1.2 配置文件
3.1.2.1 项目配置app.json
# 1 小程序全局配置文件，用于配置小程序的一些全局属性和页面路由，默认标题以及导航栏颜色，是否下拉刷新等
# 2 配置参考地址
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
# 3 部分配置
属性 类型 必填 描述 最低版本
entryPagePath string 否 小程序默认启动首页
pages：页面路径列表
window：全局的默认窗口表现：顶部颜色，是否有下拉，经常用到
3.1.2.2 页面配置xx.json
# 1 小程序页面配置文件，也称局部配置文件，用于配置当前页面的窗口样式、页面标题等
# 2 app.json的部分配置，也支持对单个页面进行配置，可以在页面对应的 xx.json文件来对本页面的表现进行配置，即第3点
# 3 页面中配置项在当前页面会覆盖app.json中相同的配置项（样式相关的配置项属于app.json中的window属性，但这里不需要额外指定window字段），具体的取值和含义可参考全局配置文档说明
# 4 参考文档
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
# 5 常用配置
navigationBarBackgroundColor # 导航栏背景颜色，如 #000000
navigationBarTextStyle # 导航栏标题、状态栏颜色，仅支持 black / white
navigationBarTitleText # 导航栏标题文字内容
3.1.2.3 工程配置
# 1 project.config.json project.private.config.json
# 2 小程序项目配置文件，用于保存项目的一些配置信息和开发者的个人设置
# 3 参考文档
https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html
project.config.json的配置与详情里的本地设置是联动的。
调试基础库
3.1.2.4 搜索seo相关配置
# 1 作用
微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。
# 2 参考文档
https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html
# 3 配置 -->用户搜索小程序，任意页面有关键字，都会被搜索到
{
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
"rules": [{
"action": "allow",
"page": "*"
}]
}
3.2 webview渲染
3.2.1 webview与skyline模式
# 1 webview模式：老一点，稳定，支持新老版本
# 2 skyline模式：新一点，不支持老版本，不太稳定
# 3 调整成webview模式更加稳定一些
# 4 项目配置 --> app.json
app.json删除以下配置
3.3 新建页面
# 1 app.json只有一个页面 === 小程序只有一个页面
-后期增加页面
# 2 增加页面方式一
1 pages右键 --> 新建文件夹
2 新建的文件夹右键 新建page
3 生成4个文件，分别是xx.js，xx.wxml，xx.json，xx.wxss
# 3 增加页面方式二
1 app.json pages中，新增一行
2 自动创建文件夹和页面
增加页面方式一
输入page名，会生成四个文件
同时app.json会多出一行login内容
增加页面方式二
3.4 启动页面调整
# 1 修改默认启动页面
## 方式1 在app.json的pages修改顺序，第一个即默认启动页面
{
"pages": [
"pages/login/login",
"pages/index/index",
"pages/register/register"
],
}
## 方式2 通过entryPagePath配置 --- 较多
{
"entryPagePath": "pages/index/index",
}
## 方式3：临时用
-添加编译模式，使用较少
方式1 pages
方式2
entryPagePath
方式3 添加编译模式
3.5 调试小程序
3.5.1 调试小程序基础库
# 微信小程序基础库，一直在版本升级
-转发功能
-发送朋友圈
-等等
# 不同功能是在不同版本加入的
-假设基于老版本开发，那么某些功能可能不存在
-开发时，如果没有，写了无效，应确认基础库是否支持此功能
-参考文档，https://developers.weixin.qq.com/miniprogram/dev/framework/client-lib/version.html
如果基础库低于1.2.0，即无此转发功能
基础库版本
3.5.2 调试窗口
调试器
3.5.3 真机调试
# 刚才说的都是模拟器调试
# 真机调试 - 微信调试
-扫描真机调试二维码，出现vconsole
# 自动真机调试
-扫码登录会自动连接手机
自动真机调试
也有vconsole
3.6 纯净项目
# 纯净模式，删除项目不需要的东西，只留核心 --> 开发
## 删除components
## 删除pages，除index之外的pages
## 删除exlintrs.js，project.config.json，project.private.config.json，sitemap.json(配置文件删除会有默认配置）
# app.json
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarTitleText": "功能演示",
"navigationBarBackgroundColor": "#0000ff",
"enablePullDownRefresh": false,
"backgroundColor": "#00ffff",
"backgroundTextStyle":"dark"
},
"style": "v2"
}
# app.wxss
# app.js
App({})
# pages/index
## index.js
Page({})
## index.wxml
<view class="container">
吴磊吴磊
</view>
## index.wxss
## index.json
{
"usingComponents": {
},
"navigationBarTitleText": "功能演示index",
"navigationBarBackgroundColor": "#ffff00",
"enablePullDownRefresh": true,
"backgroundColor": "#00ffff",
"backgroundTextStyle":"light"
}
### index.json的配置优先app.json
# 提示，如果代码修改没有效果，清除全部缓存
# json文件不能有注释
