初识微信小程序（MiniProgram）

发表于 | 分类于 |

前世今生

需求故事

普通人活着，需要哪些服务？

一个人的一天：
早上出门打车，交通服务；
中午点外卖，订餐服务；
晚上吃完饭看电影，订票服务。
这些服务都相对高频，微信已经集成，但张小龙发现，还有很多低频服务无法覆盖。

如：考驾照，买车，停车，洗车，汽车保养，汽车维修，汽车保险，二手车买卖；租房，买房，出租房产，售卖房产，房屋装修；保洁，水电气宽带维修，家电维修，洗衣，皮鞋皮包皮衣护理，手机维修；美容，美甲，美发；疾病咨询，挂号，问诊；旅游订火车飞机车票，订酒店，订景点门票；
以上这些服务有几项特点： 

1
2
3
1. 种类杂而多，与汽车有关的就有5项以上，与房产有关的至少10项左右。
2. 低频，每项你可能一个月只用一两次。
3. 线下服务方便，更多的以线下门店形式存在，线上化程度较低。

为了解决这些问题,微信在2016推出了小程序。

相关纪事

  • 从公众平台发布的第一天起，张小龙应该就有了让每一个公众账号都成为一个小程序的想法。

张小龙朋友圈

  • 现在 iOS 或者 Android 的应用，都是「需要先下载才可以使用」、「每次更新也需要下载」、「不想用的时候需要手动删除」、「应用与应用之间无法进行自由地跳转」，这些特性，决定了「应用」这种形态，也许会是一种过渡阶段的产品。
  • 微信想做的事情，很多公司想做，比如 Google 试图通过硬件（Chrome Book）来做、通过工具型软件（Chrome）来做，甚至是通过系统（Android）来做；UC 在 2012 年也想通过 UC 浏览器首页来做，他们觉得，在移动设备上，浏览器会是入口，结果当然是没成功，UC 浏览器首页现在成为了一个今日头条，百度也做，但最后都…。百度没做成，UC没做成，大抵是因为他们都没有微信这样牛逼的条件——几乎全中国的主要人群都有，平均打开次数和使用时长不可超越。

小程序是什么

  • “小程序非常接近于PC时代的网站的服务，网站服务不同于公众号，它更直接。大家想象一下，把小程序看作是PC时代的网站的话可能更好理解。”—–张小龙
  • 小程序就像PC时代的网站，不需要下载、安装，信息触手可及，用完即走，无需卸载。Web 形态的产品，会是更加「互联网」的一种形态，因为它具备这些特性「无需下载即可使用」、「自动更新」、「关闭即删除」、「网站与网站之间可以自由跳转连接」
  • 它只需要静静的在那里，等着用户来用就好了。—-张小龙
  • 很有可能会是未来移动互联网应用的主要形式

小程序的“小价值”

用户角度

对于用户来说，小程序触及到了PC网页、公众号、H5、APP无法触及到的地方，概括来说它诞生就是帮助用户解决一些特殊需求的，比如在用户没有时间、想控制手机内存空间、不想下APP等等“尴尬”的时候，小程序就可以发挥它的价值了，概括起来有三点：

  • 使用刚需低频服务时。小程序降低了低频服务类APP的使用门槛，需要使用时打开小程序，用完了就可以关掉，不会一直占手机内存，不想用了还可以删掉。这用完即走的特点正好满足用户使用低频服务类APP时的需求，比如要买车票时打开小程序，买完票就关闭它，等要用时再打开，避免APP一直在手机里占内存却又很少用。

  • 使用线下的服务时。小程序在线下的价值是最值得关注的，因为用户在线下消费的需求正是“快捷”、“灵活”、“用完即走”。比如在餐馆点菜，只需扫描二维码，就可以接入小程序，立马就能完成点菜，不必下载APP，也不必关注公众号，也不用排队等餐馆的服务员，同时加载速度比H5快，付款方式比H5方便，对用户来说，可以说是最方便的方式。

  • 满足特殊场景下的个性化需求时。个性化的需求可能只会持续一小段时间，而为了这一小段时间要去下载APP常常让用户觉得心累，比如大家肯定都有这样的遭遇，今天想看这部电影，下了一个播放器，明天想看那个电影，又下了另一个播放器，这时候如果使用小程序看电影，就可以完美切换了，不必在手机里下一堆视频播放器。

