概述
由于面试的关系接触了一下微信小程序,花了2晚上开发了一个带书签功能的古龙小说阅读器,并且已经提交审核等待发布。这篇博文记录了我的开发过程和对微信小程序的看法,供以后开发时参考,相信对其他人也有用。
阅读器的数据没有用服务器,而是写在js文件中传进去的。书签用的本地储存,所以关闭小程序后仍然存在。
用微信扫这个二维码可以快速查看(还在审核中。。。审核好像也有许多坑。。。):
这是效果展示:
认识小程序
什么是小程序
小程序是由开发者用html,css和js开发的,发布到微信小程序页面的微型app。之所以说它微型,是因为它不像普通app那样需要下载安装,它可以直接在微信里面打开,速度很快。
如何打开小程序
可以通过用微信扫描小程序的二维码打开,也可以用微信搜索小程序并打开,方法如下:
- 下载安装最新版本的微信。
- 点击下面的发现,然后滑到页面最下面,点击小程序。
- 最后点击右上角的放大镜即可搜索小程序。
小程序的优点和应用
小程序拥有手机app的大部分优点,并且解决了手机app的一大缺点——重度:需要下载安装。
我们生活中经常有这样的例子,就是下载安装了某一个手机app,只需要用一次然后卸载。如果是微信小程序的话,就免除了下载这个步骤。举个例子,饭店的菜单,只需要扫一扫码,就可以从微信里面看到菜单并点菜,还可以提前点菜。完全不需要服务员拿来纸质菜单。
目前美团,饿了吗甚至12306已经发布了它们的微信小程序,功能和它们的app差不多,更有人直接卸载了app,就用小程序。
小程序开发
既然小程序有这么多优点,而且很可能成为以后app的发展方向,我当然是非常激动啦。于是打算动手具体尝试一下微信小程序开发。
思路:就写一个能阅读古龙小说的手机阅读app,需要带有书签功能,因为每次关闭再打开的时候我要能够继续上次的地方阅读。
开发前:去官网注册相关信息(因为微信小程序是微信发布的,微信要你注册你就得注册0.0),下载开发软件,并阅读相关文档,了解小程序机制。
机制:微信他自己仿照html,css和js发布了一套标准wxml,wxss,wxs,写法和他们很类似,就是功能少很多。
API:小程序的页面渲染比起vue来说,更接近react风格,为了加快小程序在微信端的运行,它更加侧重于单向数据绑定。为此,小程序发布了很多api,包括地图啊设备信息啊位置啊什么的都很有意思。
开发:了解了微信开发软件自带的文档结构和渲染规则之后就很容易了,主要遇到了下面2个坑:
- 滑动到页面的固定位置。有两种解决方案,一种是用scroll-view标签,然后用它自带的参数来配置,另一种方法是利用pageScrollTo这个api。强调一下,这个问题在js中非常容易解决。
- 读取文件。有五种解决方案。一种是跨域读取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源码
我学到了什么
- 了解了微信小程序的运作原理和从注册到审核上线的流程。
- 实际操作了一下本地储存,觉得很有趣,以后打算操作一下地图api。
- 熟悉了手机端特有的tap事件,touch事件,touchstart事件,touchmove事件等。
- 了解了微信小程序生态,它能做什么,它的优势是什么等等。
小程序展望
像小程序这种,一定是以后app的发展趋势。
但是现在小程序开发还不成熟,虽然已经有很多人前赴后继的去开发了,也踩过了不少坑有不少经验,但是仍存在大量的坑给你踩,开发起来会很累。
另一方面,由于小程序只局限在国内,指不定国外一个权威机构发布一套简单容易开发的小程序语言,那这边又要跟着动;而且,指不定以后微信直接支持html,css和js呢!
我个人对待国内的微信小程序还是很期望的,但是我现在对现代web开发还做的不是很溜,当务之急是先把基础做扎实。