【社区活动】微信小程序开发入门

由于计算机学院要举行微信小程序开发比赛，许多同学对此都具有很高的热情，但是在学习时不是很有头绪，所以我们专门为大家请来了现就职于上海欢娱数码科技有限公司的王昆讲师，带大家进入微信小程序开发的大门。

Part1 小程序介绍与应用场景

小程序是一种不需要下载安装即可使用的应用。它有以下几个特点：

1.即用即走，体验类似原生APP，内存占用小，打开速度快。

2.比H5能调用更多的系统功能，例如定位、拍照、录音等。

3.投放入口多，公众号关联、文章嵌入、群分享等。

4.不能开发大型应用（主包限制 2M，总大小限制 4M）。

5.不能分享朋友圈。

6.关联外链地址有限制。

小程序还可以调用以下功能：罗盘、加速度计、蓝牙、屏幕亮度、震动、支付、指纹识别、网页嵌入、画布、地图。因此小程序的应用场景非常的广，所以小程序具有良好的发展前景。

Part2 开发环境与流程

1、申请账号(点击此处申请账号)

2、安装开发环境(点击次数下载开发环境)

3、第一个项目—hello world

只有使用了AppID，才能建立一个项目。

4、预览

5、上线

完成工程开发后，点击编辑器中的“上传”即可。上传之后还需要提交审核和提交发布，一个小程序才可以上线。

Part3 MINA 框架结构

01

02

逻辑层（AppService）

逻辑层涉及的是程序/页面的生命周期、业务逻辑、交互等方面。

App()函数注册小程序，接收一个object参数，其指定该程序的生命周期函数等。

注意：App()必须在app.js中注册，且不能注册多个。不要在定义于App()内的函数中调用getApp()，直接使用this就可以拿到app实例。

不要在onLaunch的时候调用getCurrentPage()，此时page还没有生成。通过getApp获取实例之后，不要私自调用生命周期函数。

page()函数注册页面，同样接收一个Object参数，指定页面的初始数据、生命周期函数、事件处理函数等。

模块化。我们可以将一些公共的代码抽离成为一个单独的js文件，作为一个模块。模块只有通过module.exports才能对外暴露接口。

API。MINA提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

03

视图层（WXML，WXSS）

WXML。它是MINA设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。WXML具备数据绑定、列表渲染、条件渲染、模板、事件、引用等能力。

WXSS。它是MINA设计的一套样式语言，用于描述WXML的组件样式。WXSS用来决定WXML的组件应该怎么显示。WXSS不仅具有CSS大部分特性，还同时为了更适合开发微信小程序，对CSS进行了扩充以及修改。

组件。MINA提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。

Part4 v2ex demo

本次的活动参与的同学非常多，而且非常积极，这学期的活动不多了，所以抓住最后的机会来和大佬们学习一波，我们继续欢迎大家前来参加每周的活动。

附录
本次活动的PPT