安装微信开发者工具、创建项目，介绍项目的配置文件，删除不需要的文件，只保留核心，用于从基础开发项目。

1 小程序概述

1.1 什么是微信小程序

微信小程序是一种运行在微信内部的轻量级应用程序。
小程序无需下载和安装，只需要在微信中下拉，搜一搜或扫一扫搜索点击使用即可。

1.2 大前端概念

1、后端(后端接口)
(1)python的django框架。
(2)python的flask框架。
(3)python的fastapi框架。
(4)go的gin框架。
(5)go的beego框架。
(6)java的ssh框架。
(7)java的ssm框架。
(8)java的springboot框架。

2、前端(大前端)
(1)浏览器中访问的页面(web页面)—>html、css、js。
(2)安卓的app—>java。
(3)ios的app—>object C。
(4)微信小程序—>wxml、wxss、js。
(5)桌面端—>Qt平台(python、c++)。
(6)鸿蒙开发。

3、前端统一开发框架
(1)uni-app
国人推出，使用html、css、js，使用vue的语法，在uni-app平台开发，打包到安卓、ios、微信小程序、web端。
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者可以编写一套代码，就能发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/快手等)等多个平台。

(2)flutter
google推出，一处开发，编译到ios、安卓、桌面。
Flutter是由Google开发和维护的一个开源UI软件开发工具包(SDK)，用于构建跨平台的高性能、高保真的应用程序。
使用一套代码库，可以编译并运行在iOS、Android、Web、Windows、macOS和Linux等多个平台上，实现“一次编写，多端运行”。

我会python的django开发，我可以开发安卓app吗？可以开发微信小程序吗？
django可以作为它们的后端，但是前端还是需要单独开发。

1.3 账号注册

1、访问【微信公众平台】，注册一个微信小程序账号
2、申请账号需要准备一个邮箱，该邮箱要求：
未被微信公众平台注册。
未被微信开放平台注册。
未被个人微信号绑定过。
如果被绑定了需要解绑或使用其他邮箱。
3、微信小程序信息配置
注册成功后，需要打开微信公众平台对小程序账号进行一些设置。
小程序后续需要提交审核和上线，提交审核时，小程序账号信息是必填项，名称、图标、类目等。
小程序备案和微信认证。

1.4 开发流程

微信小程序–》本地开发环境–》线上环境。
(1)本地：微信开发者工具+Pycharm开发Django
(2)线上：
体验版：几个人体验，API需要在公网。
发布：备案，API需要在公网，全国各地人都可以用。

1.5 小程序成员

微信小程序成员分为两种：
(1)项目成员：表示参与小程序开发(我们)、运营的成员，包括运营者、开发者及数据分析者，项目成员可登陆微信公众后台，管理员可以在成员管理中添加、删除项目成员，并设置项目成员的角色。
(2)体验成员：表示参与小程序内测体验的成员，可使用体验版小程序，但不属于项目成员。管理员及项目成员均可添加、删除体验成员。

2 创建项目

2.1 创建项目流程

1、获取小程序id
小程序后台–》管理–》开发管理–》开发设置–》开发者ID
AppID(小程序ID) wxxxxxxxxx
AppSecret(小程序密钥) xxxxxxxxxxxx(不要泄露)
2、下载【微信开发者工具】–需要联网才能使用

3、安装目录D:\Program Files (x86)\Tencent\微信web开发者工具。

2.2 创建项目

1 打开微信开发者工具–》使用微信扫描二维码
2 创建项目
填写名字、路径、APPID
不使用云开发【使用腾讯云的云函数，服务器等等，需要花钱】。
不使用模版。

3 创建完成后，界面如下

4、设置
设置–》编辑器设置–》改变字体大小。
视图–》外观–》移动模拟器位置。
可以勾选掉不显示：模拟器，调试器等。

2.3 本地开发支持http

本地开发，使用Django写后端，
Django运行在0.0.0.0:8000地址，
微信小程序才能通过ip地址访问到我们的Django项目的接口，
微信小程序默认不支持http，但是Django运行在http上，修改一下微信小程序的配置，让小程序支持http请求。
右上角–》详情–》本地设置–》不校验合法域名。

