微信小程序|【微信小程序】从零开始搭建一个英语学习小程序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。
微信小程序|【微信小程序】从零开始搭建一个英语学习小程序01——基础准备
文章图片

三、新建小程序项目 ? 首先在操作系统创建一个目录,而后在开发者工具中点击新建项目,选择刚创建的目录,填入 AppID,然后确定创建一个小程序。
创建一个小程序项目如下所示:
微信小程序|【微信小程序】从零开始搭建一个英语学习小程序01——基础准备
文章图片

小程序整体项目页面如下所示(这里展示的是已经完成的项目界面):
微信小程序|【微信小程序】从零开始搭建一个英语学习小程序01——基础准备
文章图片

四、UI组件准备 下载源码解压获得/colorui这个文件夹,复制目录下的 /colorui 文件夹到该项目的根目录即插入colorUI组件,在app.wxss中引入colorui的样式,其引用语句为:@import “colorui/main.wxss”; @import “colorui/icon.wxss”; 导入后如图所示。
微信小程序|【微信小程序】从零开始搭建一个英语学习小程序01——基础准备
文章图片

项目所在的文件夹也会有相应的colorUI的文件夹:
微信小程序|【微信小程序】从零开始搭建一个英语学习小程序01——基础准备
文章图片

五、系统功能划分 【微信小程序|【微信小程序】从零开始搭建一个英语学习小程序01——基础准备】参考大学英语学习任务,本人将该英语易学通小程序的功能划分为四大模块,分别是用户模块、单词模块、听力模块、阅读模块。用户授权登陆该小程序后可以选择任一模块进行具体的、有针对性的练习。依据对系统功能性需求的分析以及对系统功能模块的划分,得出该小程序的功能模块图,如图所示。
微信小程序|【微信小程序】从零开始搭建一个英语学习小程序01——基础准备
文章图片

    推荐阅读