全部文章

微信「小程序」之我见

2016-10-28 @sunderls

小程序 微信 mini-program

微信小程序之前可是火了一把,相信各位同学都有一定了解了,此文用以总结我对小程序的看法。(不是大牛,估计没什么特别的观点,请做好心理准备)

时间点

  1. 2016.1.11 张小龙提出了小程序的构想,简单讲就是现在的app太重了,常用功能作为一个小app就好。
  2. 2016.9.21 内测开始,只有200个名额,但是开发文档和ide都公开了,大家可以体验。
  3. 2016.9.23 流出了一段视频。http://v.youku.com/v_show/id_XMTczMzk4NTgwOA==.html

分析

1. 类似Facebook Instant Article,用js等前端技术写代码,跑在原声组件上。

这个想法并不新鲜,Facebook 一年前就上线了 Instant Article,这个技术让网页作为原生组件显示,给用户带来流畅的体验。技术实现上时,普通但新闻网页中添加规定好的json信息,然后facebook app在feed中显示网页预览的时候,检测这些信息,然后判断是否作为原生组件进行显示。

这个和微信小程序是差不多的概念,只不过Instant Article只是针对新闻类网页,提供但组件只有那么几个,没有多强的扩展性,而小程序的组件就更加底层,开发者可以做更多的东西。

时隔一年再看facebook instant article 貌似发展也不是很好,有华盛顿邮报这些内容提供方加入,也有死活观望的人,他们的理由是web网页已经可以优化的比较不错,没必要被instant article束缚住。

2. 代码上看,用浓烈的React Native风格,而小程序要求更加严格。

我们先看看小程序官网的代码例子。

app.json是app的全局配置

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

一目了然,有几个页面,头部的文字及样式都在这里配置。

app.wxss

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

样式表,没什么特别的。

app.js

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this;
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})

提供了一些自页面可以调用的全局数据,和app的初始化工作。具体我们来看首页。

首页 index.wxml

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

这里可以当作是html模版,可以看到<view>,<text>等组件。数据绑定用的两个花括号。

首页 index.js

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

注意datathat.setData()方法,这里和React的state以及that.setState()简直神似。首页的js里面调用了微信的接口获取信息,然后绑定了用户点击事件。

我们再来看React Native的例子 https://facebook.github.io/react-native/releases/next/docs/state.html#content

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: true};

    // Toggle the state every second
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }

  render() {
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

AppRegistry.registerComponent('BlinkApp', () => BlinkApp);

React Native代码风格和React.js是一样的,注意到<view>等组件名字,可以看出其和小程序的相似性。 明显的不同是,小程序提供了wxml模版,避免了render()方法的调用,这个应该是为了让开发者方便开发而已。

3. 对于用户而言,小程序是个新鲜的东西,偶尔可以尝试,但是感觉不会迁移使用习惯。

用户永远是懒惰的和尝鲜的,小程序上线之后,微信中必然出现小程序的入口,根据流出的视频来看,暂时小程序的入口在应用号左滑的菜单中。可以预想的是,小程序可以通过链接启动,然后链接会在聊天及朋友圈中大肆扩散。而到底用户会产生怎样的变化,需要从实际使用情况来看。如果用户是在玩微信的时候看到了小程序,可能玩玩就算了;如果是专门去为了查找某些信息,我想用户不会打开微信再来寻找小程序,因为用户已经习惯了app的打开方式,对于微信也有着微信是聊天app的固有认知。所以小程序能否成功的关键,就在于能否改变用户的使用习惯,对于这个我持消极态度。

如果微信中出现了大量小程序的话,又会出现一个入口曝光的问题。如果微信对小程序的定位是被动给用户提供,比如聊天中提到了订餐就推荐使用订餐,或者朋友圈中的推广链接之类的,那还问题不大。

4. 对于微信而言,小程序是个圈住一切的梦,失败也不会有问题。

这个不必多言,大家都想圈东西,圈一切。而小程序只是微信大平台的一个尝试,即使失败也不会影响用户的粘性,它是增加了东西而不是减少。

5. 对于苹果而言,小程序是个问题,但是能控制,是个小问题。

对于苹果而言,如果影响到他的收入了的话,我认为苹果时不会高兴的。比如小程序中出现了火爆游戏(可能性低),苹果的过路费还是得照收。不交,就打微信爸爸就行了。

6. 对于开发者而言,小工具开发者可以尝试,大app开发成本太高,大app的跳板呢?

使用场景上看,小程序只能是微信聊天功能之外的附属功能,所以目标app范围有限,只能是简单的小工具,小游戏,这种情况开发者可以随便尝试,成本低。

但是如果是大而全的app的话,小程序开发性价比又太低。用户就是这样,简单的功能可以尝试,需求会越来越多,app会越来越复杂,这个没办法,而小程序对架构决定了它做不了复杂的完美的app,因为最终它只是一个中间层而已。当一个app开发成本很高的时候,我不觉得花大力气开发小程序有什么好处,谁叫小程序名字里面有个「小」字呢。

如果小程序是作为用户跳转到完整app之前的一步呢?呵呵,这不到头来,还是把app装到手机里了么。

7. 对于技术圈而言,小程序是一股春风,但是感觉很快就会过去。js要好好学。

app内部开放平台的事情,大家都在做,微信这个大胆地尝试能让搞技术的人更加放开手脚大胆尝试,带来更多更新鲜的技术实现。网络世界有很多壁垒,比如OS,打破这一壁垒的个人觉得是web技术,为了跨平台开发有基于web的hybrid方案,但是目前都如人意,谷歌倒是不管那么多,大力发展web应用,而不是想办法让大家通过web来开发原生应用。在OS之下的APP,能打破这个壁垒的,估计也只有web技术有这个可能了,但问题在于各个app会提供各自的解决方案,针对小程序写的代码,没法跑在messenger,没法跑在LINE,这注定是个悲剧。但是对于js工程师,是个喜剧。

8. 大家都是抢入口了。

苹果提供了一个大家能有无限可能性的设备,大家都去买了,它叫iphone。浏览器提供了地址栏,大家有无限的可能性,大家都去搜索查找信息。微信想要提供一个无限可能性的小程序,但是我觉得这个入口不会太成功。为什么? 因为手机是没有特定目的,它是个设备提供电话等功能。浏览器也没有特定目的,你需要去查找。而用户打开微信的时候,就有了先入为主点观念,去聊天,或者看朋友圈,你能指望他买机票的时候去打开微信么。

注:我微信刷的很少,腾讯客户端倒是每时每刻都在刷。嗯,我看着新闻里的美食照片,我想做菜了;看着旅游景点照片,我想买机票订酒店了;看着书评我想买书了,看着乐评我想买歌了。嗯,看来新闻客户端也需要有一个小程序系统了,就命名为「新程序」吧,你看怎么样。(笑