3 项目目录

3.1 项目目录结构

1、项目主配置文件
项目主配置文件必须放到项目的根目录下，控制整个项目
(1)app.js： 小程序入口文件，小程序启动，会执行这个js
(2)app.json：小程序的全局配置文件：顶部的颜色、标题等等
(3)app.wxss：小程序的全局样式
注意：app.js和app.json文件是必须的，不能没有

2、页面文件
小程序有一个个页面，每个页面所需的文件，都存放在pages目录下，一个页面一个文件夹
pages文件夹下，有一个个的文件夹(index,login,register)，每个文件夹下有4个文件。
(1)xx.js： 页面逻辑 js代码存放位置
(2)xx.wxml：页面结构 类html文件存放位置
(3)xx.wxss：页面样式 css存放位置，若全局样式也有，以当前页面为准
(4)xx.json：小页面配置 当前页面顶部颜色，标题
注意：xx.js文件和xx.wxml文件是必须的，不能没有

├── components                  【页面中使用的组件】
├── pages   					【页面文件目录】
│   ├── index					【页面】
│   │   ├── index.js				【页面JS】
│   │   ├── index.json				【页面配置】
│   │   ├── index.wxml				【页面HTML】
│   │   └── index.wxss				【页面CSS】
│   └── logs					【页面】
│       ├── logs.js					...
│       ├── logs.json				...
│       ├── logs.wxml				...
│       └── logs.wxss				...
├── utils						【自定义工具】
│	└── utils.js					【功能的定义】
├── app.js						【全局JS】
├── app.json					【全局配置】
├── app.wxss					【全局CSS】
├── project.config.json			【开发者工具默认配置】
├── project.private.config.json	【开发者工具用户配置,在这里修改，优先用这个，可以删除】
├── .eslintrc.js				【ESlint语法检查配置】
├── sitemap.json				【微信收录页面，用于搜索，上线后，搜索关键字就可以搜到我们】

3.2 配置文件

3.2.1 app.json(全局配置)

1、小程序全局配置文件，用于配置小程序的一些全局属性和页面路由，默认标题，顶部颜色，是否有下拉刷新。
2、app.json 配置示例
entryPagePath：小程序默认启动首页
pages：小程序总共有多少个页面
window：全局的默认窗口表现，顶部颜色，是否有下拉，它控制很多东西，这个经常用。

