0基础开发小程序游戏

从2017年1月微信小程序正式发布算起,到今天差不多过去了一年半。

更有人戏称小程序是互联网的第五大发明。由于微信自身的流量庞大,所以很多开发者看好小程序。而小程序之所以这么火,是因为其自身的引流模式和盈利模式,毕竟老板都喜欢既会技术、又知道如何将技术变现的开发人员。

1

什么是小程序

小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用 。

2

开发一个小程序

了解完小程序到底是什么,接下来是本文的重点 。没接触过小程序编程的,都看过来 。这一部分将从零开始开发一款微信小程序,功能很简单,是一个猜拳游戏。单击“开始”按钮后,会快速切换“锤子”、“剪刀”和“布”,直到按“停止”按钮,会显示“锤子”、“剪刀”和“布”中的一个,该游戏可以双方或多方进行,猜拳的规则就不多说了,大家都清楚。

3

搭建开发环境

腾讯推出微信小程序的同时,也推出了自己的开发工具,开发工具的最新版本下载地址:

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1477656486010

本文主要使用 Mac OS X 版本进行讲解,Windows 版本和 Mac OS X 大同小异,并不影响学习。运行微信小程序 IDE 后,会看到如下图所示的窗口:

单击“小程序项目”按钮,会显示下图的小程序项目管理页面:

新创建小程序项目,需要单击右下角的加号按钮,会弹出如下图所示的页面,选择一个空的项目目录,然后输入 AppID,如果不输入 AppID,无法在真机上发布,最后输入项目名称。

一切都搞定后,单击“确定”按钮创建小程序项目,主界面如下图所示:

第一个小程序已经可以运行了,是不是很简单!

4

介绍一下猜拳游戏布局

单击如下图所示的 index.wxml 文件,输入布局代码,wxml 文件是小程序中的布局文件,用于描述小程序中的 UI。

下面先看一下猜拳游戏的主界面,如下图所示:

猜拳游戏的布局是纵向显示了三个组件:文本组件(text)、图像组件(image)和按钮组件(button)。在创建小程序工程时,默认建立了两个页面:index 和 logs。我们不需要管 logs,在这个例子中只修改和 index 页面相关的文件,index 是小程序第一个显示的页面,其中 index.wxml 文件是 index 页面的布局文件,现在打开该文件,并按下面的内容修改代码。

在这段代码中,image 和 button 组件的内容都需要动态改变,所以 image 组件的 src 属性和 button 组件的文本值(夹在 <button> 和 </button> 之间的部分)都分别于一个变量绑定,这是小程序的一个重要特性(和 React Native 完全相同)。

我们发现,就算按前面的布局,仍然不能像上图所示那样摆放组件,这是因为还需要将下面代码调整一下样式(index.wxss 文件)。

前面的布局代码主要调整了 userinfo-avatar 的宽度和高度,让图像显示得更大一些。最后,还需要修改一下 app.wxss 文件的代码,将 padding 属性的值改成 50 rpx 0,代码如下:

现在可能仍然无法显示图像,因为 imagePath 变量还没有设置,而且图像还没有放到工程目录。可以找三张剪子、石头和布的图片,在小程序工程根目录建立一个 images 目录,将这三个图像文件放到该目录中。

5

控制剪子、石头、布的快速切换

猜拳游戏的核心就是快速切换剪子、石头、布三个图像,当单击“停止”按钮后,会停到其中一个图像上,这里涉及到如下两个动作:

  • 用定时器快速切换图像。
  • 图像下方的按钮,当一开始单击时,文本变成了“停止”,当再次单击该按钮后,按钮文本又变成了“开始”,即一个按钮同时负责开始和停止图像快速切换两个动作。

控制图像快速切换和按钮文本变化两个动作的代码都要写在 index.js 文件中。首先将这三个图像文件名存储在一个全局的数组中,并使用定时器快速从这个数组中依次循环获取图像文件名,并将该文件名指定的图像显示到 image 组件中,修改按钮的文本只需要修改 title 变量即可。

这里涉及到两个主要变量:imagePath 和 title,这两个都定义在 data 对象中,单击按钮会执行 guess 函数(在 index.wxml 文件中使用 bindtap 属性指定按钮的单击事件函数名),该函数也需要在 index.js 中编写,完整的实现代码如下:

