1.小程序介绍

mp.weixin.qq.com/

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

小程序种类

微信小程序
支付宝小程序
百度小程序
字节跳动小程序
qq小程序
京东小程序
.....

本课程主要学习微信小程序，只要学会微信小程序，其他小程序就会很快上手，微信小程序是小程序界的标准。

随着技术的发展，现在已经不满足只写某一个类型的小程序，这样开发成本太高，所以现在很多公司倾向于使用一套代码同时部署到不同的小程序平台，简单一点来说就是，一次开发，多端运行，典型的代表有 uniapp，taro

要想学好uniapp，前提条件是得学习vue以及微信小程序

2.准备小程序的账号

打开网址：mp.weixin.qq.com/

账号分类---小程序 ---- 鼠标移动上去 --- 查看详情 --- 滑动页面至底部 ---- 前往注册

也可以直接点击网址进行注册： mp.weixin.qq.com/wxopen/ware…

账号选择个人即可

账号类型一定要选择微信小程序

3.准备小程序开发者工具

下载地址： developers.weixin.qq.com/miniprogram…

4.查看小程序的后台界面

打开网址：mp.weixin.qq.com/

账户名密码登录
扫码登录：扫码完成，选择自己的小程序项目即可

4.1 首页

可视化说明小程序统计数据

4.2 管理

版本管理

开发版本：主要通过微信开发者工具开发，然后通过开发者工具上传即可显示体验二维码，只有项目成员和体验成员才可扫码查看效果
审核版本：开发版本点击提交审核按钮，填写审核的信息，然后交给微信审核即可
线上版本：微信审核通过，即可点击项目上线，所有人可以搜索微信小程序的名字从而使用小程序

成员管理

可以添加项目成员以及体验成员

项目成员：运营者，开发者，数据分析者，一个小程序项目最多含有15个项目成员
体验成员：只是拥有体验权限，一个小程序项目最多含有15个体验成员

添加时注意要添加的是成员的微信号，记住不是微信绑定的手机号

用户反馈

付费管理

门店管理

课外作业

4.3 统计

统计一般跟开发者无太大关系，数据分析者需要多加关注，通过数据分析，解析新的需求以及需要的改进点，项目组提出新的方案，再由开发者实现

4.4 功能

微信搜一搜
客服
订阅消息
页面内容接入
实验工具
小程序联盟

4.5 开发

开发管理
- 运维中心
- 监控告警
- 开发设置

如果小程序项目要上线，就必须的配置开发管理 - 开发设置 - 服务器域名

接口设置 **
安全中心
开发工具
云服务

4.6 设置

基础设置

根据小程序的业务需求，选择合适的服务类目，否则小程序提交审核是会不通过

5.使用微信开发者工具

6.熟悉微信开发者工具

模拟器
编辑器
调试器
可视化：不建议使用-拖拽布局页面
云开发：不需要单独的后端的接口，包含数据库、存储、云函数、云托管
小程序模式：另一个插件模式
普通编译：小程序每次热更新都会让小程序从第一个页面开始渲染，那么为了提高开发效率，可以选择添加编译模式，从而快速调试页面
预览：拥有开发权限和体验权限的人，可以直接查看在手机上的实际的运行结果，它跟小程序的线上版本保持一致
真机调试：拥有开发权限和体验权限的人，可以直接查看在手机上的实际的运行结果，它跟小程序开发者工具中的模拟器效果保持一致（因为真机调试可以不需要后台配置服务器域名等就可以查看效果）
清缓存：清除模拟的缓存信息
上传：点击上传即可将项目进入后台系统中的开发版本和体验版本

版本管理：默认使用 git 作为代码版本管理工具，方便多人合作
详情
- 基本信息
- 性能分析
- 本地设置
  - 调试基础库：非常关键
  - 开发阶段：勾选不校验合法域名、web-view（业务域名）、TLS版本以及HTTPs证书
- 项目配置
  - 高级配置
    - 代码包总大小（使用分包） 20M
    - 代码包总大小（不使用分包） 2M
    - 单个分包/主包大小 2M
    - Tabbar最小个数 2
    - Tabbar最大个数 5
    - Tabbar的icon大小限制 40KB
消息
页面路径
- 页面路径：路由，当前页面展示的一个标识
- 页面参数：列表进入详情，详情区分产品的标识
- 场景值：进入查看小程序的途径

7.熟悉小程序代码

