开发微信小程序——古龙小说阅读器

概述

由于面试的关系接触了一下微信小程序，花了2晚上开发了一个带书签功能的古龙小说阅读器，并且已经提交审核等待发布。这篇博文记录了我的开发过程和对微信小程序的看法，供以后开发时参考，相信对其他人也有用。

阅读器的数据没有用服务器，而是写在js文件中传进去的。书签用的本地储存，所以关闭小程序后仍然存在。

用微信扫这个二维码可以快速查看(还在审核中。。。审核好像也有许多坑。。。)：

这是效果展示：

认识小程序

什么是小程序

小程序是由开发者用html，css和js开发的，发布到微信小程序页面的微型app。之所以说它微型，是因为它不像普通app那样需要下载安装，它可以直接在微信里面打开，速度很快。

如何打开小程序

可以通过用微信扫描小程序的二维码打开，也可以用微信搜索小程序并打开，方法如下：

1. 下载安装最新版本的微信。
2. 点击下面的发现，然后滑到页面最下面，点击小程序。
3. 最后点击右上角的放大镜即可搜索小程序。

小程序的优点和应用

小程序拥有手机app的大部分优点，并且解决了手机app的一大缺点——重度：需要下载安装。

我们生活中经常有这样的例子，就是下载安装了某一个手机app，只需要用一次然后卸载。如果是微信小程序的话，就免除了下载这个步骤。举个例子，饭店的菜单，只需要扫一扫码，就可以从微信里面看到菜单并点菜，还可以提前点菜。完全不需要服务员拿来纸质菜单。

目前美团，饿了吗甚至12306已经发布了它们的微信小程序，功能和它们的app差不多，更有人直接卸载了app，就用小程序。

小程序开发

既然小程序有这么多优点，而且很可能成为以后app的发展方向，我当然是非常激动啦。于是打算动手具体尝试一下微信小程序开发。

思路：就写一个能阅读古龙小说的手机阅读app，需要带有书签功能，因为每次关闭再打开的时候我要能够继续上次的地方阅读。

开发前：去官网注册相关信息(因为微信小程序是微信发布的，微信要你注册你就得注册0.0)，下载开发软件，并阅读相关文档，了解小程序机制。

机制：微信他自己仿照html，css和js发布了一套标准wxml,wxss,wxs，写法和他们很类似，就是功能少很多。

API：小程序的页面渲染比起vue来说，更接近react风格，为了加快小程序在微信端的运行，它更加侧重于单向数据绑定。为此，小程序发布了很多api，包括地图啊设备信息啊位置啊什么的都很有意思。

开发：了解了微信开发软件自带的文档结构和渲染规则之后就很容易了，主要遇到了下面2个坑：

1. 滑动到页面的固定位置。有两种解决方案，一种是用scroll-view标签，然后用它自带的参数来配置，另一种方法是利用pageScrollTo这个api。强调一下，这个问题在js中非常容易解决。
2. 读取文件。有五种解决方案。一种是跨域读取github api上存放的数据，但是github是国外网站，在国内没有备案，而微信规定，跨域一定需要备案，不可行。一种是设置服务器，但是我刚买腾讯云，还没时间搭建服务器，也不可行。还一种是用wx.openDocument这个api读取文件，但是它不仅不能读取text，而且它实际上是用系统默认程序打开的，会发生跳转，也不可行。还一种是用js中的读取文件的方法，很可惜，微信小程序并不支持，也不可行。最后我只能把数据写在js文件里面传上去打开，等我的腾讯云服务器搭建好了再转移。再次强调一下，这个问题在js中也非常容易解决。

这些主要功能都集中在我的page页，代码如下：

//page.js
var app =getApp()
Page({
  data: {
    id: 0,
    novel: '等待中...',
    bookMark: []
  },

  //滑动事件
  touchMove: function(event) {
    let bookMark = (wx.getStorageSync('bookMark') || []);
    bookMark[this.data.id] = event.touches[0].pageY;
    wx.setStorageSync('bookMark', bookMark);
  },

  //点击事件,从上次开始看
  tap: function(event) {
    let bookMark = (wx.getStorageSync('bookMark') || []);
    wx.pageScrollTo({
      scrollTop: bookMark[this.data.id] - app.globalData.windowHeight/3
    })
    },

  //页面加载
  onLoad: function (options) {
    var that = this;
    let bookMark = (wx.getStorageSync('bookMark') || []);

    that.setData({
      id: options.id,
      novel: options.novel,
      bookMark: bookMark
    });
  }
})

具体情况可以看我的github源码

我学到了什么

1. 了解了微信小程序的运作原理和从注册到审核上线的流程。
2. 实际操作了一下本地储存，觉得很有趣，以后打算操作一下地图api。
3. 熟悉了手机端特有的tap事件，touch事件，touchstart事件，touchmove事件等。
4. 了解了微信小程序生态，它能做什么，它的优势是什么等等。

小程序展望

像小程序这种，一定是以后app的发展趋势。

但是现在小程序开发还不成熟，虽然已经有很多人前赴后继的去开发了，也踩过了不少坑有不少经验，但是仍存在大量的坑给你踩，开发起来会很累。

另一方面，由于小程序只局限在国内，指不定国外一个权威机构发布一套简单容易开发的小程序语言，那这边又要跟着动；而且，指不定以后微信直接支持html，css和js呢！

我个人对待国内的微信小程序还是很期望的，但是我现在对现代web开发还做的不是很溜，当务之急是先把基础做扎实。