懂商业的技术合伙人(15):微信小程序

微信小程序,是一种介于Web和App之间的应用程序。
最近2周认真研究了,并写了个Demo,很简单。
雷观:微信小程序和微信公众号,都可以作为早期创业的切入点。
一、产品定位
1、官方介绍
微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。(有点抽象)
2、对比介绍
本质还是微信体系类服务用户的一种方式,侧重便捷获取和传播。
懂商业的技术合伙人(15):微信小程序
3、优势
扫码即用,只下载需要使用的内容。
不想使用了,不需要手动卸载。
微信内部可以方便传播,充分利用微信的用户优势。
懂商业的技术合伙人(15):微信小程序
4、个人理解
以微信为运行时环境的Web应用程序,前端内容托管于微信平台的UI解决方案。
App中再嵌入“APP”,从逻辑上是不合理的,更好的解决方案是Android等操作系统提供,更公正。
APP客户端和Web之间的界限,越来越模糊。

二、开发准备
1、注册
账号、密码、主题类型、身份证等资料。
标准的微信账号注册流程。
2、信息完善
名称、介绍、服务类目(生活服务、餐饮等)
3、开发者信息
可以直接使用注册的账号信息即‘“管理员”,或者手动绑定几个“开发者”账号。
4、开发者ID
AppID、AppSecret
5、开发者工具
懂商业的技术合伙人(15):微信小程序
三、小程序框架
1、文件结构
app.js等描述整个App。
具体的页面由4部分组成,界面布局、界面样式、事件处理和业务逻辑、页面配置。
小程序本质就是一套UI,和HTML5总体类似,不同点在于:
a、WXML
微信自己定义了一套标签语言,构建页面、展示数据、响应用户操作。
懂商业的技术合伙人(15):微信小程序
懂商业的技术合伙人(15):微信小程序
b、WXSS
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者,我们的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序,我们对 CSS 进行了扩充以及修改。

2、全局配置
更多细节,具体看代码。
懂商业的技术合伙人(15):微信小程序
四、UI组件
框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。
什么是组件:
  • 组件是视图层的基本组成单元。
  • 组件自带一些功能与微信风格的样式。
  • 一个组件通常包括开始标签结束标签属性用来修饰这个组件,内容在两个标签之内。
五、WE-UI和WE-UI小程序
WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。
WeUI 是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含buttoncelldialogtoastarticleicon等各式元素。
官方网站:https://weui.io/
懂商业的技术合伙人(15):微信小程序
其中,有1套“小程序版本”,相比第4部分的UI组件,更多一些。

六、API

懂商业的技术合伙人(15):微信小程序
懂商业的技术合伙人(15):微信小程序
七、Examples
Talk is cheap, show me the code.
1、打卡
在某个经纬度范围内允签到和签退。
懂商业的技术合伙人(15):微信小程序
2、打卡记录
数据存储在本地
懂商业的技术合伙人(15):微信小程序
3、地理位置和地图
获取当前的经纬度坐标,并在地图中展示
懂商业的技术合伙人(15):微信小程序
4、更多API例子
懂商业的技术合伙人(15):微信小程序

八、HTML5开发原生App
微信小程序,明明就是用HTML5开发了原生APP,只不过运行环境依赖于微信。
那我们为啥不使用HTML5开发原生App呢?