微信小程序设计

邢榕珊　匡芳君

摘 要： 微信小程序借用API函数算法在微信平台上线，利用微信的用户群，直接达到不用下载无需注册直接使用的效果。对微信小程序面临的问题和发展前景进行分析，以FlappyBird设计为例，使用微信官方web开发者工具进行微信小程序的设计与实现。结果表明：微信小程序不僅能够解决APP占用资源的问题，还解决了下载难注册难等问题，微信小程序的发展仍然有极大优势。

关键词： 微信小程序； Web开发者工具； API函数； FlappyBird设计

中图分类号：G252 文献标志码：A 文章编号：1006-8228（2018）08-09-04

Design of WeChat small program

Xing Rongshan， Kuang Fangjun

（School of information engineering， Wenzhou Business College， Wenzhou， Zhejiang 325035， China）

Abstract： WeChat small program borrows API function algorithm to live on WeChat platform， and uses WeChat user group directly to achieve the effect of directly running without downloading and without registering. In this paper， the existing problems and development prospects of WeChat small program are analyzed， taking FlappyBird design as an example， and using WeChat official web developer tools， the WeChat small program is designed and realized. The result shows that WeChat small program can not only solve the problem of APP consumption， but also solve the problem of difficulty in downloading and registration. The future development of WeChat small program still has great advantages.

Key words： WeChat small program； Web developer tools； API function； FlappyBird design

0 引言

随着移动用户群体的不断攀升，APP运营过程中产生了无法避免的长尾效应，在需求曲线中流行和个性化难以平衡，大量资源无法被充分利用，微信小程序应运而生。2016年微信创始人张小龙提出了微信在发展过程中的四个问题，同时提出了微信小程序的概念[1]。微信小程序的提出，是对市场上APP长尾的另一种解决办法，通过API技术在平台发展，既满足了程序的客户基数，又满足了客户的个性化需求，并且完美贴合“用完即走”的理念。

1 微信小程序现状分析

微信小程序自上线以来已经运营超过200万的程序，全面开放申请后，企业、个体、政府、媒体等各个职能部门的开发者都可在微信平台研发小程序。2017年12月微信更新后添加了「跳一跳」小游戏，瞬间在朋友圈掀起波浪。跳一跳的发布意味着用户可以直接在微信界面进入游戏，无需下载，也无需占用内存。开发者想要研发游戏时可以直接通过微信审核上线小程序。在微信聊天界面直接向下拉即可打开小程序入口，并且会根据用户最近使用推荐小程序，非常地便捷易找寻。不仅仅是游戏，包括一些线上商城、已经开发的APP（如猫眼电影）、类似公众号，都被微信小程序囊括在内。但是对于大型的具有交互、繁复功能的大型APP，微信小程序无法做到兼顾，化繁为简也失去了APP本应有的一些功能。当前微信小程序的应用范围大致为游戏、电商、订阅号三个范围。

2 微信小程序面临的问题和发展前景

虽然微信小程序的开发简便，但是由于依托于微信APP，当小程序在运行一段时间后，开发人员会对小程序进行维护。每次维护够后虽然用户体验加深，但是必须要用户删除小程序重新打开才行。这个步骤会误导用户以为小程序无法使用，放弃小程序入口，对微信小程序的发展造成了巨大的阻碍。一些与APP关联的小程序也无法直接唤醒APP，两者单向衔接，也造成了不好的用户体验。另一方面微信小程序的主要开发群体是电商，不需要开发商城与淘宝、京东等龙头企业竞争固然是好，但在交易中无法保证安全性、可靠性，也是一大难题。

微信小程序代表轻型应用在未来互联网发展过程中的形式，解决了安装软件内存和运行问题。轻便、简单、小巧的特点会成为微信小程序未来发展中的极大优势，未来应用“触手可及”的梦想从微信小程序开始已经逐渐显现出雏形[2]。微信小程序自发布以来秉持的就是服务用户的理念，它无法代替现有APP在市场中的地位，但在未来发展中极有可能将很多功能性单一的APP纳入囊中，精简当前的APP市场。

3 微信小程序FlappyBird案例设计与实现