现在可以通过左侧的模拟器来测试成果了。单击“开始”按钮,看图像是否会快速切换,再单击“停止”按钮,看是否会停止在某个图像上。

6

真机测试小程序

如果只想在真机上测试,用管理员微信登录小程序 IDE 都可以,单击 IDE 工具栏中的“预览”按钮,会弹出一个带二维码的页面,如下图所示。用管理员的账号登录手机微信,扫描该二维码,猜拳游戏就会在手机上运行。

在真机上的测试效果如下图所示:

7

真机调试小程序

如果在模拟器上开发小程序,很容易在 Console 中查看调试信息,但如果在真机上运行呢?其实也有办法查看调试信息。现在按着前面讲解步骤在真机上运行小程序,然后点击右上角的省略号(…)菜单,会弹出如下图所示的菜单。

点击“打开调试”菜单项,这时当前小程序需要关闭,然后重新进入,此时会看到右下角有一个绿色的 vConsole 按钮,如下图所示。

点击 vConsole 按钮,就会显示打开真机上的 Console,并显示调试信息,如下图所示,关闭 Console,用同样的操作即可。

8

上传和审核小程序

如果觉得在真机上测试没问题,那么可以单击工具条上的“上传”按钮将小程序上传到腾讯的服务器,单击“上传”按钮后,也会显示一个如下图所示的窗口,输入版本号和描述,单击“上传”按钮,即可上传到腾讯服务器。

成功上传小程序后,回到小程序的后台,点击左侧的“开发管理”选项,会看到如下图所示的三个小程序版本的管理页面。我们直接上传的是开发版本,如果管理员认为没问题,可以单击“提交审核”按钮,会将小程序提交给腾讯,这就是审核版本,如果腾讯审核通过,就正式上线了,这就是线上版本。

9

总结

本文用一个完整的例子从头到尾演示了从开发小程序,到真机测试,再到上传发布的完整过程。尽管提供的例子非常简单,但足以清楚地展示了小程序开发的完整过程,不过,要想开发牛逼的小程序,还需要有系统的课程,这样学起来一定会更加轻松

原文发布于微信公众号 - GitChat精品课(CSDN_Tech)

原文发表时间:2018-09-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python爬虫与算法进阶

如何在电脑上多开微信?(windows)

新媒体管家 在电脑上多开微信,在工作中很常见,今天来介绍一种简单的方法。(windows下) 这个问题在百度和知乎上都有许多回答,很多都是:长按Enter 电脑...

45380
来自专栏一枝花算不算浪漫

[Java面试十]浏览器跨域问题.

488190
来自专栏张戈的专栏

DX-watermark插件无法预览及上传图片报imagesx()错误的解决办法

本文重新更新编辑于:2014 年 6 月 8 日 0 时 40 分. 这篇文章还是在 2014 年 2 月 12 日发布的,旧标题为:《不明问题让我折腾了一天!...

38960
来自专栏Seebug漏洞平台

危险的 target="_blank" 与“opener”

原文:http://mp.weixin.qq.com/s/T4jQUdS-rar7hr2EWilJrw

43070
来自专栏企鹅号快讯

JavaScript 性能优化技巧分享

英文: Ivan Čurić 译文:葡萄城控件 http://www.cnblogs.com/powertoolsteam/p/javascript-per...

380150
来自专栏知晓程序

开发 | 简单易上手,资讯类小程序开发实战指南

今天,知晓程序(微信号 zxcx0101)将通过一个简单的电影资讯小程序,来看看在知晓云内容库功能的帮助下,如何将内容资讯类小程序的开发效率提高 60%。

16510
来自专栏Python专栏

用Python给程序加个进度条

42030
来自专栏jessetalks

初识WEB:输入URL之后的故事

概述   为什么输入www.cnblogs.com之后敲一个回车,浏览器就会显示我们所看到的内容?这家伙在背后到底偷偷的干了哪些事情?今天我们就来挖掘一下这背...

36670
来自专栏蔡述雄的专栏

包学会之浅入浅出Vue.js:开学篇

Vue 是国人写的,技术文档也妥妥的是中文,想到这我就有学习的动力。

51K690
来自专栏魏艾斯博客www.vpsss.net

国外免费 Linux 面板-VestaCP 安装及建站教程

1K20

扫码关注云+社区

领取腾讯云代金券