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

概述

由于面试的关系接触了一下微信小程序,花了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开发还做的不是很溜,当务之急是先把基础做扎实

上一篇:【JAVA中String、StringBuffer、StringBuilder类的使用】


下一篇:读取本地HTML的小说阅读器应用源码项目