本文设计的FlappyBird微信小程序是在Microsoft Windows 7 64位操作系统和微信Web开发者工具，开发语言使用JAVA，具体设计与实现如下。

⑴ 精灵的基础类的封装与背景的实现

canvas图片和精灵加载的资源、大小和位置初始化由constructor（）构造器负责。由于es6有一个特性，可以给参数赋默认值，如果传参的时候忘记给参数赋值，es6就可以将其赋默认值，所以给特别长的参数都赋默认值，也不会导致程序的崩溃。

⑵ 资源管理器的封装

通过变量缓存器，方便我们不同类中的访问和修改变量，减少代码重复的定义。先创建getInstance（）的案例，然后创建存储变量的容器es6的Map（）。构建put（）的方法，return到对象本身，方便链式操作。创建destroy（）的方法，对已有资源进行销毁和滞空。关键代码如下：

constructor（） { //Map创建存储变量

this.map=new Map（）；

}

put（key， value） {

if （typeof value==='function'） {

value=new value（）；

}

this.map.set（key， value）；

return this；

}

destroy（） {

for （let value of this.map.values（）） {

value=null；

}

}

⑶ JS面向对象填坑——ES5和ES6的區别与转化

区别：ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。ES5只有全局作用域和函数作用域，没有块级作用域[3]。

转化：Babel是一个广泛使用的转码器，babel可以将ES6代码完美地转换为ES5代码，所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。

⑷ Canvas运动渲染不断移动的地板

首先地板的移动方向是从右往左，所以用-this.land实现地板的x坐标为递减。为了使一张地板的图片循环使用来实现地板的不断移动，用if（）来判断当地板图片的右边即将达到canvas的右侧边界的时候，将前面的部分截回重新循环使用[4]。关键代码如下：

draw（） {

this.landX=this.landX+this.landSpeed；

if（this.landX>（this.img.width-DataStore.getInstance（）

.canvas.width）） {

this.landX=0；

}

}

⑸ 上下铅笔的创建：实现画布上只出现两组铅笔

通过if（）判断铅笔第一组铅笔的左侧x坐标加上铅笔的宽度是小于0来说明铅笔的右侧边界已经超越canvas的左边界，且保证画布上的铅笔个数为四个。用shift（）的方法来实现铅笔的销毁，shift是把数组的第一个元素推出并且把数组的个数-1。关键代码如下：

if （pencils[0].x+pencils[0].width<=0

&&pencils.length;===4） {

encils.shift（）；

pencils.shift（）； //销毁铅笔

This.dataStore.get（'score'）.isScore=true；

}

if （pencils[0].x<=（DataStore.getInstance（）.canvas

.width-pencils[0].width）/2&& pencils.length===2） {

this.createPencil（）； //随机创建铅笔

}

this.dataStore.get（'pencils'）.forEach（function （value） {

value.draw（）；

}）；

⑹ 小鸟类的创建与逻辑实现——鸟能上下飞起来

小鸟的三种状态是用一个数组去存储，其中小鸟的上下飞动其实变化的是小鸟的y坐标，设置this.y= [birdY， birdY， birdY]，用draw（）将小鸟渲染出来，定义常量speed来表示切换三只小鸟的速度。用js的Math.floor（）的方法，实现减速器的作用，防止小鸟飞起来时出现的闪烁现象。通过模拟重力加速度来实现小鸟能掉下去，并且有向上移动30像素的偏移量。定义birdEvents（）的方法给每只鸟绑定相应的事件，当每点击小鸟一次，小鸟的事件也在变化，为了使速度不再一直变快，需要将时间置零，实现小鸟自由落体的重新开始。关键代码如下：

const speed=0.2； //切换三只小鸟的速度

this.count=this.count+speed；

if （this.index>=2） { //小鸟的数组[0，1，2]

this.count=0；

}

this.index=Math.floor（this.count）； //减速器的作用

const g=0.98/2.4； //模拟重力加速度

const offsetUp=30； //向上移动一丢丢的偏移量

const offsetY=（g*this.time*（this.time-offsetUp））/2；

//小鸟的位移

for （let i=0； i<=2； i++） { //循环三只小鸟的位移

this.birdsY[i]=this.y[i]+offsetY；

}

this.time++；

⑺ 小鸟碰撞地板和铅笔的逻辑实现

