微信小程序开发学习笔记（一）——概要、安装开发环境与第一个小程序
一、概要
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用，主要提供给企业、政府、媒体、其他组织或个人的开发者在微信平台上提供服务。
截止2019年初，微信小程序用户规模突破6亿，小游戏类微信小程序占比达28%。
帮助文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ 这里有最全的学习资料
1.1、小程序简介
提起⼩程序，⼤家⾸先想到的就是腾讯的微信⼩程序，其实，⼩程序不⽌这⼀家，只是腾讯的微信⼩程序推出的较早。⽬前，⼩程序群雄逐⿅，BAT【指百度公司（Baidu）、阿⾥巴巴集团（Alibaba）、腾讯公司（Tencent）】BAT都已完成了⼩程序的布局。腾讯的微信⼩程序 2017年1⽉9⽇正式上线，阿⾥巴巴的⽀付宝⼩程序 2017年9⽉20⽇正式上线，百度智能⼩程序 2018年7⽉4⽇正式 上线。字节跳动旗下的今⽇头条⼩程序2018年11⽉17⽇正式上线，随后推出抖⾳⼩程序。他们都推出了⾃⼰的开发⼯具。
微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，已经有超过150万的开发者加入到了微信小程序的开发，与我们一起共同发力推动微信小程序的发展，微信小程序应用数量超过了一百万，覆盖200多个细分的行业，日活用户达到两个亿，微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会，2017年小程序带动就业104万人，社会效应不断提升
1.2、发展历史
随着网络的不断发展和更多高性价比智能手机的普及，以及人们对工作、生活、娱乐等多方面的需求日益增长，各种移动应用程序App（英文全称为 Application）应运而生。当太多App占满用户的手机屏幕和内存时，手机就容易出现内存容量紧张和运行速度变慢的情况。同时，App的升级和下载本身也在消耗手机带宽和系统资源，致使App的日益丰富与手机运行速度之间的矛盾日渐加重。 针对此矛盾，各大移动应用厂商提出了各自的解决方案。2013年8月22日，百度正式在百度世界大会上首先提出“轻应用”（Lght App）的概念。百度将轻应用定义为一种无须下载、即搜即用的全功能App，既有媲美本地原生App（Native App）的用户体验，又具备Web App可被检索与智能分发的特性。后续UC开放平台、支付宝公众平台等类似轻应用平台相继发声。这些平台都是基于HTML5（超文本标记语言的第五次重大修改，简称H5）推出的Web App，但是由于未形成账号体系、不符合用户习惯等，用户使用率较低，活跃度较低，这些平台并没有发展起来。
1.3、小程序的诞生
2016年，微信之父张小龙意识到微信解决以上问题有重大的潜在商业价值，可以围绕庞大的微信用户入口，构建一个应用生态闭环。2016年1月11日，张小龙透露将在订阅号和服务号外新设微信“应用号”。经过一年多的开发，2017年1月9日，张小龙在2017年微信公开课Pro上宣布的小程序正式上线。 自2016年9月22日开始内测到2018年年初，在一年多的时间里，小程序的功能经过快速的优化迭代，培养了大量用户。根据2018年1月15日微信公开课数据，目前小程序日活跃用户数已达1.7亿户、已上线小程序58万个，覆盖100万开发者、2300个第三方平台。上线不足一个月的小游戏“跳一跳”累计用户达3.1亿户，跃居小程序使用榜首，用户次日留存（次日仍然登录使用）率达到65%。
1.4、为什么需要小程序开发
假定要做一个美团的：美团优选应用，有下面的选择：
1、原生app（Native App）
缺点：
开发成本高，android，ios,web,pc
开发周期长
需要下载安装，推广麻烦
更新麻烦，版本1，版本2，版本3，用户都需要下载后再安装
优点：
灵活、用户体验好
可能调用底层服务
适合大公司，大企业，大投资
2、混合式APP（Hybird app）
优点：可以实现一次开发，在多个平台上运行如android,ios等,开发周期相对原生app要短一些
缺点：原生app中存在的缺点基本都有，除了第一项
3、Web app
优点：开发速度快，成本低，跨平台，无需安装，好推广
缺点：体验较差，不便于调用底层服务
4、小程序
开发小程序的原因有很多，主要包括以下几点：
便捷性：小程序可以直接在即时通讯软件、社交平台或者浏览器中运行，用户无需下载安装即可
使用，减少了安装和卸载的时间，提高了用户体验。
节省空间：与传统的APP相比，小程序占用的存储空间较小，减轻了用户手机存储负担。
快速传播：用户可以通过分享、扫码等方式快速传播小程序，提高了推广效果和覆盖面。
开发成本低：相较于传统APP，小程序的开发成本较低，同时跨平台特性使得开发者无需针对不同操作系统进行多次开发。
系统集成：许多平台（如微信、支付宝等）提供了丰富的API接口，使得小程序可以方便地与平台的其他功能进行集成，为用户提供更多便利。
适应性强：小程序可以适应各种行业和场景，满足个性化和多样化的需求。
小程序有很多类型，以下是一些常见的小程序：
电商购物类：如拼多多、京东购物等，用户可以在小程序中完成购物、支付、物流查询等功能。
生活服务类：如美团外卖、滴滴打车等，用户可以通过小程序预订餐饮、叫车等服务。
娱乐休闲类：如抖音短视频、网易云音乐等，用户可以在小程序中观看视频、收听音乐等。
教育培训类：如新东方在线、作业帮等，提供在线课程、辅导等教育资源。
金融理财类：如蚂蚁财富、招商银行等，用户可以在小程序中进行投资理财、查询账户等操作。
工具类：如搜狗输入法、滴答清单等，提供各种实用工具功能。
这些仅仅是小程序的一部分类型，实际上小程序已经渗透到各个行业和领域，为用户提供了便捷的线上服务
很多人做微信公众号，而非App，因为App推广成本太高。这导致公众号现在更像是媒体化的平台。微信的本意是要提供服务，所以推出了服务号，但是服务号也没达到预期。微信小程序的优势：
一是微信有海量用户，而且粘性很高，在微信里开发产品更容易触达用户；
二是推广app 或公众号的成本太高。
三是开发适配成本低。
四是容易小规模试错，然后快速迭代。
五是跨平台。
事实上，应用号并非微信首创，之前百度推出过应用号，搜狐推出过快站，但腾讯将这件事情做成功的概率却是最大
1.5、示例
1.6、小程序与普通网页开发的区别
1.运行环境不同：网页运行在浏览器中，小程序运行在微信环境中；
2.API不同：由于运行环境不同，小程序无法调用DOM和BOM的API
3.开发模式不同：网页开发：浏览器+代码编辑器，小程序：申请小程序开发账号+安装小程序开发者工具+创建和配置小程序项目
二、环境配置
2.1、注册小程序帐号
首先我们要去注册微信小程序帐号
第一步：点击立即注册
选择微信小程序
第二步：依次填写个人信息
第三步：信息登记中，主体类型选择个人，然后在依次填写主体信息登记
至此，我们的微信小程序测试号就注册完成了！
2.2、获取微信小程序的AppID
登录我们刚刚注册的测试号，选择开发管理，点击开发设置即可看到自己的AppID
2.3、下载安装微信开发者工具
推荐下载和安装最新的稳定版Stable Build的微信开发者工具
链接：微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)
安装小程序就建议一直next
如果出现如下报错，就按照提示添加环境变量即可
修改环境变量
三、第一个小程序
3.1、创建第一个小程序项目
第一步：点击加号后，输入我们的项目名称，文件目录，输入我们的AppID后，选择不使用云开发，然后点击确定
至此，我们的第一个微信小程序就创建成功！
然后呢，我们可以点击预览,通过我们当前账号的微信扫一扫，在手机上查看我们刚刚创建的小程序
扩展：修改主体颜色，点击小齿轮，选择外观，即可修改
3.2、小程序项目的基本组成结构
我们可以点击左上角的三个选项来控制当前我们需要展示那些页面
项目目录结构：
pages：用来存放所有小程序的页面
utils：用来存放工具性质的模块（例如:格式化时间的自定义模块)
app.js：小程序项目的入口文件
app.json：是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab等
app.wxss：小程序项目的全局样式文件
project.config.json：项目的配置文件
sitemap.json：用来配置小程序及其页面是否允许被微信索引
页面目录结构：
.js文件(页面的脚本文件，存放页面的数据、事件处理函数等）
.json文件（当前页面的配置文件，配置窗口的外观、表现等)
.wxml文件（页面的模板结构文件)
.wxss文件（当前页面的样式表文件)
3.3、小程序配置的使用
一：app.json
1、pages:用来记录当前小程序的所有页面的路径
2、window:全局定义小程序所有页面的背景色、文字颜色等
3、style:全局定义小程序组件所使用的样式版本，v2代表使用全新的样式
4、sitemapLocation:用来指明sitemap.json的位置
二：project.config.json
1、setting:中保存了编译相关的配置
2、projectname:中保存的是项目名称
3、appid:中保存的是小程序的账号ID
三：sitemap.json
微信现已开放小程序内搜索，效果类似于PC网页的SEO。sitemap.json文件用来配置小程序页面是否允许微信索引。
当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。
默认是允许被索引的，page:*表示所有的页面
如果我们想不被微信索引到的话，我们跨域在action中加上dis
如图所示：
3.4、小程序代码的构成
-
项目的组成结构
pages: 用来存放所有小程序的页面
utils: 用来存放工具性质的模块
app.js:小程序项目的吐口文件
app.json:小程序项目的全局配置文件
app.wxss: 全局样式文件
project.config.json 项目的配置文件
sitemap.json 用来配置小程序及其页面是否允许被微信搜索 -
小程序页面(pages)的组成部分
在pages 文件夹下，一个文件存放一个页面。每个页面由四个基本文件组成
.js 文件： 页面的脚本文件，存放页面的数据，处理函数等
.json文件：当前页面的配置文件，配置窗口的外观，表现
.wxml文件: 页面的模板结构文件
.wxss文件： 页面的样式表文件 -
app.json
app.json 是小程序的全局配置。包括了小程序的所有页面路径，窗口外观，界面表现，底部tab等
pages: 用来记录当前小程序的所有页面的路径
windows: 全局定义小程序所有页面的背景色，文字颜色等
style: 全局定义小程序组件所使用的样式版本
sitemapLocation: 用来指明sitemap.json 的位置
3.5、简单配置
详细介绍：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
app.json
{ "pages": [ "pages/index/index", "pages/hello/index", "pages/counter/index", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#f00", "navigationBarTitleText": "欢迎您", "navigationBarTextStyle": "black" }, "tabBar": { "color": "#00f", "selectedColor": "#f00", "list":[ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "images/icon/shouye.png", "selectedIconPath": "images/icon_selected/shouye.png" }, { "pagePath": "pages/hello/index", "text": "欢迎", "iconPath": "images/icon/chat.png", "selectedIconPath": "images/icon_selected/chat.png" }, { "pagePath": "pages/logs/logs", "text": "日志", "iconPath": "images/icon/rizhi.png", "selectedIconPath": "images/icon_selected/rizhi.png" } ] }, "style": "v2", "sitemapLocation": "sitemap.json" }
运行结果：
四、作业
(1)、完成微信小程序帐号的注册
(2)、搭建好开发环境
(3)、创建自己的第一个微信项目，并预览
