微信小程序学习总结

我们的团队在经过讨论过后选择了开发微信小程序来作为大作业的项目,我主要负责前端方面的开发。因为之前并没有过小程序的开发经验,所以开发过程的第一次迭代中,我主要对小程序开发者工具以及其相关的api进行了初步学习。

开发者工具

微信小程序的开发使用的是官方提供的微信web开发者工具,可以在微信公众平台下载最新的版本。官方网页上还提供了详细的教程,包括各类框架和组件的描述示例,以及api的说明。

创建项目

打开开发者工具,用微信账号登陆后,在初始界面可以选择小程序项目和公众号项目。 开发者工具

选择小程序项目便可以进入小程序项目的管理界面,点击右下角的“+”号便可以创建新的小程序项目。

开发者工具

创建小程序项目需要注册Appid,若无Appid则需要进行注册,值得注意的是每个邮箱账号只能注册一个Appid。

开发者工具

如果不想注册Appid,也可以在无Appid的情况下进行体验开发,但是部分功能会受到限制。

开发者工具

如果勾选了建立普通快速启动模板,创建项目成功后开发工具会自动生成一个基础模板以供使用。

开发者工具

小程序框架

一个小程序包括了主体部分、逻辑层,以及视图层。主题部分通过app来描述整体程序,由app.js, app.json, app.wxss组成。每个页面则各自由js, wxml, wxss, json四个文件来进行描述。

文件 必填 作用
app.js 小程序逻辑
app.json 小程序公共设置
app.wxss 小程序公共样式表
文件类型 必填 作用
js 页面逻辑
wxml 页面结构
wxss 页面样式表
json 页面配置

小程序框架的逻辑层使用javascript来进行编写的,主要完成处理数据并发送给视图层的任务,同时也要接受视图层的事件反馈。

小程序的视图层则是通过WXML和WXSS来进行编写,WXML用于描述页面的结构,而WXSS用于描述页面的样式。因为学过一些web开发,所以感觉WXML和HTML使用起来十分的类似,只是WXML只能使用微信本身提供的组件,同样WXSS和CSS也是差不多的使用方法,只是描述的对象不同。微信还提供了WXS来作为前端开发的脚本语言,尽管官方说它与js是不同的语言,有自己的语法,但实际上两者的使用是非常相似的。WXS增强了WXML的表达能力,据说在ios端性能比js高2到20倍,在android端则无太大的差异。

组件和API

微信小程序的组件是视图层的基本组成元素,其实相当于HTML中的元素。微信提供了从基础的文本、图片等基本组件,到表单组件、媒体组件甚至地图组件等,可以通过组合这些组件完成各式页面的设计。

同时,微信还提供了大量的api供使用,如获取用户信息,本地存储,支付功能等,简化了小程序代码的编写难度,并且也丰富了小程序所能提供的功能。微信公众平台上提供了所有api的文档,包含了对api的详细描述以及其使用方法。

PREVIOUS系统分析与设计homework4
NEXT系统分析与设计homework2