创建isStrick（）方法来判断小鸟是否和铅笔撞击，首先画出小鸟和铅笔的边框模型，然后用if（）语句判断小鸟上下左右边框与铅笔上下左右边框是否有接触；创建check（）方法来判断小鸟是否撞击地板和铅笔，通过小鸟所在位置的y坐标与小鸟的高度之和是否大于地板的y坐标判断是否碰撞地板。关键代码如下：

static isStrike（bird， pencil） { //判断小鸟是否和铅笔撞击

let s=false；

if （bird.top>pencil.bottom ||

bird.bottom

bird.right

bird.left>pencil.right

） {

s=true；

}

return ！s；

}

check（） { //判断小鸟是否撞击地板和铅笔

if （birds.birdsY[0]+birds.birdsHeight[0]>=land.y） {

console.log（'撞击地板啦'）； //地板的撞击判断

this.isGameOver=true；

return；

}

if （Director.isStrike（birdsBorder， pencilBorder）） {

console.log（'撞到铅笔了啦'）；

this.isGameOver=true；

return；

}

}

⑻ 游戏开始按钮的逻辑实现

通过调用父类draw（）的方法实现当小鸟撞击地板或铅笔的时候，开始按钮出现，游戏重新开始。

⑼ 计分器的逻辑实现

加分逻辑是通过判断小鸟的x轴位置是否大于铅笔的右边界。如果大于，则表示越过铅笔，分数+1。其中用了wx.vibrateShort的API，实现了当小鸟穿越成功时手机将进行震动提醒。因为canvas刷新的很快，所以必须要用一个变量控制加分，方法是默认isScore为true，当小鸟穿过一组铅笔成功时，加一分，然后isScore变为false停止加分，等到第二次成功，再继续加分，以此类推。关键代码如下：

if （birds.birdsX[0]>pencils[0].x+pencils[0].width

&& score.isScore） {

wx.vibrateShort（{ //穿过铅笔时会进行震动的API

success： function （） { console.log（'穿过成功'）； }

}）；

score.isScore=false；

score.scoreNumber++； }

⑽ 创建背景音乐

用wx.createInnerAudioContext（）这个API接口实现，通过loop属性来实现背景音乐是是循环播放，用autoplay属性实现背景音乐是自动播放的，用src属性用于文件音频的链接。

⑾ 各种API的实现

在这个小游戏中采用了wx.getUserInfo（OBJECT）获取用户信息进行微信的登录或者设置的获取。用wx.login（）方法，可以获取用户登录信息。wx.getSetting（）传入回调对象，通过字符串打印出一些用户的配置信息，这些都是微信获取个人信息的API使用方法[5]。关键代码如下：

getUserInfo（） {

const params={

success： function （res） {console.log（res）；}

}；

wx.getUserInfo（params）；

}

login（） {

wx.login（{

success： function （res） {console.log（res）；}

}）；

}

getSettings（） {

wx.getSetting（{

success： function （res） {console.log（JSON

.stringify（res））；}

}）；

}

4 结束语

微信小程序的应用就目前而言是利大于弊的，并在互联网发展中也是社会需求的一种衍生品。虽然微信小程序踩着LAPP前路，但微信活跃用户群仍是微信小程序稳步前行的重要支柱。本文通过分析微信小程序发展中存在的问题和应用前景，设计和实现了FlappyBird微信小程序。未来，随着手机内存不断攀升，小程序“触手可及”的应用也将变为现实。

参考文献（References）：

[1] 劉琦，丁萍莉.基于微信小程序的互联网+教育学习平台的研

究与设计[J].内江科技，2016.37（12）：45-46

[2] 朱玉强.微信小程序在图书馆移动服务中的应用实践——以

排架游戏为例[J].图书馆论坛，2017.37（7）：132-138

[3] 张海龙.基于微信小程序的火警报警接警系统设计[J].武警

学院学报，2017.33（6）：23-26

[4] 陈琦.基于Webpy+Apache HTTP Server的微信小程序架

构搭建研究[J].无线互联科技，2017.18：50-51

[5] 宋丹丹.基于微信小程序的美食点餐推荐系统的设计与实现[J].

信息通信，2017.12：89-90