文章目录
安装微信开发者工具、创建项目，介绍项目的配置文件，删除不需要的文件，只保留核心，用于从基础开发项目。
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 参考附录
参考微信公众平台官网
参考微信开发者工具下载地址
参考小程序全局配置的参考地址
参考小程序页面配置的参考地址
参考小程序项目配置的参考地址
参考小程序搜索相关配置的参考地址
参考小程序调试基础库