《微信小程序开发实战》学习笔记chapter1微信小程序人门
Chapter01 微信小程序入门
1. 微信小程序介绍
1.1 什么是微信小程序
微信小程序是腾讯于2017年1月19日推出的一种不需要安装即可在微信平台上使用的应用。微信小程序和微信的原生功能应用在本质上是一样的，都是Web App。
微信小程序与原生App的关系图:
补充：
-
小程序
（1）小程序：是一种不需要下载安装即可使用的应用，它实现了应用"触手可及"的梦想，用户扫一扫或搜一下即可打开应用。从2017年微信首次推出小程序开始，经过四年发展，11大平台推出各自小程序生态，小程序成为真正意义上的中国人定义的“互联网新技术标准”。
（2）行业概况：随着小程序的不断发展，截至2021年上半年，全网小程序数量突破700万个，其中，微信小程序是行业主流，数量超过430万个，占比高达约61.43%。
其中，微信小程序的行业概况：
2020年，我国微信小程序日活跃用户数（DAU，Daily Active User） 超过4亿，同比增长21.2%；活跃小程序增长75%。
2021年，我国微信小程序日活跃用户数超过4.5亿，同比增长12.5%；活跃小程序则增长 41%。
[资料来源] 华经产业研究院发布的《2021-2026年中国微信小程序市场深度分析及投资战略咨询报告》
-
微信小程序与微信订阅号、服务号的区别
对比项 小程序 订阅号和服务号 加载及组件 加载慢，专门提供组件 加载快，使用风格统一且近乎原生的页面组件 运营后台 实时数据 非实时数据 接口数量 丰富的接口，如文件操作、设备相关、动画等 接口数量比较少，只提供有限的功能，受限于浏览器
拓展：
-
Web App（网页应用）是一种通过H5页面技术实现的，和Native App的功能和界面几乎一样的手机App形态。
-
Native APP（本地应用）指的是原生程序，一般依托于操作系统，有很强的交互，是一个完整的App，可拓展性强，需要用户下载安装使用。
项目 Web App（网页应用） Hybrid App（混合应用） Native App（原生应用） 开发成本 低 中 高 维护更新 简单 简单 复杂 体验 差 优 优 Store或market认可 不认可 认可 认可 安装 不需要 需要 需要 跨平台 优 优 差 Native APP遇到的三大困境：
（1）虽然用户手机里的Native APP数量在增多，但日均启动个数却在减少；
（2）用户的使用时长不断向高频Native APP集中，加剧了头部效应；
（3）对于低频和不知名的Native App，则面临着更严峻的“分发”和“使用”长尾困境。
这三大困境对开发者形成了较大的挑战：
大部分低频和不知名Native App在应用商店少人问津，无法到达用户手机。数据显示，应用商店下载量最大的前1000个（数量占比不足0.1%）App，占据了总下载次数的一半以上。这说明用户在下载应用时“马太效应”明显。
在应用使用率上，用户下载之后极少使用，要用时却想不起或找不到它，甚至是六成的Native APP被下载安装后一周内并未被使用，其中又有约1/3在一个月内都未被使用，逐渐成为“僵尸应用”。
-
微信小程序与Native APP（本地应用）、Web App（网页应用）的区别：
对比项 小程序 Native APP Web App 下载 无需下载，通过扫码等方式获取 从iOS和Android应用商店中下载 无需下载通过浏览器进入 安装 无需安装 安装在手机中占用存储空间 无需安装 升级 无需升级 需要升级操作 无需升级 开发成本 开发周期短 开发周期长 开发周期适中 开发周期 开发成本低 开发成本高 开发成本适中
1.2 微信程序的优势
1.微信有庞大的用户量，用户粘性很高，基于微信开发产品更容易触达用户。
[用户粘性] 用户使用互联网产品产生的持续使用意愿。粘性是用户由于承诺再使用产品，无论外部环境如何变化或营销如何努力，用户仍然坚持重复访问和使用同一产品，粘性可以看作是与持续使用类同的一种行为。
2.微信小程序推广成本低。因为小程序无需安装，用户扫一扫或搜一下即可打开的特点，使其市场接受度很高，用户愿意使用小程序，使得小程序的推广阻力大大的减弱，加上小程序有着微信这个大靠山，传播起来更是得心应手，推广成本不高。而APP本身很多用户就不喜欢，要下载还要安装，成功推广一个要花很大的成本。
3.微信小程序的开发成本低。因为相对而言，无论是网站建设还是APP开发，成本往往都比小程序要高，而且开发适配成本低。具体而言，一是小程序开发只需要一个端口，是基于微信框架搭建的程序，而APP需要开发苹果和安卓两个端口的软件。二是小程序的开发周期短，由于小程序的开发简单，开发周期一般在2-5周，而APP由于双平台的原因，开发周期为3-4个月左右。三是小程序开发相对APP来说，技术要求要简单一点，企业可以把更多的时间和资金投入在运营上。四是APP上架需要向十几个应用商店提交，且各个应用商店所需要的材料和审核标准都不同，所以非常繁杂，而小程序只需要向微信公众平台提交，审核通过即可上线。
4.小程序的运营小程序很低。只需要简单的维护运营即可，操作都比较简单，容易管理。
5.容易小规模试错，然后快速迭代。
6.跨平台。
2. 开发环境搭建
2.1 注册账号
网页地址（微信公众平台）：小程序
一个邮箱仅能申请一个小程序。
2.2 APPID
网页地址（微信公众平台|小程序）：
开发 ——> 开发管理 ——> 开发设置 ——> 开发者ID ——> AppID(小程序ID)：*********
2.3 开发工具
-
微信开发者工具：win7版本只能适合1.05及以下的版本，下载地址 微信开发者工具 1.05.2204250 Stable 更新说明 | 微信开放社区
-
编译器：如VS Code、Pycharm等。
[“Visual Studio Code（简称“VS Code”）] 是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。”
-
数据库：如MySQL、SQLserver等。
-
数据库可视化工具：如Navicat等。
-
后端工具：如Vue等。
3. 微信开发者工具
3.1 创建项目
第一步，选择目录，新建微信小程序代码存放文件夹（Test1）；
第二步，复制粘贴自己的APPID；
第三步，选择后端服务不使用云开发。
3.2 微信开发者工具界面介绍
详见【微信官方文档】工具：概览 | 微信开放文档
调试器：
1.console：控制台，可以用来打印值。
2.wxml : 页面文件，可定位左侧看到的标签。
【调试器类似于Google Chrome浏览器中的开发者工具】： Console：控制台面板，用于输出调试信息，也可以直接编写代码执行。 Sources：源代码面板，可以查看或编辑源代码，并支持代码调试。 Network：网络面板，记录网络请求信息，根据它可进行网络性能优化。 Security：安全面板，用于调试页面的安全和认证等信息，如HTTpS。AppData：App数据面板，可以查看或编辑当前小程序运行时的数据。 Audits：审计面板，用于对小程序进行体验评分。 Sensor：传感器面板，用于模拟地理位置、重力感应。 Storage：存储面板，用于查看和管理本地数据缓存。 Trace：跟踪面板，用于真机调试时跟踪调试信息。 Wxml：Wxml面板，用于查看和调试WXML和WXSS。
3.3 微信开发者工具的快捷键
| 快捷键 | 功能描述 |
|---|---|
| Ctrl+/ | 注释或取消注释 |
| Shift+Home | 选择从行首到光标处 |
| Shift+End | 选择从光标到行尾 |
| Ctrl+Shift+l | 选中所有匹配 |
| Ctrl+Home | 移动到文件的开头 |
| Ctrl+End | 移动到文件的结尾 |
| Ctrl+I | 选中当前行 |
| Ctrl+U | 光标回退 |
| Ctrl+D | 选中匹配 |
| Alt+Shift+Up | 向上复制一行 |
| Alt+Shift+Down | 向下复制一行 |
| Ctrl+Shift+[ | 折叠代码块 |
| Ctrl+Shift+] | 展开代码块 |
| Ctrl+Shift+Enter | 在当前行上插入一行 |
| Alt+Up | 向上移动一行 |
| Alt+Down | 向下移动一行 |
| Ctrl+Shift+F | 全局搜索 |
| Alt+Shift+F | 代码格式化 |
| Ctrl+[ | 在当前行上插入一行 |
| Ctrl+] | 向上移动一行 |
4. 微信小程序文件结构
4.1 微信小程序框架
与传统Web对比：
| 项目 | 微信小程序（四层结构） | 传统Web（三层结构） |
|---|---|---|
| 结构 | WXML | HTML |
| 样式 | WXSS | CSS |
| 逻辑 | Javascipt | Javascipt |
| 配置 | JSON | 无 |
4.2 基本项目目录
详见【微信官方文档】指南：目录结构 | 微信开放文档
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
| 文件 | 必需 | 作用 |
|---|---|---|
| app.js | 是 | 小程序逻辑 |
| app.json | 是 | 小程序公共配置 |
| app.wxss | 否 | 小程序公共样式表 |
一个小程序页面由四个文件组成，分别是：
| 文件类型 | 必需 | 作用 |
|---|---|---|
| js | 是 | 页面逻辑 |
| wxml | 是 | 页面结构 |
| json | 否 | 页面配置 |
| wxss | 否 | 页面样式表 |
注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。
pages 页面文件夹
utils 自己封装的工具函数
app.js 微信小程序的入口文件，全局的js（逻辑）文件。定义全局函数和数据，注册小程序。
app.json 全局的配置文件
app.wxss 全局样式文件
project.config.json 对应微信开发者工具的详情。类似node中的 package.json
4.3 配置介绍
一个小程序至少包括全局的app.js和页面的page.js两种配置文件。（配置文件中不能出现注释）
1. 全局配置app.json
app.json 包括小程序的所有页面路径、界面表现、网络超时时间、底部tab等。
// 配置文件中不能出现注释，这里仅介绍文件结构使用，不能直接复制到小程序里执行。
{
// 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。
// 文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
// 添加页面可直接在pages下面增加一行【pages/index2/index2,】会自动新建一个index2的文件夹。
"pages":[
"pages/index2/index2", // 对应index2文件夹，放在第一个位置，则启动时首先展示这个页面。
"pages/index/index",
"pages/logs/logs"
],
// 用于设置小程序的状态栏、导航条、标题、窗口背景色。
"window":{
"backgroundTextStyle":"light", // 下拉 loading 的样式，仅支持 dark / light
"navigationBarBackgroundColor": "#fff", // 导航栏背景颜色，如 #000000
"navigationBarTitleText": "Weixin", //导航栏标题文字内容
"navigationBarTextStyle":"black" // 导航栏标题颜色，仅支持 black / white
},
//底部按钮
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "image/tabar/index0.jpg", // 未选择时的图标
"selectedIconPath": "image/tabar/index1 (1).jpg" // 选择时的团标
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "image/tabar/rizhi0.jpg",
"selectedIconPath": "image/tabar/rizhi1.jpg"
},
{
"pagePath": "pages/index2/index2",
"text": "西瓜",
"iconPath": "image/tabar/index20.jpg",
"selectedIconPath": "image/tabar/index21.jpg"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
2. 页面配置page.json
在pages/index1/index1.json文件中：
{
"navigationBarBackgroundColor": "#ffcccc",
"navigationBarTitleText": "干饭人",
"navigationBarTextStyle": "white"
}
4.4 数据绑定
//在pages/index1/index1.js文件中：
Page({
/**
* 页面的初始数据
*/
data: {
msg: "hello", // 定义了一个叫msg的变量，冒号后要有一个空格
mun: 99,
isboy: false,
person:{
name:"小明",
bumen:"搬砖部"
},
title:"你想吃啥？"
},
//在pages/index1/index1.js文件中：你是来自哪里的干饭人？ //调用.js文件中的data数据 msg:{{msg}} mun:{{mun}} isboy:{{isboy}} person.name:{{person.name}} person.bumen:{{person.bumen}} //组件属性title //选中框的布尔属性要加大括号