- miniprogram
    - pages  存放该小程序所对应的页面，每个页面一个文件夹
        - index  index页面
            index.ts  index页面的逻辑文件
            index.json index页面的配置文件
            index.wxml  index页面的结构文件
            index.scss  index页面的样式文件
        - logs   logs 页面
            logs.ts
            logs.json
            logs.wxml
            logs.scss
    - utils 自定义的工具包
        util.js 自定义的函数
    app.ts 全局的逻辑文件
    app.json 全局的配置文件
    app.wxss 全局的样式文件
    sitemap.json 被搜索的配置文件
- typings
  - types
  	- wx
  	  index.d.ts
  	  lib.wx.api.d.ts
  	  lib.wx.app.d.ts
  	  lib.wx.behavior.d.ts
  	  lib.wx.cloud.d.ts
  	  lib.wx.component.d.ts
  	  lib.ex.event.d.ts
  	  lib.wx.page.d.ts
  	index.d.ts
  index.d.ts
.eslintrc.js js代码的规则描述
 project.config.json 项目的配置文件
 project.private.config.json 项目私有的配置文件
 tsconfig.json

8.小程序代码的构成

developers.weixin.qq.com/miniprogram…

学习思路，从起步 - 小程序代码构成开始，如果见到有链接，就跳转过去学习完整的知识

8.1 JSON配置

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色

8.1.1 小程序的配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等

developers.weixin.qq.com/miniprogram…

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性：

属性	类型	必填	描述	最低版本
entryPagePath	string	否	小程序默认启动首页
pages	string[]	是	页面路径列表
window	Object	否	全局的默认窗口表现
tabBar	Object	否	底部 `tab` 栏的表现
networkTimeout	Object	否	网络超时时间
debug	boolean	否	是否开启 debug 模式，默认关闭
functionalPages	boolean	否	是否启用插件功能页，默认关闭	2.1.0
subpackages	Object[]	否	分包结构配置	1.7.3
workers	string	否	`Worker` 代码放置的目录	1.9.90
requiredBackgroundModes	string[]	否	需要在后台使用的能力，如「音乐播放」
plugins	Object	否	使用到的插件	1.9.6
preloadRule	Object	否	分包预下载规则	2.3.0
resizable	boolean	否	PC 小程序是否支持用户任意改变窗口大小（包括最大化窗口）；iPad 小程序是否支持屏幕旋转。默认关闭	2.3.0
usingComponents	Object	否	全局自定义组件配置	开发者工具 1.02.1810190
permission	Object	否	小程序接口权限相关设置	微信客户端 7.0.0
sitemapLocation	string	是	指明 sitemap.json 的位置
style	string	否	指定使用升级后的 weui 样式	2.8.0
useExtendedLib	Object	否	指定需要引用的扩展库	2.2.1
entranceDeclare	Object	否	微信消息用小程序打开	微信客户端 7.0.9
darkmode	boolean	否	小程序支持 DarkMode	2.11.0
themeLocation	string	否	指明 theme.json 的位置，darkmode为 true 为必填	开发者工具 1.03.2004271
lazyCodeLoading	string	否	配置自定义组件代码按需注入	2.11.1
singlePage	Object	否	单页模式相关配置	2.12.0
supportedMaterials	Object	否	聊天素材小程序打开相关配置	2.14.3
serviceProviderTicket	string	否	定制化型服务商票据
embeddedAppIdList	string[]	否	半屏小程序 appId	2.20.1
halfPage	Object	否	视频号直播半屏场景设置	2.18.0
debugOptions	Object	否	调试相关配置	2.22.1
enablePassiveEvent	Object或boolean	否	touch 事件监听是否为 passive	2.24.1
resolveAlias	Object	否	自定义模块映射规则

entryPagePath

设置小程序默认的启动页面，如果不作设置，那么将会取pages数组的第一项为默认启动项，开发过程中，一般不建议这么使用，你可以使用开发者工具中添加编译模式快速解决问题

pages

用于指定小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

如何给小程序快速添加页面,写好页面后直接保存即可

