初识微信小程序

一、什么是微信小程序

微信小程序是一种在微信平台上运行的小型应用程序，用户可以通过微信扫描二维码或者通过搜索功能找到并使用它们。微信小程序在微信内部运行，不需要下载和安装，可以直接使用，节省了手机内存空间。微信小程序提供了丰富的功能和服务，用户可以在小程序中进行购物、点餐、预约、娱乐等各种活动。开发者可以使用微信小程序平台提供的工具和框架来开发和发布自己的小程序。微信小程序的出现，方便了用户的使用和开发者的开发，成为了移动互联网的重要应用形式之一。

二、微信小程序开发前准备

在开始微信小程序开发之前，您需要准备以下事项：

1.注册微信小程序开发账号

要注册微信小程序账号，您需要按照以下步骤操作：

（1）使用浏览器访问微信公众平台网站（网址：https://mp.weixin.qq.com/），如图所示。

（2）单击“立即注册”链接，即可进入开发账号注册页面，在此页面中选择账号类型，如果所示

（3）单击“小程序”链接，跳转到小程序说明页面， 如图所示：

（4）单击"前往注册"链接，如图所示：

（5）填写个人信息和账号设置，并同意相关条款。

（6）单击“注册”按钮，进入提示邮箱激活页面。

 （7）登录步骤（5）中设置的邮箱，查看收到的账号激活链接，将跳转到用户信息登记页面，根据页面提示进行用户信息登记。

 （8）填写完用户相关信息后，单击“继续”按钮，进入小程序管理后台。

   2. 获取微信小程序AppID

在微信小程序中，APPID又称为小程序ID，是每个小程序的唯一标识，每个小程序账号只有一个AppID 。如果要发布多个程序，则需要多个小程序账号。

首先登录微信小程序管理后台，在左侧边栏中选择“开发管理”,然后再选择"开发设置“,即可查看APPID，如图所示：

获取的APPID将会在创建微信小程序项目时用到。

3. 安装微信开发者工具

在微信小程序管理后台的左侧边栏中选择”开发工具“，然后选择”开发者工具“,或者从以下网址：developers.weixin.qq.com/miniprogram/dev/devtools/download.html直接找到微信开发者工具的下载页面，如图所示：

单击”稳定版“的"Windows 64"链接下载版本的微信开发者工具安装包，读者也可根据自己的环境和需求选择合适的版本进行下载。

双击微信开发者工具的安装包，进入微信开发者工具安装向导，根据安装向导进行操作，即可完成微信开发者工具的安装，安装后图所示：

至此，微信小程序开发者工具安装完成。

四、创建微信小程序项目

1、创建微信小程序项目

（1）首次打开微信开发者工具时，会出现一个登录界面，如图所示：

在登录界面中，可以使用微信扫码登录开发者工具，微信开发者工具将使用这个微信账号的信息进行微信小程序的开发和调试。

（2）使用微信扫码登录成功后会进入微信开发者工具的项目选择界面，如图所示：

（3）单击图上的“+”可以进入微信小程序项目的创建界面，如下所示：

在图中自定 义项目名称和目录，如项目名称为"HELLO"，目录为 “d:\weixin\hello”。

APPID:  填写获取的APPID或使用测试号，两者之间区别是，前者能够使用的功能比后者多，例如代码的上传和发布。

开发者模式：有“小程序”和“插件”两种选择，此处应选择“小程序”。

后端服务：有“微信云开发”和“不使用云服务”两种选择，在“微信云开发”，开发者无须搭建服务器，即可使用云函数、云数据库、云存储和微信云托管等完整云端能力。针对初学者，此处选择“不使用云服务”。

模板选择：微信开发者工具提供了多种模板用于快速创建微信小程序项目，针对初学者，此处选择“不使用模板”。

（4）填写完项目信息后，单击“确定”按钮，创建微信小程序项目，稍作等待后，微信小程序项目即可创建完成。

2、微信小程序项目结构

微信小程序项目创建完成后，微信开发者工具会自动创建微信小程序的项目结构，如图所示：

pages：用于存放微信小程序的所有页面。

.eslintrc.js:用于格式化代码，使代码风格保持一至。

app.js：微信小程序的入口文件，用于描述微信小程序的整体逻辑。

app.json：微信小程序的全局配置文件，用于设置页面路径，窗口外观 ，页面表现，标签栏等。

app.wxss：微信小程序的全局样式文件，文件可以为空。

project.config.json：在微信开发者工具做的任何配置都会写入这文件中，当重新安装工具或者更换计算机工作时，只要载入同一个项目的代码包，微信开发者工具会根据该文件自动恢复成开发微信小程序时的个性化配置。

project.private.config.json：用于保存微信开发者工具的私人配置。

sitemap.json：配置微信小程序及其页面是否允许被微信索引。

3、微信小程序工作原理

客户端启动微信小程序时，首先下载代码包至本地，然后解析app.json全局配置文件，解析出微信小程序的所有页面路径；接着执行app.js入口文件，调用App()函数创建微信小程序 的实例，最后渲染微信小程序的页面。

4、微信小程序的页面组成

一个微信小程序是由一个或多个页面组成，页面存放在pages目录中，下面以pages目录下的index页面为例展示其组成部分，index页面的组成部分如图所示：

JS：类似网页制作中的javascript语言，用于实现页面逻辑和交互，文件扩展名为.js 。

JSON：用于利用JSON语法对页面进行配置，文件扩展名为.json。

WXML: 类似于网页制作中HTML 语言，用于构建页面结构，文件扩展名为.wxml

WXSS: 类似于网页制作中CSS语言，用于设置页面样式，文件扩展名为,wxss。

   5、首页简单示例

在index.wxml中输入 ：

<view  class="title">Hello</view>

在index.wxss中输入：

.title {
  color: #ff0000;
  font-size: 10vh;
  padding-left:10vh;
  padding-top: 20vh;
}

在模拟器中，出现以下效果：

至此，一个简单项目完成。

五、微信小程序发布上线

一个微信小程序从开发到发布上线，一般要经过上传代码，提交审核，发布三个步骤。微信小程序发布上线的具体操作步骤如下。

1、上传代码

打开微信小程序，在微信开发者工具的工具栏中单击"上传"按钮，页面中弹出提示框，根据提示填写相应的信息，然后单击“上传”按钮，即可上传代码，如图所示：

2、提交审核

代码提交后，在网页端微信小程序管理平台，查看版本管理，如图所示：

可以在管理界面查看刚刚提交的版本，单击“提交审核”按钮，根据页面提示进行操作，即可提交已上传的版本并进行审核 。提交审核后，在审核版本中会出现正在审核的版本，审核需要一定时间。

​​​​​​​

3。发布

审核通过后审核版本中将显“发布”按钮，单击该按钮，即可完成微信小程序的发布。

本文主要讲解了微信小程序简介，开发前的准备、创建项目、发布上线等内容，通过本文的学习使读者对微信小程序有一个整体认识，能够使用微信开发者工具创建一个简单的微信小程序项目。