APP角度

结合小程序对用户的价值来看，小程序对于APP来说有好也有坏。

  • 对于低频率使用还没发展起来的APP来说，小程序是一个好事情，因微信提供较便宜及容易使用的资源,与数以百万计的移动用户接触。因为对这些企业来说，要么反正无法拥有自己的APP，要么有APP但是没什么波澜，APP本身可使用的频率也比较低，而他们如果用了小程序，就会增加用户时间，增加营销机会，先利用小程序进行营销，吸引一部分用户，再引流到APP当中，所以对它们来说小程序不但不是打击反而是有价值的平台。
  • 对于高频率使用的APP 来说，它们虽然没有被卸载之忧，但需要在损失一定可营销、高体验的用户时间，与多一个渠道带来的利益之间权衡，因为谁也不知道小程序会成为他们的渠道，还是说他们为小程序做嫁衣。
  • 而对于中间的夹层，也就是使用频次一般，简单的、工具类APP 来说，小程序也许一个巨大打击，上文提到，小程序最适用的场景就是“低频”“服务”“刚需”，那么小程序很可能会抢掉此类APP的用户。

其他

  • 对于开发者而言：微信开放了自身能力和部分关系链，只要开发者找准了微信生态中细分用户场景，就能做更好地服务，微信将庞大的用户导流给开发者，还能轻松为开发者提供用户的喜好等信息。
  • 对于微信而言：架设了一个足够轻的插件桥梁系统，可以服务于巨大的社交容器，让各种关系链和服务的通道更加舒畅，提升了用户体验，也让用户更多留在了微信生态中。
  • 拓展二维码的能力：扫描一个二维码就能直接打开一个接近原生应用的小程序。

小程序的缺点

  1. 从技术层面来说，小程序的体验不及APP
  2. 从功能体量上来说，小程序不及APP
  3. 从开放性来说，小程序不及APP,不能直接分享到朋友圈，少了一个重要的推广方式。
  4. 不能跳转外链网址，间接影响了小程序的开放性。
  5. 需要像APP一样审核上架，这点比网页即做即发布要麻烦些。
  6. 不能像原生应用一样自由的推送消息(开放性),能进行一些限制内的消息通知。
  7. 使用的小程序多起来后,不方便查找(只有个搜索功能和收藏,不能自定义排序)。也许在微信里面，小程序需要有一个九宫格聚合页面，这个对普通用户来说，才是最直接应用的感受？

小程序六大核心入口

  1. 微信搜索：分精准搜索和模糊搜索。目前只能模糊搜索到一些比较大的、或者有集团层面战略合作的品牌小程序，其他的只能通过精准搜索获取到。
  2. 线下扫码：二维码大家懂🤣
  3. 公号关联：同一主体下的公众号和小程序可以绑定形成唯一的unionid，这样就可以互相跳转、互推模板消息了。
  4. 好友推荐：在微信生态充分使用已有用户的社交关系链，让用户带用户，迅速获取流量的“裂变”。
  5. 历史记录：用过的小程序会在微信主页下拉菜单中,还有”发现”菜单的小程序主页中。
  6. 附近的小程序：基于LBS(基于位置的服务)，在搜索页面也可以获取最近的小程序。

小程序特征

在前面的内容中已经基本阐明了小程序的特征:

  1. 概括起来,就是张小龙的十六个字：无需安装、触手可及、用完即走、无须卸载。
  2. 简单来说，就是“轻”量级的应用，尽可能的不骚扰用户，以维护微信整体的用户体验。

小程序的未来

  • 线下：场景和服务。几个例子，同程旅游直接就在景点出放置小程序二维码，游客直接就能在小程序中购票；公交信息查询，公交车站站牌设二维码，等车的时候我可以知道公交车的动态；医院，排队挂号，提供咨询。这里有一个共性，这些场景都是想去用的时候就去用，但是频次又不太高。更深入一点，未来可以将微信卡包、附近的门店与小程序结合起来，实现线下引流、转化、维护的一个完整闭环。
  • 线上：群插件、表单收集。比如公司收集中午吃什么，收集投票信息。另外，在本次授课前我分享了我的社交名片也是一个非常典型的场景。

小程序的能力

  • 宏观来说小程序能做的有