{
	"pages":[
    "pages/home/home",
    "pages/index/index",
    "pages/logs/logs",
    "pages/kind/kind",
    "pages/cart/cart",
    "pages/user/user"
  ],
  ...
}

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 `#000000`
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 `black` / `white`
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： `default` 默认样式 `custom` 自定义导航栏，只保留右上角胶囊按钮。参见注 2。	iOS/Android 微信客户端 6.6.0，Windows 微信客户端不支持
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 `dark` / `light`
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
enablePullDownRefresh	boolean	false	是否开启全局的下拉刷新。详见 Page.onPullDownRefresh
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为 px。详见 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋转设置，支持 `auto` / `portrait` / `landscape` 详见响应显示区域变化	2.4.0 (auto) / 2.5.0 (landscape)
restartStrategy	string	homePage	重新启动策略配置	2.8.0
initialRenderingCache	string		页面初始渲染缓存配置，支持 `static` / `dynamic`	2.11.1
visualEffectInBackground	string	none	切入系统后台时，隐藏页面内容，保护用户隐私。支持 `hidden` / `none`	2.15.0
handleWebviewPreload	string	static	控制预加载下个页面的时机。支持 `static` / `manual` / `auto`	2.15.0

{
	...,
	"window": {
        "navigationBarBackgroundColor": "#f66",
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "嗨购",
        "navigationStyle": "default",
        "homeButton": true,
        "backgroundColor": "#123123",
        "backgroundTextStyle": "dark",
        "enablePullDownRefresh": true,
        "pageOrientation": "portrait"
      },
  ....
}

tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性	类型	必填	默认值	描述	最低版本
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是		tab 的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabbar 上边框的颜色，仅支持 `black` / `white`
list	Array	是		tab 的列表，详见 `list` 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 `bottom` / `top`
custom	boolean	否	false	自定义 tabBar，见详情	2.5.0

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 `position` 为 `top` 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 `position` 为 `top` 时，不显示 icon。

如何获取项目需要的图片

www.iconfont.cn/

搜索图标 - 加入购物车 - 点击购物车 - 下载素材

输入颜色 #333333 和 #ff6666。选择大小为81px，下载png图片即可

{
	...,
	"tabBar": {
        "color": "#333",
        "selectedColor": "#f66",
        "backgroundColor": "#efefef",
        "borderStyle": "black",
        "list": [
          {
            "pagePath": "pages/home/home",
            "text": "首页",
            "iconPath": "resources/tabBar/home.png",
            "selectedIconPath": "resources/tabBar/home_active.png"
          },
          {
            "pagePath": "pages/kind/kind",
            "text": "分类",
            "iconPath": "resources/tabBar/kind.png",
            "selectedIconPath": "resources/tabBar/kind_active.png"
          },
          {
            "pagePath": "pages/cart/cart",
            "text": "购物车",
            "iconPath": "resources/tabBar/cart.png",
            "selectedIconPath": "resources/tabBar/cart_active.png"
          },
          {
            "pagePath": "pages/user/user",
            "text": "我的",
            "iconPath": "resources/tabBar/user.png",
            "selectedIconPath": "resources/tabBar/user_active.png"
          }
        ]
      },
  ...
}

networkTimeout

各类网络请求的超时时间，单位均为毫秒。

{
	...,
	"networkTimeout": {
        "request": 6000,
        "connectSocket": 4000,
        "uploadFile": 600000,
        "downloadFile": 6000000
      },
  ....
}

debug

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有 Page 的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题。

{
	...,
	"debug": false,
	....
}

底部tab选项卡对应的页面，会自动添加类似vue中的 keep-alive的功能，原来的activated 和 deactivated 分别对应小程序中的。onShow 和 onHide

subpackages

启用分包加载时，声明项目分包结构。

分包加载：

整个小程序所有分包大小不超过 20M
单个分包/主包大小不能超过 2M

使用分包

独立分包

"subPackages": [
    {
      "root": "pckSearch",
      "name": "search",
      "pages": [
        "pages/search/search",
        "pages/result/result"
      ],
      "independent": true 
    },
    {
      "root": "pckUser",
      "name": "user",
      "pages": [
        "pages/login/login",
        "pages/register/register"
      ]
    }
  ],
  "debug": true,

开启debug模式，添加编译模式，调试分包的页面，观察独立分包和非独立分包的效果，通过控制台的console查看

分包预下载

开发者可以通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。

做一个电商类型的小程序，大部分的用户一定回去搜索，所以可以把搜索相关业务写到分包，当用户打开主包时，预下载搜索的分包

