微信小程序入门
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
微信小程序
Andy Zheng
目
Contents
2
1
什么是小程序？
分享目标
3
4 5
小程序开发
小程序发布
总结
什么是小程序?
What?
如果在大街上，你有小家好吃的小
吃店在做活动，但需要你下载他的
APP来购买，你愿意吗？
Yes
or
No
Why？
安装占 空间
下载要 流量
怕广告 推送
算了还是不装了！
什么是微信小程序？
微信小程序
后台：Java + Spring + websocket
Java后端
腾讯云、 leancloud
设计规范
url: https://mp.weixin.qq.com/debug/wxadoc/design/index.html?t=201769
友好礼貌
清晰明确
便捷优雅 统一稳定
常规分析
自定义分析
数据助手
小程序发布
Publish
注册
注册小程序账号，并创建小程序，得到APPID和密钥
创建项目
上传前确保服务器域名配置（必须https）
完成开发后上传项目
提交审核
获取小程序
通过小程序搜索 通过二维码 通过小程序码 好友推荐
总结
Summary
总结
认识
• 框架 • UI组件 • API • 工具
更丰富的使用场景。
d) e) 在安卓手机上可以添加到手机桌面，看上去跟原生 APP差不多，但仅限安卓手机，iphone就不行了。 运行速度跟APP差不多，也能做出很多H5不做到 的功能，开发成本跟H5差不多，相对来说开发成本
Hale Waihona Puke Baidu
比APP要低。
应用场景
应用场景：
1. 基本涵盖所有低频、刚需 的长尾生活服务需求场景
优势
a)
b) c)
劣势
a)
b) c)
要用的时候打开，不用的时候关掉，即用即走。不
需要下载，不占用手机内存空间。 打开速度比普通的H5要快，接近原生APP。 可以调用比H5更多的手机系统功能来进行开发，例 如GPS定位、录音、拍视频、重力感应等，能开发
微信小程序只有2M的大小，这样导致无法开发大
型一些的小程序。 不能跳转外链网址，间接影响了小程序的开放性。 需要像APP一样审核上架，这点比HTML5即做即发 布要麻烦些。
视觉规范
WeUI
项目结构
主体：
app.js(初始化逻辑) app.json(公共配置) app.wxss(公共样式)
页面：
js(页面逻辑)
json(页面配置)
wxss(页面样式) wxml(页面结构)
组件
url: https://mp.weixin.qq.com/debug/wxadoc/dev/component/contactbutton.html
2. 初创企业进行产品模式的
探索 3. 作为增量渠道，为原生 App进行导流 4. 小部分高频、非刚需场景
分享目标
Target
分享目标
认识
会找
会用
小程序开发
Developer
DEMO
本DEMO架构
前端：coolsite360 + 微信小程序
数据库：leancloud 文件服务器：腾讯云、leancloud
会找
• 文档 • 模板 • 问题
会用
• WXSS • WXML • 基本组 件和 API
Andy Zheng
视图容器
基础内容
表单组件 导航
媒体组件
地图 画布
客服会话
API
url: https://mp.weixin.qq.com/debug/wxadoc/dev/api/analysis.html
网络 媒体
文件
数据缓存 位置
设备
界面 数据分析
工具
微信Web开发者工具
官网DEMO：小程序示例（组件和API的使用） 页 面 模 板 ： http://www.coolsite360.com （ 个 人 推 荐 ， 不 免 费 ， 仅 供 参 考！！！） 数据库：leancloud(有一定免费数量)
数据分析
url: https://mp.weixin.qq.com/debug/wxadoc/analysis/index.html?t=2017615
Andy Zheng
目
Contents
2
1
什么是小程序？
分享目标
3
4 5
小程序开发
小程序发布
总结
什么是小程序?
What?
如果在大街上，你有小家好吃的小
吃店在做活动，但需要你下载他的
APP来购买，你愿意吗？
Yes
or
No
Why？
安装占 空间
下载要 流量
怕广告 推送
算了还是不装了！
什么是微信小程序？
微信小程序
后台：Java + Spring + websocket
Java后端
腾讯云、 leancloud
设计规范
url: https://mp.weixin.qq.com/debug/wxadoc/design/index.html?t=201769
友好礼貌
清晰明确
便捷优雅 统一稳定
常规分析
自定义分析
数据助手
小程序发布
Publish
注册
注册小程序账号，并创建小程序，得到APPID和密钥
创建项目
上传前确保服务器域名配置（必须https）
完成开发后上传项目
提交审核
获取小程序
通过小程序搜索 通过二维码 通过小程序码 好友推荐
总结
Summary
总结
认识
• 框架 • UI组件 • API • 工具
更丰富的使用场景。
d) e) 在安卓手机上可以添加到手机桌面，看上去跟原生 APP差不多，但仅限安卓手机，iphone就不行了。 运行速度跟APP差不多，也能做出很多H5不做到 的功能，开发成本跟H5差不多，相对来说开发成本
Hale Waihona Puke Baidu
比APP要低。
应用场景
应用场景：
1. 基本涵盖所有低频、刚需 的长尾生活服务需求场景
优势
a)
b) c)
劣势
a)
b) c)
要用的时候打开，不用的时候关掉，即用即走。不
需要下载，不占用手机内存空间。 打开速度比普通的H5要快，接近原生APP。 可以调用比H5更多的手机系统功能来进行开发，例 如GPS定位、录音、拍视频、重力感应等，能开发
微信小程序只有2M的大小，这样导致无法开发大
型一些的小程序。 不能跳转外链网址，间接影响了小程序的开放性。 需要像APP一样审核上架，这点比HTML5即做即发 布要麻烦些。
视觉规范
WeUI
项目结构
主体：
app.js(初始化逻辑) app.json(公共配置) app.wxss(公共样式)
页面：
js(页面逻辑)
json(页面配置)
wxss(页面样式) wxml(页面结构)
组件
url: https://mp.weixin.qq.com/debug/wxadoc/dev/component/contactbutton.html
2. 初创企业进行产品模式的
探索 3. 作为增量渠道，为原生 App进行导流 4. 小部分高频、非刚需场景
分享目标
Target
分享目标
认识
会找
会用
小程序开发
Developer
DEMO
本DEMO架构
前端：coolsite360 + 微信小程序
数据库：leancloud 文件服务器：腾讯云、leancloud
会找
• 文档 • 模板 • 问题
会用
• WXSS • WXML • 基本组 件和 API
Andy Zheng
视图容器
基础内容
表单组件 导航
媒体组件
地图 画布
客服会话
API
url: https://mp.weixin.qq.com/debug/wxadoc/dev/api/analysis.html
网络 媒体
文件
数据缓存 位置
设备
界面 数据分析
工具
微信Web开发者工具
官网DEMO：小程序示例（组件和API的使用） 页 面 模 板 ： http://www.coolsite360.com （ 个 人 推 荐 ， 不 免 费 ， 仅 供 参 考！！！） 数据库：leancloud(有一定免费数量)
数据分析
url: https://mp.weixin.qq.com/debug/wxadoc/analysis/index.html?t=2017615