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

文章目录

一、小程序基础知识

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的文件夹：

五、系统功能划分

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