文章目录
-
- 一、小程序基础知识
-
- 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的文件夹:
文章图片
五、系统功能划分 【微信小程序|【微信小程序】从零开始搭建一个英语学习小程序01——基础准备】参考大学英语学习任务,本人将该英语易学通小程序的功能划分为四大模块,分别是用户模块、单词模块、听力模块、阅读模块。用户授权登陆该小程序后可以选择任一模块进行具体的、有针对性的练习。依据对系统功能性需求的分析以及对系统功能模块的划分,得出该小程序的功能模块图,如图所示。
文章图片
推荐阅读
- 微信小程序|【微信小程序】从零开始搭建一个英语学习小程序04——数据库设计和接口设计
- #|微信小程序开发之图片压缩方案
- #|【小程序】微信小程序版本更新如何通知用户()
- 微信小程序毕业设计项目|微信小程序毕业设计题目计算机维修服务+后台管理系统|前后分离VUE.js
- 微信小程序|微信小程序面试题大全(持续更新)
- 前端|微信小程序全面实战,架构设计 && 躲坑攻略
- php|微信小程序之微信支付(回调接口)
- http|《彩虹屁》快夸夸我!彩虹屁生成器
- 小程序|微信支付重复调用回调地址