{
	...,
	"subPackages": [
        {
          "root": "pckSearch",
          "name": "pckSearch",
          "pages": [
            "pages/search/search",
            "pages/result/result"
          ],
          "independent": true 
        },
        {
          "root": "pckUser",
          "name": "pckUser",
          "pages": [
            "pages/login/login",
            "pages/register/register"
          ]
        }
      ],
     "preloadRule": {
       "pages/home/home": {
         "network": "all",
         "packages": [
          "pckSearch"
         ]
       }
     },
  ...
}

整体的全局配置文件如下：

{
  "pages": [
    "pages/home/home",
    "pages/kind/kind",
    "pages/cart/cart",
    "pages/user/user",
    "pages/detail/detail",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#f66",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "嗨购",
    "navigationStyle": "default",
    "backgroundColor": "#efefef",
    "backgroundTextStyle": "dark",
    "restartStrategy": "homePageAndLatestPage",
    "visualEffectInBackground": "hidden"
  },
  "tabBar": {
    "color": "#333",
    "selectedColor": "#f66",
    "backgroundColor": "#efefef",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "tabBar/home.png",
        "selectedIconPath": "tabBar/home_active.png"
      },
      {
        "pagePath": "pages/kind/kind",
        "text": "分类",
        "iconPath": "tabBar/kind.png",
        "selectedIconPath": "tabBar/kind_active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "tabBar/cart.png",
        "selectedIconPath": "tabBar/cart_active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "tabBar/user.png",
        "selectedIconPath": "tabBar/user_active.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 6000,
    "connectSocket": 6000,
    "uploadFile": 60000,
    "downloadFile": 60000
  },
  "subpackages": [
    {
      "root": "packageSearch",
      "name": "packageSearch",
      "independent": true,
      "pages": [
        "pages/search/search",
        "pages/result/result"
      ]
    },
    {
      "root": "packageUser",
      "name": "packageUser",
      "pages": [
        "pages/register/register",
        "pages/login/login"
      ]
    }
  ],
  "preloadRule": {
    "pages/home/home": {
      "network": "all",
      "packages": ["packageSearch"]
    }
  },
  "debug": false,
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

8.1.2 工具配置 project.config.json

developers.weixin.qq.com/miniprogram…

8.1.3 页面配置 page.json

developers.weixin.qq.com/miniprogram…

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 `#000000`
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 `black` / `white`
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： `default` 默认样式 `custom` 自定义导航栏，只保留右上角胶囊按钮。	iOS/Android 微信客户端 7.0.0，Windows 微信客户端不支持
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 `dark` / `light`
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
enablePullDownRefresh	boolean	false	是否开启当前页面下拉刷新。详见 Page.onPullDownRefresh
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为px。详见 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋转设置，支持 `auto` / `portrait` / `landscape` 详见响应显示区域变化	2.4.0 (auto) / 2.5.0 (landscape)
disableScroll	boolean	false	设置为 `true` 则页面整体不能上下滚动。只在页面配置中有效，无法在 `app.json` 中设置
usingComponents	Object	否	页面自定义组件配置	1.6.3
initialRenderingCache	string		页面初始渲染缓存配置，支持 `static` / `dynamic`	2.11.1
style	string	default	启用新版的组件样式	2.10.2
singlePage	Object	否	单页模式相关配置	2.12.0
restartStrategy	string	homePage	重新启动策略配置	2.8.0
handleWebviewPreload	string	static	控制预加载下个页面的时机。支持 `static` / `manual` / `auto`	2.15.0
visualEffectInBackground	string	否	切入系统后台时，隐藏页面内容，保护用户隐私。支持 `hidden` / `none`，若对页面单独设置则会覆盖全局的配置，详见全局配置	2.15.0
enablePassiveEvent	Object或boolean	否	事件监听是否为 passive，若对页面单独设置则会覆盖全局的配置，详见全局配置	2.24.1

// pages/home/home.json

{
  "navigationBarTitleText": "嗨购-首页",
  "usingComponents": {}
}

小程序笔记（一）

1.小程序介绍

2.准备小程序的账号

3.准备小程序开发者工具

4.查看小程序的后台界面

4.1 首页

4.2 管理

4.3 统计

4.4 功能

4.5 开发

4.6 设置

5.使用微信开发者工具

6.熟悉微信开发者工具

7.熟悉小程序代码

8.小程序代码的构成

8.1 JSON配置

8.1.1 小程序的配置 app.json

8.1.2 工具配置 project.config.json

8.1.3 页面配置 page.json