{"entryPagePath": "pages/login/login","pages": ["pages/index/index","pages/login/login"],"window": {"navigationBarTitleText": "功能演示",   # 标题"navigationBarBackgroundColor": "#0000FF", #颜色"enablePullDownRefresh": false,  # 是否带下拉刷新"backgroundColor": "#00FFFF",    # 下拉刷新颜色"backgroundTextStyle": "dark"    # light ，下拉刷新的点点什么颜色},"style": "v2","sitemapLocation": "sitemap.json"
}

3.2.2 xxx.json(页面配置)

1、小程序页面配置文件，也称局部配置文件，用于配置当前页面的窗口样式、页面标题等。
2、app.json中的部分配置，也支持对单个页面进行配置，可以在页面对应的xxx.json 文件来对本页面的表现进行配置。
3、页面中配置项在当前页面会覆盖app.json中相同的配置项(样式相关的配置项属于app.json中的window属性，但这里不需要额外指定window字段)。

{"usingComponents": {},"navigationBarTitleText": "登录页面","navigationBarBackgroundColor": "#000080","enablePullDownRefresh": true,"backgroundTextStyle": "light"
}

定义了当前页面需要使用的自定义组件，usingComponents是一个对象，键(key)是组件的名称，值(value)是组件的路径。

3.2.3 project.config.json(项目配置)

(1)project.config.json
(2)project.private.config.json
小程序项目的配置文件，用于保存项目的一些配置信息和开发者的个人设置。

3.2.4 搜索相关配置

微信现已开放小程序内搜索，开发者可以通过sitemap.json配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。

当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。
当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。

爬虫访问小程序内页面时，会携带特定的user-agent：mpcrawler及场景值：1129。
需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。

以后用户搜索小程序，任意页面有关键字，都会被搜索到。

{"desc": "关于本文件的更多信息","rules": [{"action": "allow","page": "*"}]
}

3.3 WebView渲染模式

webview渲染模式和skyline渲染模式
(1)webview：老一点，稳定，支持低版本和高版本。
(2)skyline：新一点，不太稳定，不支持低版本。

默认使用Skyline渲染模式，支持最新的基础库，不支持低版本客户端。
现在改成webview模式，打开app.json，去掉下面的三个配置项。

"renderer": "skyline",
"rendererOptions": {"skyline": {"defaultDisplayBlock": true,"disableABTest": true,"sdkVersionBegin": "3.0.0","sdkVersionEnd": "15.255.255"}
},
"componentFramework": "glass-easel",  

3.4 新建页面

方式一：
1、在pages上，新建文件夹，logs
2、在文件夹上右键，新建页面，写上名字logs，自动创建出四个文件
3、在 app.json中的pages就会多一行

"pages": ["pages/index/index","pages/logs/logs"
],

方式二：
新建页面可以直接在app.json中增加一行，pages下会自动创建出一个页面。

"pages": ["pages/index/index","pages/logs/logs","pages/login/login"
],   

3.4 默认启动页面

修改小程序一启动，就显示的页面。
方式一：修改顺序

# app.json，谁在第一行，一打开小程序就显示那个页面"pages": ["pages/index/index","pages/logs/logs","pages/login/login"],

方式二：通过entryPagePath配置

# app.json
"entryPagePath": "pages/index/index",

方式三：临时添加，临时看一下

3.5 调试小程序

3.5.1 调试基础库

微信小程序的基础库，一直在做版本升级
例如：转发功能、发送朋友圈功能
不同的功能是在不同版本中加入的。

假设我们基于老版本的基础库开发的，有的新功能可能没有，
在开发的时候，做功能如果发现写了没效果，确认一下这个基础库是否支持这个功能。

3.5.2 调试窗口

Wxml：页面布局。
Console：调试，我们打印的，小程序自己打印的。
Network：网络请求。
AppData：当前页面定义的变量。
Storage：本地存储。

3.5.3 真机调试

微信扫二维码，这样在微信上就可以看到了。

3.6 纯净项目

删除不需要的，只保留核心，用于从基础开发。
(1)删除components文件夹
(2)删除.eslintrc.js
(3)删除project.config.json
(4)删除project.private.config.json
(5)删除sitemap.json

3.6.1 app.js

// app.js
App({})

3.6.2 app.json

{"pages": ["pages/index/index"],"window": {"navigationBarTitleText": "功能演示",   "navigationBarBackgroundColor": "#0000FF", "enablePullDownRefresh": true,  "backgroundColor": "#00FFFF",    "backgroundTextStyle": "dark"},"style": "v2"
}

(1)导航栏的显示文本：功能演示
(2)导航栏的背景色：蓝色
(3)是否下拉刷新：是
(4)下拉刷新的背景色：浅绿色
(5)下拉刷新里点号的颜色：light或dark

3.6.3 app.wxss(空的)

3.6.4 pages/index/index.js

// index.js
Page({})

3.6.5 pages/index/index.json

{"usingComponents": {},"navigationBarTitleText": "登录页面",   "navigationBarBackgroundColor": "#FF0000", "enablePullDownRefresh": true,  "backgroundColor": "#00FFFF",    "backgroundTextStyle": "light"
}

页面自己的配置优先使用。

3.6.6 pages/index/index.wxml

<!--index.wxml-->
<view class="container">周笔畅
</view>

3.6.7 pages/index/index.wxss(空的)

4 参考附录

参考微信公众平台官网
参考微信开发者工具下载地址
参考小程序全局配置的参考地址
参考小程序页面配置的参考地址
参考小程序项目配置的参考地址
参考小程序搜索相关配置的参考地址
参考小程序调试基础库