资讯类(图文)应用:今日头条
影音类(多媒体)应用:爱奇艺,QQ音乐,斗鱼直播
电商类(图文+支付)应用:拼多多,有赞
基于位置的服务:滴滴打车,携程,摩拜单车

  • 宏观来说小程序做不了的有

美图秀秀(复杂的图形处理)
抖音/快手(复杂的音视频处理)
完整的聊天应用(不能后台运行和推送)
无法和支付宝接通(废话🤣)
无法直接分享到朋友圈
无法在小程序里放置外链(不同于公众号)
不能分享到第三方软件
嗯…其他的暂时还没想到

开发小程序

体验小程序

请使用微信扫一扫，扫描下面小程序码：

MiniProgram demo

注：下载微信客户端版本号：6.3.27 及以上

介绍

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

申请帐号

请前往微信公众平台，点击右上角立即注册。

  1. 选择注册的帐号类型
  2. 填写邮箱和密码
  3. 激活邮箱
  4. 填写主体信息
  5. 选择主体类型
  6. 填写管理员信息
  7. 完成注册

开发前的准备

登录小程序管理平台，完善小程序信息。

  1. 绑定开发者
  2. 获取 AppID
  3. 安装微信开发者工具

微信开发者工具

为了帮助开发者简单和高效地开发和调试微信小程序，我们在原有的公众号网页调试工具的基础上，推出了全新的微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式。

使用小程序调试，开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。详情

框架

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。

  • 响应的数据绑定

框架的核心是一个响应的数据绑定系统。框架可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。通过这个简单的例子来看：

1
2
3
<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// This is our App Service.
// This is our data.
var helloData = {
  name: 'WeChat'
}
// Register a Page.
Page({
  data: helloData,
  changeName: function(e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  }
})
  • 页面管理

框架管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据，方法，生命周期函数注册进框架中，其他的一切复杂的操作都交由框架处理。

  • 基础组件

框架提供了一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的微信小程序。详情

  • 丰富的 API

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

代码构成

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page，它们都是由四种格式文件构成。如下：

  • JSON（*.json 表示配置）
  • WXML（*.wxml 表示模版或结构）
  • WXSS（*.wxss 表示样式）
  • JS（*.js 表示逻辑或行为交互）

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件 必填 作用
app.js 是 小程序逻辑
app.json 是 小程序公共设置
app.wxss 否 小程序公共样式表

一个小程序页面由四个文件组成，分别是：

文件类型 必填 作用
js 是 页面逻辑
wxml 是 页面结构
wxss 否 页面样式表
json 是 页面配置

基础库

为了避免新版本的基础库给线上小程序带来未知的影响，微信客户端都是携带上一个稳定版的基础库发布的。

  • 在新版本客户端发布后，再通过后台灰度新版本基础库，灰度时长一般为 12 ～ 24 小时，在灰度结束后，用户设备上才会有新版本的基础库。
  • 以微信 6.5.8 为例，客户端在发布时携带的是 1.1.1 基础库（6.5.7 上已全量的稳定版）发布，在 6.5.8 发布后，我们再通过后台灰度 1.2.0 基础库。

兼容性

小程序的功能不断的增加，但是旧版本的微信客户端并不支持新功能，所以在使用这些新能力的时候需要做兼容。开发者文档会在组件，API等页面描述中带上各个功能所支持的版本号。

  1. 可以通过 wx.getSystemInfo 或者 wx.getSystemInfoSync 获取到小程序的基础库版本号。
  2. 也可以通过 wx.canIUse 来判断是否可以在该基础库版本下直接使用对应的API或者组件。

发布前的准备

如果你只是一个人开发小程序，可以暂时先跳过这部分，如果是一个团队需要先了解一些概念。

  1. 用户身份
  2. 预览
  3. 上传代码
  4. 小程序的版本

代码审核与发布

开发和测试完成之后，就需要将小程序发布给用户来使用了。

  1. 提交审核
  2. 审核信息填写
    • 配置功能页面
    • 测试帐号
    • 完成提交
    • 代码发布

https://mp.weixin.qq.com
https://developers.weixin.qq.com/miniprogram/dev/index.html

注：以上内容均整理自互联网，我只是个搬运工🤣

坚持原创技术分享，您的支持将鼓励我继续创作！