微信小程序
Andy Zheng
目
Contents
2
1
什么是小程序？
分享目标
3 4
5
小程序开发
小程序发布
总结
什么是小程序?
What?
如果在大街上，你有小家好吃的小
吃店在做活动，但需要你下载他的
APP来购买，你愿意吗？
Yes
or
No
Why？
安装占 空间
下载要 流量
怕广告 推送
算了还是不装了！
什么是微信小程序？
应用场景
应用场景： 1. 基本涵盖所有低频、刚需 的长尾生活服务需求场景 2. 初创企业进行产品模式的
探索
3. 作为增量渠道，为原生 App进行导流 4. 小部分高频、非刚需场景
分享目标
Target
分享目标
认识
会找
会用
小程序开发
Developer
DEMO
本DEMO架构

前端：coolsite360 + 微信小程序
官网DEMO：小程序示例（组件和API的使用） 页面模板：（个人推荐，不免费，仅供参考！！！）
数据库：leancloud(有一定免费数量)
数据分析

常规分析 自定义分析
数据助手
小程序发布
Publish
注册

注册小程序账号，并创建小程序，得到APPID和密钥
创建项目
上传前确保服务器域名配置（必须https）

页面：
js(页面逻辑)
json(页面配置)
wxss(页面样式) wxml(页面结构)
组件

视图容器 基础内容
表单组件
导航 媒体组件


地图
画布 客服会话
API
位置


设备
界面 数据分析
工具

微信Web开发者工具
如GPS定位、录音、拍视频、重力感应等，能开发 更丰富的使用场景。
c)
需要像APP一样审核上架，这点比HTML5即做即
发布要麻烦些。
d) e)
在安卓手机上可以添加到手机桌面，看上去跟原生 APP差不多，但仅限安卓手机，iphone就不行了。 运行速度跟APP差不多，也能做出很多H5不做到 的功能，开发成本跟H5差不多，相对来说开发成本 比APP要低。
优势
a) b) 要用的时候打开，不用的时候关掉，即用即走。不 需要下载，不占用手机内存空间。 打开速度比普通的H5要快，接近原生APP。 b) a) 型一些的小程序。
劣势
微信小程序只有2M的大小，这样导致无法开发大 不能跳转外链网址，间接影响了小程序的开放性。
c)
可以调用比H5更多的手机系统功能来进行开发，例
完成开发后上传项目
提交审核
获取小程序
通过小程序搜索 通过二维码
通过小程序码
好友推荐
总结
Summary
总结
认识
• 框架 • UI组件 • API • 工具
会找
• 文档 • 模板 • 问题
会用
• WXSS • WXML • 基本组 件和 API
Andy Zheng
数据库：leancloud 文件服务器：腾讯云、leancloud
微信小程序
后台：Java + Spring + websocket
Java后端
腾讯云、 leancloud
设计规范

友好礼貌 清晰明确
便捷优雅
统一稳定 视觉规范

WeUI
项目结构

主体：
app.js(初始化逻辑) app.json(公共配置) app.wxss(公共样式)