微信小程序开发学习笔记（一）——概要、安装开发环境与第一个小程序

炙月寒阳 發表於 2023-4-18 11:40:00

微信小程序开发学习笔记（一）——概要、安装开发环境与第一个小程序

<div class="_3ygOc lg-fl ">
<h1>一、概要</h1>
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用，主要提供给企业、政府、媒体、其他组织或个人的开发者在微信平台上提供服务。
截止2019<code>年初</code>，微信小程序用户规模突破6亿，小游戏类微信小程序占比达28%。
帮助文档：https://developers.weixin.qq.com/miniprogram/dev/framework/   这里有最全的学习资料
<h2>1.1、小程序简介</h2>
提起⼩程序，⼤家⾸先想到的就是腾讯的微信⼩程序，其实，⼩程序不⽌这⼀家，只是腾讯的微信⼩程序推出的较早。⽬前，⼩程序群雄逐⿅，BAT【指百度公司（Baidu）、阿⾥巴巴集团（Alibaba）、腾讯公司（Tencent）】BAT都已完成了⼩程序的布局。腾讯的微信⼩程序 2017年1⽉9⽇正式上线，阿⾥巴巴的⽀付宝⼩程序 2017年9⽉20⽇正式上线，百度智能⼩程序 2018年7⽉4⽇正式上线。字节跳动旗下的今⽇头条⼩程序2018年11⽉17⽇正式上线，随后推出抖⾳⼩程序。他们都推出了⾃⼰的开发⼯具。
微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，已经有超过150万的开发者加入到了微信小程序的开发，与我们一起共同发力推动微信小程序的发展，微信小程序应用数量超过了一百万，覆盖200多个细分的行业，日活用户达到两个亿，微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会，2017年小程序带动就业104万人，社会效应不断提升
 
 <img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230101134449779-2107098566.jpg" alt="" width="284" height="284" loading="lazy">
