【微信小程序】从零开始搭建一个英语学习小程序01—

文章目录

一、小程序基础知识
- 1. 小程序的基本架构
- 2. 小程序的文件格式
- 3. 小程序的目录文件
二、环境准备
三、新建小程序项目
四、UI组件准备
五、系统功能划分

一、小程序基础知识

1. 小程序的基本架构

微信小程序架构主要包括视图层（View）和逻辑层（App Service）。
视图层由WXSS和WXML编写，用组件进行展示。WXML是标签语言，结合基础组件、事件系统可以构建出页面的结构。WXSS是样式语言，用于描述页面的样式，决定WXML的组件怎么显示。
逻辑层由Javascript编写，它将数据进行处理后发送给视图层，同时接受视图层的时间反馈。为了方便地开发小程序，小程序开发框架在Javascript的基础上做了一些修改：①增加了APP()和Page()方法，进行程序和页面的注册；②提供丰富的API，可以实现微信提供的弹窗、支付等功能；

2. 小程序的文件格式

小程序包含4种文件类型：
①.js为页面脚本文件，用于实现页面的业务逻辑；
②.json为配置文件，用于设置小程序的配置效果，主要以json数据格式存放；
③.wxss为样式表文件，用于对小程序用户界面的美化设计；
④.wxml为页面结构文件，用于在页面上增加视图、组件等来构建页面。

3. 小程序的目录文件

pages目录主要存放小程序的页面文件，其中每个文件夹对应一个页面，该文件夹包含上述4种文件类型。
utils目录主要用于存放共用程序逻辑库，即存放一些全局的js文件。
小程序根目录下对应的文件：
一个小程序的主体部分由3个文件组成，必须放在根目录下。
①app.js是小程序项目的启动入口文件，处理小程序生命周期中的一些方法，文件内容不为空。 ②app.json是小程序的全局配置文件，用于设置导航条的颜色、字体大小、tabBar等。
③app.wxss是小程序的公共样式文件，用于全局美化设计界面。

二、环境准备

在开发小程序之前，必须要准备好相应的环境。开发小程序的第一步，需要拥有一个小程序AppID，后续的开发流程会基于这个AppID来完成。然后，根据官网提示安装微信小程序开发工具，安装完成后就可以新建一个小程序项目。如图是开发的时候必须要传的AppID和AppSercet。

三、新建小程序项目

首先在操作系统创建一个目录，而后在开发者工具中点击新建项目，选择刚创建的目录，填入 AppID，然后确定创建一个小程序。
创建一个小程序项目如下所示：

小程序整体项目页面如下所示（这里展示的是已经完成的项目界面）：

四、UI组件准备

下载源码解压获得/colorui这个文件夹，复制目录下的 /colorui 文件夹到该项目的根目录即插入colorUI组件，在app.wxss中引入colorui的样式，其引用语句为：@import “colorui/main.wxss”;@import “colorui/icon.wxss”;导入后如图所示。

项目所在的文件夹也会有相应的colorUI的文件夹：

五、系统功能划分

参考大学英语学习任务，本人将该英语易学通小程序的功能划分为四大模块，分别是用户模块、单词模块、听力模块、阅读模块。用户授权登陆该小程序后可以选择任一模块进行具体的、有针对性的练习。依据对系统功能性需求的分析以及对系统功能模块的划分，得出该小程序的功能模块图，如图所示。