专栏首页CSDN技术头条0基础开发小程序游戏

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)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 开源神器,无需一行代码就能搞定机器学习,不会数学也能上手

    作者丨Shantanu Kumar 翻译丨魏伟 对于机器学习和数据科学的初学者来说,最大的挑战之一是需要同时学习太多知识,特别是如果你不知道如何编码。你需要快速...

    CSDN技术头条
  • 2016年人工智能技术进展大盘点

    如果说2015年大家还在质疑深度学习、人工智能,认为这是又一轮泡沫的开始,那么2016年可以说是人工智能全面影响人们生活的一年。从AlphaGo到无人驾驶,从美...

    CSDN技术头条
  • 小程序开发:腾讯、阿里、百度、头条都在抢!

    最早小程序在微信平台上成名,手握 10 亿月活用户的微信,很快成为小程序创业者的掘金之地。巨头的嗅觉敏锐,支付宝、百度随即跟进,今日头条也开始内测小程序,几大平...

    CSDN技术头条
  • 吸粉新玩法,小程序这样引流太厉害!

    今年上半年网络最热的词非小程序莫属了!一时间,引爆网络,连“小程序”的百度搜索指数也蹭蹭蹭地网上飙升。 随着微信小程序功能的不断更新,小程序的生态也在慢慢地揭开...

    企鹅号小编
  • 小程序的新功能你知道吗

    “为了帮助用户更便捷地使用小程序,微信在主界面新增了小程序任务栏的功能。小程序菜单进行了升级,并提供小程序间快速切换的功能。同时,开放了小游戏开发文档和开发者工...

    企鹅号小编
  • 使用微信附近小程序优势 腾讯小程序怎么开发在哪里开发小程序

    这就是我们常说的附近小程序,打开微信小程序,第一列就是附近小程序,随着越来越多的商家发现并开放了小程序,附近小程序栏目的数量逐日增多。

    微信小程序开发加盟服务商
  • 小程序如何运营?小程序让业绩翻番的四大点!

    作为一个运营者或者商家来说,我们应该要怎么去运营小程序?其实小程序的运营核心包括四个方面:推广、留存、分享、唤醒,下面依次做解答。

    用户1745481
  • 小程序如何运营?小程序让业绩翻番的四大点!

    作为一个运营者或者商家来说,我们应该要怎么去运营小程序?其实小程序的运营核心包括四个方面:推广、留存、分享、唤醒,下面依次做解答。

    用户1745481
  • 小程序开放微信群ID API,可获取群名称 提供个性化服务

    微信方面宣布,小程序向开发者开放了群ID的接口能力。简单地说,就是当你把小程序分享在群聊中,被点击后开发者可获取群ID和群名称,也方便更好地针对群场景提供个性化...

    BestSDK
  • 实体商家缺少技术不懂编程自己能做微信小程序吗?

    小程序的诞生给创业者带来了太多的创业机会,对于创业者来说如何拿下这个大市场。最好的选择就是做小程序服务商,这也是目前小程序最为盈利的模式之一。目前来说小程序已经...

    速成应用小程序开发平台

扫码关注云+社区

领取腾讯云代金券