<h2>1.2、发展历史</h2>
随着网络的不断发展和更多高性价比智能手机的普及，以及人们对工作、生活、娱乐等多方面的需求日益增长，各种移动应用程序App（英文全称为 Application）应运而生。当太多App占满用户的手机屏幕和内存时，手机就容易出现内存容量紧张和运行速度变慢的情况。同时，App的升级和下载本身也在消耗手机带宽和系统资源，致使App的日益丰富与手机运行速度之间的矛盾日渐加重。针对此矛盾，各大移动应用厂商提出了各自的解决方案。2013年8月22日，百度正式在百度世界大会上首先提出“轻应用”（Lght App）的概念。百度将轻应用定义为一种无须下载、即搜即用的全功能App，既有媲美本地原生App（Native App）的用户体验，又具备Web App可被检索与智能分发的特性。后续UC开放平台、支付宝公众平台等类似轻应用平台相继发声。这些平台都是基于HTML5（超文本标记语言的第五次重大修改，简称H5）推出的Web App，但是由于未形成账号体系、不符合用户习惯等，用户使用率较低，活跃度较低，这些平台并没有发展起来。 
<h2>1.3、小程序的诞生</h2>
2016年，微信之父张小龙意识到微信解决以上问题有重大的潜在商业价值，可以围绕庞大的微信用户入口，构建一个应用生态闭环。2016年1月11日，张小龙透露将在订阅号和服务号外新设微信“应用号”。经过一年多的开发，2017年1月9日，张小龙在2017年微信公开课Pro上宣布的小程序正式上线。自2016年9月22日开始内测到2018年年初，在一年多的时间里，小程序的功能经过快速的优化迭代，培养了大量用户。根据2018年1月15日微信公开课数据，目前小程序日活跃用户数已达1.7亿户、已上线小程序58万个，覆盖100万开发者、2300个第三方平台。上线不足一个月的小游戏“跳一跳”累计用户达3.1亿户，跃居小程序使用榜首，用户次日留存（次日仍然登录使用）率达到65%。
<h2>1.4、为什么需要小程序开发</h2>
假定要做一个美团的：美团优选应用，有下面的选择：
1、原生app（Native App）
缺点：
开发成本高，android，ios,web,pc
开发周期长
需要下载安装，推广麻烦
更新麻烦，版本1，版本2，版本3，用户都需要下载后再安装
优点：
灵活、用户体验好
可能调用底层服务
适合大公司，大企业，大投资
2、混合式APP（Hybird app）
优点：可以实现一次开发，在多个平台上运行如android,ios等,开发周期相对原生app要短一些
缺点：原生app中存在的缺点基本都有，除了第一项
3、Web app
优点：开发速度快，成本低，跨平台，无需安装，好推广
缺点：体验较差，不便于调用底层服务
4、小程序
开发小程序的原因有很多，主要包括以下几点：
</div>
<div class="_3ygOc lg-fl ">
便捷性：小程序可以直接在即时通讯软件、社交平台或者浏览器中运行，用户无需下载安装即可
</div>
<div class="_3ygOc lg-fl ">
使用，减少了安装和卸载的时间，提高了用户体验。
</div>
<div class="_3ygOc lg-fl ">
节省空间：与传统的APP相比，小程序占用的存储空间较小，减轻了用户手机存储负担。
</div>
<div class="_3ygOc lg-fl ">
快速传播：用户可以通过分享、扫码等方式快速传播小程序，提高了推广效果和覆盖面。
</div>
<div class="_3ygOc lg-fl ">
开发成本低：相较于传统APP，小程序的开发成本较低，同时跨平台特性使得开发者无需针对不同操作系统进行多次开发。
</div>
<div class="_3ygOc lg-fl ">
系统集成：许多平台（如微信、支付宝等）提供了丰富的API接口，使得小程序可以方便地与平台的其他功能进行集成，为用户提供更多便利。
</div>
<div class="_3ygOc lg-fl ">
适应性强：小程序可以适应各种行业和场景，满足个性化和多样化的需求。
</div>
<div class="_3ygOc lg-fl ">
小程序有很多类型，以下是一些常见的小程序：
</div>
<div class="_3ygOc lg-fl ">
电商购物类：如拼多多、京东购物等，用户可以在小程序中完成购物、支付、物流查询等功能。
</div>
<div class="_3ygOc lg-fl ">
生活服务类：如美团外卖、滴滴打车等，用户可以通过小程序预订餐饮、叫车等服务。
</div>
<div class="_3ygOc lg-fl ">
娱乐休闲类：如抖音短视频、网易云音乐等，用户可以在小程序中观看视频、收听音乐等。
</div>
<div class="_3ygOc lg-fl ">
教育培训类：如新东方在线、作业帮等，提供在线课程、辅导等教育资源。
</div>
<div class="_3ygOc lg-fl ">
金融理财类：如蚂蚁财富、招商银行等，用户可以在小程序中进行投资理财、查询账户等操作。
</div>
<div class="_3ygOc lg-fl ">
工具类：如搜狗输入法、滴答清单等，提供各种实用工具功能。
</div>
<div class="_3ygOc lg-fl ">
这些仅仅是小程序的一部分类型，实际上小程序已经渗透到各个行业和领域，为用户提供了便捷的线上服务
　　很多人做微信公众号，而非App，因为App推广成本太高。这导致公众号现在更像是媒体化的平台。微信的本意是要提供服务，所以推出了服务号，但是服务号也没达到预期。微信小程序的优势：
　　一是微信有海量用户，而且粘性很高，在微信里开发产品更容易触达用户；
　　二是推广app 或公众号的成本太高。
　　三是开发适配成本低。
　　四是容易小规模试错，然后快速迭代。
　　五是跨平台。
　　事实上，应用号并非微信首创，之前百度推出过应用号，搜狐推出过快站，但腾讯将这件事情做成功的概率却是最大
<h2>1.5、示例</h2>
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230417083439245-563211465.png" alt="" width="256" height="258" loading="lazy">
<h2>1.6、小程序与普通网页开发的区别</h2>
1.运行环境不同：网页运行在浏览器中，小程序运行在微信环境中；
2.API不同：由于运行环境不同，小程序无法调用DOM和BOM的API
3.开发模式不同：网页开发：浏览器+代码编辑器，小程序：申请小程序开发账号+安装小程序开发者工具+创建和配置小程序项目
</div>
<h1>二、环境配置</h1>
<h2>2.1、注册小程序帐号</h2>
首先我们要去注册微信小程序帐号
官网：https://mp.weixin.qq.com
第一步：点击立即注册
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230101135110767-369134187.png" alt="" width="585" height="289" loading="lazy">
　　　　选择微信小程序
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230101135215571-522478949.png" alt="" width="585" height="283" loading="lazy">
第二步：依次填写个人信息
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230101135746675-2046543356.png" alt="" width="584" height="341" loading="lazy">
第三步：信息登记中，主体类型选择个人，然后在依次填写主体信息登记
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230101140309250-1168552843.png" alt="" width="591" height="358" loading="lazy">
至此，我们的微信小程序测试号就注册完成了！ 
<h2>2.2、获取微信小程序的AppID</h2>
登录我们刚刚注册的测试号，选择开发管理，点击开发设置即可看到自己的AppID
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230101141001577-494194797.png" alt="" width="733" height="367" loading="lazy">
<h2>2.3、下载安装微信开发者工具</h2>
推荐下载和安装最新的稳定版Stable Build的微信开发者工具
链接：微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230101141504494-1978339318.png" alt="" width="731" height="369" loading="lazy">
 安装小程序就建议一直next
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230101141827810-962439952.png" alt="" width="417" height="279" loading="lazy"> 
如果出现如下报错，就按照提示添加环境变量即可
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230418110518612-1720558537.png" alt="" loading="lazy">
 修改环境变量
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230418110539281-796626075.png" alt="" width="815" height="758" loading="lazy">
<h1>三、第一个小程序</h1>
<h2>3.1、创建第一个小程序项目 </h2>
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230101143853832-1203900567.png" alt="" width="482" height="361" loading="lazy">
第一步：点击加号后，输入我们的项目名称，文件目录，输入我们的AppID后，选择不使用云开发，然后点击确定
 <img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230101144729403-2029338871.png" alt="" width="479" height="362" loading="lazy">
