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

微信小程序，是一种介于Web和App之间的应用程序。

最近2周认真研究了，并写了个Demo，很简单。

雷观：微信小程序和微信公众号，都可以作为早期创业的切入点。

一、产品定位

1、官方介绍

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。（有点抽象）

2、对比介绍

本质还是微信体系类服务用户的一种方式，侧重便捷获取和传播。

3、优势

扫码即用，只下载需要使用的内容。

不想使用了，不需要手动卸载。

微信内部可以方便传播，充分利用微信的用户优势。

4、个人理解

以微信为运行时环境的Web应用程序，前端内容托管于微信平台的UI解决方案。

App中再嵌入“APP”，从逻辑上是不合理的，更好的解决方案是Android等操作系统提供，更公正。

APP客户端和Web之间的界限，越来越模糊。

 

二、开发准备

1、注册

账号、密码、主题类型、身份证等资料。

标准的微信账号注册流程。

2、信息完善

名称、介绍、服务类目（生活服务、餐饮等）

3、开发者信息

可以直接使用注册的账号信息即‘“管理员”，或者手动绑定几个“开发者”账号。

4、开发者ID

AppID、AppSecret

5、开发者工具

下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

三、小程序框架

1、文件结构

app.js等描述整个App。

具体的页面由4部分组成，界面布局、界面样式、事件处理和业务逻辑、页面配置。

小程序本质就是一套UI，和HTML5总体类似，不同点在于：

a、WXML

微信自己定义了一套标签语言，构建页面、展示数据、响应用户操作。

b、WXSS

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，我们的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序，我们对 CSS 进行了扩充以及修改。

 

2、全局配置

更多细节，具体看代码。

四、UI组件

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

什么是组件：

• 组件是视图层的基本组成单元。
• 组件自带一些功能与微信风格的样式。
• 一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

五、WE-UI和WE-UI小程序

WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。

WeUI 是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

官方网站：https://weui.io/

其中，有1套“小程序版本”，相比第4部分的UI组件，更多一些。

下载地址：https://github.com/weui/weui-wxss

 

六、API

 

七、Examples

Talk is cheap, show me the code.

1、打卡

在某个经纬度范围内允签到和签退。

2、打卡记录

数据存储在本地

3、地理位置和地图

获取当前的经纬度坐标，并在地图中展示

4、更多API例子

 

八、HTML5开发原生App

微信小程序，明明就是用HTML5开发了原生APP，只不过运行环境依赖于微信。

那我们为啥不使用HTML5开发原生App呢？