前言
在前面几期的博客中我与大家分享了有关Vue的知识，例如：Jwt的运用、VueX的运用、ElementUI搭建SPA项目等等。今天由我带大家进入一个领域，他出现在我们的生活日常中，它很方便，轻型。它就是——微信小程序。
一、微信小程序简介
官网：微信公众平台
1. 什么是微信小程序
微信小程序是一种基于微信平台开发的应用程序，它可以在微信内部使用，无需下载和安装。小程序可以通过微信搜索、扫描二维码、朋友分享等方式进入。它可以提供各种功能和服务，例如电商购物、在线支付、社交分享、新闻阅读等。微信小程序具有占用手机空间少、加载速度快、用户体验好等特点，因此受到了广泛的欢迎和应用。用户可以在微信内直接使用小程序，无需切换到其他应用，方便快捷。开发微信小程序需要使用微信开发者工具进行开发和调试。
2. 开发微信小程序的好处
好处有以下几点：
- 便捷的用户体验：微信小程序直接在微信内部运行，无需下载和安装，用户可以通过扫描二维码或搜索即可访问，大大提高了使用的便捷性，节省了用户的时间和手机存储空间。
- 跨平台应用：微信小程序可以在不同的操作系统上运行，包括iOS和Android，开发一个微信小程序可以覆盖更多的用户群体，提高应用的覆盖率。
- 低成本高效率：相比于传统的应用开发，微信小程序开发成本相对较低，开发周期短，更新迭代快，可以帮助企业迅速推出产品和服务，降低了经营成本，提高了竞争力。
- 广阔的用户群体：微信作为全球最大的社交平台之一，拥有庞大的用户群体，开发微信小程序可以直接连接这些用户，扩大品牌影响力，实现用户粘性和增长。
- 多样化的功能和服务：微信小程序支持多种功能和服务，包括商业、社交、教育、娱乐等多个领域，企业可以根据自身需求开发各种应用，满足用户不同的需求。
3. 小程序可以做什么
- 同App进行互补，提供同app类似的功能，比app操作更加简洁的轻应用
- 通过扫一扫或者在微信搜索即可下载
- 用户使用频率不高，但又不得不用的功能软件，目前看来小程序是首选
- 连接线上线下
- 开发门槛低， 成本低
二、微信小程序开发工具安装
1.先进入官网，点击小程序注册一个账号
后面还有一个个人身份认证，认证完之后点击返回小程序即可，然后点击开发管理，在开发管理中的开发设置可以获取到我们账号的AppID(小程序ID)，我们后续编写微信小程序项目会使用到。
2. 下载开发工具
点击开发下的开发工具，然后点击微信开发工具右侧的下载按钮进入工具下载界面。
win7版本以上下载稳定版 Stable Build (1.06.2308310)；win7版本的下载稳定版 Stable Build (1.06.2308310)的上一版本，下面的全部更新日志中查找到它的前版本。
下载好之后，点击安装，之后会选择安装目录，推荐最好是全英文目录。安装好之后会生成一个中文文件夹，桌面会出现一个开发工具软件。
三、创建微信小程序项目
点击开发软件，用微信扫描二维码登陆，点击右侧的+符号创建项目。
填写好对应信息则点击确认即可。
加载项目时需要等待，右侧不报红则没问题。
加载后的项目可以实现一些基本的项目功能，例如查询、添加购物车、结算等等
四、微信小程序组成
1. 概述
- 前端部分：前端部分是微信小程序用户能够看到和操作的界面。它由HTML、CSS和JavaScript组成，开发者使用类似于Web开发的方式来构建小程序的前端界面，包括页面布局、样式设计、交互逻辑等。
- 后端部分：后端部分主要负责处理小程序的业务逻辑和数据处理。开发者可以使用微信提供的云开发能力，通过云函数（Serverless）来编写后台逻辑代码，也可以通过与自己的服务器进行交互，实现小程序的功能和服务。
- 微信开放能力：微信提供了丰富的开放能力，供开发者在小程序中调用。例如，开发者可以调用微信支付接口实现小程序内的支付功能，调用微信地图接口实现地图定位等。这些开放能力为小程序提供了增强功能，并且能够与其他微信功能进行深度整合。
2. 目录结构描述
wxml:相当于html。
wxss:相当于css。
页面.json:页面相关设置。
页面.js:
五、微信小程序案例
按照上述操作进行创建一个新的项目，模版选择js基础模版。
5.1 认识基本文件
pages下一个文件代表一个页面
app.json中可以配置页面，那个页面在上面则首先显示那个页面。
app.json中可以配置页面的样式，在window中可以配置公共部分的样式。
若是要配置页面的样式内容在子界面的.json文件中配置。
5.2 新增一个页面
5.3 编写界面内容
user.json
页面内容不知道编写时可以在官网的文档中借鉴
user.js
// pages/index/user.js Page({ /** * 页面的初始数据 */ data: { username:'君易' }, yy() { console.log('被点击了'); }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
user.wxss
user.wxml
演示
本期分享到此结束，敬请期待下期博客，希望各位老铁三连加关注支持一波