至此，我们的第一个微信小程序就创建成功！
然后呢，我们可以点击预览,通过我们当前账号的微信扫一扫，在手机上查看我们刚刚创建的小程序
 <img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230101145027027-1740920204.png" alt="" width="478" height="312" loading="lazy">
 扩展：修改主体颜色，点击小齿轮，选择外观，即可修改
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230101143951421-1877196499.png" alt="" width="487" height="355" loading="lazy">
<h2>3.2、小程序项目的基本组成结构</h2>
我们可以点击左上角的三个选项来控制当前我们需要展示那些页面
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230101145456884-147744684.png" alt="" width="610" height="398" loading="lazy">
项目目录结构：
pages：用来存放所有小程序的页面
utils：用来存放工具性质的模块（例如:格式化时间的自定义模块)
app.js：小程序项目的入口文件
app.json：是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab等
app.wxss：小程序项目的全局样式文件
project.config.json：项目的配置文件
sitemap.json：用来配置小程序及其页面是否允许被微信索引
页面目录结构：
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230101150218277-1435918161.png" alt="" loading="lazy">
.js文件(页面的脚本文件，存放页面的数据、事件处理函数等）
.json文件（当前页面的配置文件，配置窗口的外观、表现等)
.wxml文件（页面的模板结构文件)
.wxss文件（当前页面的样式表文件)
<h2>3.3、小程序配置的使用</h2>
一：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文件用来配置小程序页面是否允许微信索引。 当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。
<img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230101152134948-788086085.png" alt="" loading="lazy">
默认是允许被索引的，page:*表示所有的页面
如果我们想不被微信索引到的话，我们跨域在action中加上dis
如图所示：
 <img src="https://img2023.cnblogs.com/blog/2401301/202301/2401301-20230101152341405-112568550.png" alt="" width="248" height="105" loading="lazy">
<h2>3.4、小程序代码的构成</h2>
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230417151742647-1074735921.png" alt="" loading="lazy">
<ul>
<li>
项目的组成结构 <img src="https://code84.com/wp-content/uploads/2022/09/12ef3b8ebd4c4c3da00492cfa5875b19.png" alt="在这里插入图片描述" width="258" height="292" class="alignnone size-full wp-image-264602"> pages: 用来存放所有小程序的页面 utils: 用来存放工具性质的模块 app.js:小程序项目的吐口文件 app.json:小程序项目的全局配置文件 app.wxss: 全局样式文件 project.config.json 项目的配置文件 sitemap.json 用来配置小程序及其页面是否允许被微信搜索

</li>
<li>
小程序页面(pages)的组成部分 <img src="https://code84.com/wp-content/uploads/2022/09/0c00dc680b4c4891bc9a009bc05c10fa.png" alt="在这里插入图片描述" width="235" height="307" class="alignnone size-full wp-image-264603"> 在pages 文件夹下，一个文件存放一个页面。每个页面由四个基本文件组成 .js 文件：页面的脚本文件，存放页面的数据，处理函数等 .json文件：当前页面的配置文件，配置窗口的外观，表现 .wxml文件: 页面的模板结构文件 .wxss文件：页面的样式表文件

</li>
<li>
app.json app.json 是小程序的全局配置。包括了小程序的所有页面路径，窗口外观，界面表现，底部tab等 <img src="https://code84.com/wp-content/uploads/2022/09/7ed45c5ee18c4d69beae02433b7b0433.png" alt="在这里插入图片描述" width="376" height="436" class="alignnone size-full wp-image-264604"> pages: 用来记录当前小程序的所有页面的路径 windows: 全局定义小程序所有页面的背景色，文字颜色等 style: 全局定义小程序组件所使用的样式版本 sitemapLocation: 用来指明sitemap.json 的位置

</li>

</ul>
<h2>3.5、简单配置</h2>
详细介绍：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
app.json
<div class="cnblogs_code">
<pre>{
"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"
}</pre>
</div>
运行结果：
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230419085335759-126726819.png" alt="" width="329" height="572" loading="lazy">
<img src="https://img2023.cnblogs.com/blog/63651/202304/63651-20230419085357385-758090687.png" alt="" width="329" height="571" loading="lazy">
<h1>四、作业</h1>
(1)、完成微信小程序帐号的注册
(2)、搭建好开发环境
(3)、创建自己的第一个微信项目，并预览
<h1>五、视频</h1>
【微信小程序开发】 https://www.bilibili.com/video/BV1pv4y1n7Zg/?share_source=copy_web&vd_source=475a31f3c5d6353a782007cd4c638a8a 
来源：https://www.cnblogs.com/best/p/17324677.html

頁: [1]

琼殿技术论坛's Archiver

微信小程序开发学习笔记（一）——概要、安装开发环境与第一个小程序