微信小程序系列之入门级（带你领略微信小程序的魅力）

前言

       在前面几期的博客中我与大家分享了有关Vue的知识，例如：Jwt的运用、VueX的运用、ElementUI搭建SPA项目等等。今天由我带大家进入一个领域，他出现在我们的生活日常中，它很方便，轻型。它就是——微信小程序。

一、微信小程序简介

官网：微信公众平台

1. 什么是微信小程序

       微信小程序是一种基于微信平台开发的应用程序，它可以在微信内部使用，无需下载和安装。小程序可以通过微信搜索、扫描二维码、朋友分享等方式进入。它可以提供各种功能和服务，例如电商购物、在线支付、社交分享、新闻阅读等。微信小程序具有占用手机空间少、加载速度快、用户体验好等特点，因此受到了广泛的欢迎和应用。用户可以在微信内直接使用小程序，无需切换到其他应用，方便快捷。开发微信小程序需要使用微信开发者工具进行开发和调试。

2. 开发微信小程序的好处

好处有以下几点：

1. 便捷的用户体验：微信小程序直接在微信内部运行，无需下载和安装，用户可以通过扫描二维码或搜索即可访问，大大提高了使用的便捷性，节省了用户的时间和手机存储空间。
   
2. 跨平台应用：微信小程序可以在不同的操作系统上运行，包括iOS和Android，开发一个微信小程序可以覆盖更多的用户群体，提高应用的覆盖率。
   
3. 低成本高效率：相比于传统的应用开发，微信小程序开发成本相对较低，开发周期短，更新迭代快，可以帮助企业迅速推出产品和服务，降低了经营成本，提高了竞争力。
   
4. 广阔的用户群体：微信作为全球最大的社交平台之一，拥有庞大的用户群体，开发微信小程序可以直接连接这些用户，扩大品牌影响力，实现用户粘性和增长。
   
5. 多样化的功能和服务：微信小程序支持多种功能和服务，包括商业、社交、教育、娱乐等多个领域，企业可以根据自身需求开发各种应用，满足用户不同的需求。
   

3. 小程序可以做什么

1. 同App进行互补，提供同app类似的功能，比app操作更加简洁的轻应用
   
2. 通过扫一扫或者在微信搜索即可下载
   
3. 用户使用频率不高，但又不得不用的功能软件，目前看来小程序是首选
   
4. 连接线上线下
   
5. 开发门槛低， 成本低
   

二、微信小程序开发工具安装

1.先进入官网，点击小程序注册一个账号

        后面还有一个个人身份认证，认证完之后点击返回小程序即可，然后点击开发管理，在开发管理中的开发设置可以获取到我们账号的AppID(小程序ID)，我们后续编写微信小程序项目会使用到。

2. 下载开发工具

       点击开发下的开发工具，然后点击微信开发工具右侧的下载按钮进入工具下载界面。

       win7版本以上下载稳定版 Stable Build (1.06.2308310)；win7版本的下载稳定版 Stable Build (1.06.2308310)的上一版本，下面的全部更新日志中查找到它的前版本。

       下载好之后，点击安装，之后会选择安装目录，推荐最好是全英文目录。安装好之后会生成一个中文文件夹，桌面会出现一个开发工具软件。

三、创建微信小程序项目

点击开发软件，用微信扫描二维码登陆，点击右侧的+符号创建项目。

填写好对应信息则点击确认即可。

加载项目时需要等待，右侧不报红则没问题。

加载后的项目可以实现一些基本的项目功能，例如查询、添加购物车、结算等等

四、微信小程序组成

1. 概述

1. 前端部分：前端部分是微信小程序用户能够看到和操作的界面。它由HTML、CSS和JavaScript组成，开发者使用类似于Web开发的方式来构建小程序的前端界面，包括页面布局、样式设计、交互逻辑等。
   
2. 后端部分：后端部分主要负责处理小程序的业务逻辑和数据处理。开发者可以使用微信提供的云开发能力，通过云函数（Serverless）来编写后台逻辑代码，也可以通过与自己的服务器进行交互，实现小程序的功能和服务。
   
3. 微信开放能力：微信提供了丰富的开放能力，供开发者在小程序中调用。例如，开发者可以调用微信支付接口实现小程序内的支付功能，调用微信地图接口实现地图定位等。这些开放能力为小程序提供了增强功能，并且能够与其他微信功能进行深度整合。
   

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

演示

本期分享到此结束，敬请期待下期博客，希望各位老铁三连加关注支持一波