微信开发者工具创建小游戏模板_微信开发者工具+ vs.net开发微信小程序 - CSDN
精华内容
参与话题
  •  有了《微信小游戏 - 理论介绍 - 账号注册 - 开发前准备》小程序帐号之后,需要一个开发工具来进行开发小程序/游戏。前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装。有关开发者工具更...

    安装开发工具

         有了《微信小游戏 - 理论介绍 - 账号注册 - 开发前准备》小程序帐号之后,需要一个开发工具来进行开发小程序/游戏。前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装。有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。

         最新版本下载地址 (1.02.1810250):Windows 64位 / Windows 32位 / Mac OS

    Windows 仅支持 Windows 7 及以上版本。

         安装非常简单,与普通软件安装一致,安装完成后如下所示:

          微信小游戏-全套视频-文档-源码-教程 下载。

    第一个小游戏

         小游戏官方开发文档:https://developers.weixin.qq.com/minigame/dev/index.html?t=18110719

         安装成功后,双击图标运行 “微信开发者工具” ,如下左图所示,需要管理员或者其它具有开发者权限的微信用户使用微信扫码登录。登录之后如下右图所示,选择 “小程序项目”。

    接着点击如下左图所示的“+”号新建项目:

    项目目录:需要选择一个空目录,或者选择的非空目录下存在 app.json 或者 project.config.json。当选择空目录时,可以选择是否在该目录下生成一个简单的项目。如上所示 E:\tencent\yy2048 是一个空目录,yy2048 目录会作为一个项目目录。

    AppID:如果已经成功注册了小程序(游戏)账号,则可以在 “设置-开发设置”,获取 AppID 信息;也可以前往 小游戏注册 通过注册小游戏帐号来获得 AppId;也可以如图所示选择申请使用测试号

    项目名称:建议与“项目目录”最后一级目录名称相同即可,也可以自己重新定义。

    建立游戏快速启动模板:如果勾选此项,则应用新建之后会自带微信默认的 Demo  小游戏—打飞机。不勾选则会新建一个空项目。

    点击“确定”按钮之后,如下所示应用创建成功:

    1)点击顶部菜单 “编译” 就可以在 IDE 中预览小游戏:

    2)点击工具上的 "编译" 按钮,可以在工具的左侧模拟器界面看到这个小游戏的表现。点击 "预览" 按钮,通过微信的扫一扫在手机上可以真机体验小游戏。

    应用文件结构

    小游戏只有以下两个必要文件:

    ├── game.js —— 小游戏入口文件
    └── game.json —— 配置文件,小游戏开发者通过在根目录编写一个 game.json 文件进行配置,详情请参见小游戏配置文档


    1)代码包大小限制:每个小游戏允许上传的代码包总大小为 4MB。

    2)wx API:只能使用 JavaScript 来编写小游戏,小游戏的运行环境是一个绑定了一些方法的 JavaScript VM。不同于浏览器,这个运行环境没有 BOM 和 DOM API,只有 wx API。接下来将介绍如何用 wx API 来完成创建画布、绘制图形、显示图片以及响应用户交互等基础功能。

    3)从 js 文件内容可以看出:微信小游戏默认采用 ECMA Script 6(简称ES6)JavaScript 版本进行编写。虽然使用 ES 5 版本的 JavaScript 编写也能正常运行,但是不推荐。建议采用 ES 6 风格进行编码。ES 5 面向过程编程,ES 6 面向对象编程!

     

    展开全文
  • 微信小游戏开发(1)

    2019-06-10 17:40:01
    二、创建小游戏项目 1、打开微信开发者工具,选择小程序项目。 2、此时需要输入三项内容:项目目录、APPID、项目名称。 其中,项目目录是你在本地存放项目代码的文件夹。 APPID是小程序游戏对应的APPID。 如果有填...

    一、安装开发工具

    前往开发者工具下载页面,网址:developers.weixin.qq.com/minigame/de…

    二、创建小游戏项目

    1、打开微信开发者工具,选择小程序项目。

    2、此时需要输入三项内容:项目目录、APPID、项目名称。

    其中,项目目录是你在本地存放项目代码的文件夹。

    APPID是小程序游戏对应的APPID。

    如果有填入即可。

    如果没有,您可以选择APPID输入框下方的注册前去注册,

    也可以选择使用测试账号-小游戏。

    项目名称是你在本地为此小游戏取得一个名字,便于识别。

    在本教程中,我们暂时选择使用测试账号-小游戏。同时填好第一项和第三项。

    此时会出现一个选项:建立游戏快速启动模板。我们将其选中即可。

    点击确定之后,我们就看到了如下界面:

    此时我们便快速创建了一个小程序。

    下一节我们将为大家介绍小程序的文件目录结构。

    学习是一条令人时而喜极而泣,时而郁郁寡欢的道路。如果您觉得这篇文章对您有所帮助,请您酌情赞赏!

    展开全文
  • 程序的前端开发是基于微信端微信开发者工具实现的。 废话不多说直接上步骤 : 第一步 : 打开微信开发者工具 第二步 :用自己绑定微信程序的微信扫描,,扫描过后就会出现以下界面 此时 我们 最后点击创建...

    小程序的前端开发是基于微信端微信开发者工具实现的。

    废话不多说直接上步骤 :

    第一步 : 打开微信开发者工具

    第二步 :用自己绑定微信小程序的微信扫描,,扫描过后就会出现以下界面

    此时 我们

    最后点击创建,我们就可以创建微信小程序开发的基本模本了。

    展开全文
  • 微信开发者工具使用教程 如何上传、发布、审核等 2020年3月31日录 - 微信开发者工具使用教程 01-微信开发者工具的下载和安装 02-微信程序账号的注册、登录、appid的获取 03-微信程序开发和公众号开发模式的切换 ...
  • 微信小游戏基础讲解 微信开发工具

    千次阅读 2018-07-24 18:40:56
    快速上手安装开发工具 前往 开发者工具下载... 给你的项目起一个好听的名字,最后,勾选“建立游戏快速启动模板”(注意:你要选择一个空的目录才会有这个选项),点击确定,你就得到了你的第一个小游戏了。 ...

    快速上手安装开发工具

    前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装。

     

    你的第一个小游戏

    新建项目选择小程序项目,选择代码存放的硬盘路径。 目前小游戏不提供公开注册,可点击体验小游戏使用无 AppID 模式。 给你的项目起一个好听的名字,最后,勾选“建立游戏快速启动模板”(注意:你要选择一个空的目录才会有这个选项),点击确定,你就得到了你的第一个小游戏了。

     

    点击顶部菜单编译就可以在 IDE 预览你的第一个小游戏。

     


    真机预览

    点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小游戏的表现。点击预览按钮,通过微信的扫一扫在手机上体验你的第一个小游戏。

     

     

    文件结构

    小游戏只有以下两个必要文件:

    • game.js 小游戏入口文件
    • game.json 配置文件


    配置

    小游戏开发者通过在根目录编写一个 game.json 文件进行配置,开发者工具和客户端需要读取这个配置,完成相关界面渲染和属性设置。

     

     

    deviceOrientation

     


    示例配置

    [JavaScript] 纯文本查看 复制代码

    ?

    1

    2

    3

    4

    5

    6

    7

    8

    9

    {

        "deviceOrientation": "portrait",

        "networkTimeout": {

            "request": 5000,

            "connectSocket": 5000,

            "uploadFile": 5000,

            "downloadFile": 5000

        }

    }

    wx API

     

    你只能使用 JavaScript 来编写小游戏。小游戏的运行环境是一个 绑定了一些方法的 JavaScript VM。不同于浏览器,这个运行环境没有 BOM 和 DOM API,只有 wx API。接下来我们将介绍如何用 wx API 来完成创建画布、绘制图形、显示图片以及响应用户交互等基础功能。

     

    创建 Canvas

    调用 wx.createCanvas() 接口,可以创建一个 Canvas 对象。

    [JavaScript] 纯文本查看 复制代码

    ?

    1

    var canvas = wx.createCanvas()

    此时创建的 canvas 已经显示在了屏幕上,且与屏幕等宽等高。

    [JavaScript] 纯文本查看 复制代码

    ?

    1

    console.log(canvas.width, canvas.height)

    但是由于没有在 canvas 上进行绘制,所以 canvas 是透明的。使用 2d 渲染上下文的进行简单的绘制,可以在屏幕左上角看到一个 100x100 的红色矩形。

    [JavaScript] 纯文本查看 复制代码

    ?

    1

    2

    3

    var context = canvas.getContext('2d')

    context.fillStyle = 'red'

    context.fillRect(0, 0, 100, 100)

    通过 Canvas.getContext() 方法可以获取 2d 或 WebGL 渲染上下文 RenderingContext,调用渲染上下文的绘制方法可以在 Canvas 上进行绘制。小游戏基本上支持 2d 和 WebGL 1.0 所有的属性和方法,详情请见 RenderingContext。由于使用 WebGL 的绘制过程较为复杂,所以本文中的示例代码都以 2d 渲染上下文的绘制方法编写。

    通过设置 width 和 height 属性可以改变 Canvas 对象的宽高,但这也会导致 Canvas 内容的清空和渲染上下文的重置。

    [JavaScript] 纯文本查看 复制代码

    ?

    1

    2

    canvas.width = 300

    canvas.height = 300

     

    显示图片

    通过 wx.createImage() 接口,可以创建一个 Image 对象。Image 对象可以加载图片。当 Image 对象被绘制到 Canvas 上时,图片才会显示在屏幕上。

    [JavaScript] 纯文本查看 复制代码

    ?

    1

    var image = wx.createImage()

    设置 Image 对象的 src 属性可以加载一张本地图片或网络图片,当图片加载完毕时会执行注册的 onload 回调函数,此时可以将 Image 对象绘制到 Canvas 上。

    [JavaScript] 纯文本查看 复制代码

    ?

    1

    2

    3

    4

    5

    image.onload = function () {

        console.log(image.width, image.height)

        context.drawImage(image, 0, 0)

    }

    image.src = 'logo.png'

     

    创建多个 Canvas

    在整个小游戏运行期间,首次调用 wx.createCanvas 接口创建的是一个上屏 Canvas。在这个 canvas 上绘制的内容都将显示在屏幕上。而第二次、第三次等后几次调用 wx.createCanvas 创建的都会是离屏 Canvas。在离屏 Canvas 上绘制的内容仅仅只是绘制到了这个离屏 Canvas 上,并不会显示在屏幕上。

    以如下代码为例,运行后会发现屏幕上并没有在 (0, 0) 的位置显示 100x100 的红色矩形。因为我们是在一个离屏的 Canvas 绘制的。

    [JavaScript] 纯文本查看 复制代码

    ?

    1

    2

    3

    4

    5

    var screenCanvas = wx.createCanvas()

    var offScreenCanvas = wx.createCanvas()

    var offContext = offScreenCanvas.getContext('2d')

    offContext.fillStyle = 'red'

    offContext.fillRect(0, 0, 100, 100)

    为了让这个红色矩形显示在屏幕上,我们需要把离屏的 offScreenCanvas 绘制到上屏的 screenCanvas 上。

    [JavaScript] 纯文本查看 复制代码

    ?

    1

    2

    var screenContext = screenCanvas.getContext('2d')

    screenContext.drawImage(offScreenCanvas, 0, 0)

     

    动画

    在 JavaScript 中,一般通过 setInterval/setTimeout/requestAnimationFrame 来实现动画效果。小游戏对这些 API 提供了支持:

    另外,还可以通过 wx.setPreferredFramesPerSecond() 修改执行 requestAnimationFrame 回调函数的频率,以降低性能消耗。


    触摸事件

    响应用户与屏幕的交互是游戏中必不可少的部分,小游戏参照 DOM 中的 TouchEvent 提供了以下监听触摸事件的 API:

    [JavaScript] 纯文本查看 复制代码

    ?

    01

    02

    03

    04

    05

    06

    07

    08

    09

    10

    11

    12

    13

    14

    wx.onTouchStart(function (e) {

        console.log(e.touches)

    })

     

    wx.onTouchMove(function (e) {

        console.log(e.touches)

    })

     

    wx.onTouchEnd(function (e) {

        console.log(e.touches)

    })

     

    wx.onTouchCancel(function (e) {

        console.log(e.touches)

    微信小游戏交流群1:556388934

    微信小游戏交流群2:556390305

     

    展开全文
  • 微信小程序创建一个空白页面

    千次阅读 2018-06-05 13:41:42
    程序创建一个空白页面还是比较简单的。pages文件夹下就是一个个页面组件想要新增页面组件则找到app.json里面的pages数组,然后添加一组数据即可得到一个页面组件了。然后就会生成一堆文件,在里面就可以编写代码了...
  • F 修复 将小游戏项目的 appid 直接修改成小程序的 appid 会导致模拟器消失的问题 F 修复 Page 实例上 getOpenerEventChannel 方法丢失的问题 反馈详情 F 修复 小程序插件开发时,修改插件的 json 文件无法生效的...
  • 微信小程序开发工具使用简介

    千次阅读 2019-04-30 00:58:17
    为了帮助开发者简单和高效地开发和调试微信程序,我们在原有的公众号网页调试工具的基础上,推出了全新的微信开发者工具,集成了公众号网页调试和程序调试两种开发模式。 使用公众号网页调试,开发者可以调试...
  • 随着H5开发的普及,使用Egret开发小游戏也变得更加方便。... 首先是选择创建一个Egret 游戏项目(顺便提一下,Egret并不是所有引擎版本都支持小游戏开发,所以最好是将引擎升级至最新版本,我这里用的是...
  • 什么是微信小游戏?看前几天的科技新闻,微信中的“跳一跳”小游戏从去年12月发布,截至到今年3月份已经积累了3.9亿玩家,这是一个多么恐怖的数字,“跳一跳”游戏带火了整个微信小游戏开发圈。微信小游戏是个什么...
  • 开发者使用登记为开发者的微信登陆微信开发者工具 开发者点击右上角上传按钮上传代码 上传完成后在微信公众平台就可以看到新上传的版本,同时可以在最右侧下拉按钮中设置体验版本 点击提交审核即可提交审核 审核...
  • 微信小程序模板欢迎下载。。。。。。。。。。。。。。。
  • 微信开发者文档

    2019-01-12 10:54:37
    用户在关注与取消关注公众号时,微信会把这个事件推送到开发者填写的URL。方便开发者给用户下发欢迎消息或者做帐号的解绑。 微信服务器在五秒内收不到响应会断掉连接,并且重新发起请求,总...
  • 微信小游戏所需的《游戏自审自查报告》文档模板,非个人主体《游戏自审自查报告》需盖公司公章,个人主体需签署个人签名。
  • 第一次打开Cocos Creator界面,就感觉,这很Unity啊,虽然有不少地方还没有完善,但是对于开发小游戏这样轻量级的游戏是够用的了,所以用过Unity的同学上手会特别快。这个教程也会照顾没用过Unity的新手,所以,放心...
  • 一段用Cocos开发微信小游戏的经历

    千次阅读 2020-06-25 17:27:33
    本篇blog是我的第一篇csdn的bolg,并没有很多的干货,主要记录的是一个游戏小白最近从零开发一个小游戏的艰难过程中的一点心得体会,所以读到这篇文章的你请不要对里边的的技术质量抱有任何过高的期待,如果你们对我...
  • 文章目录一、场景构造three.js基础微信小游戏中使用three静止的场景动画渲染二、轮盘控制创建UI部分轮盘控制 效果: 一、场景构造 three.js基础 如果是刚接触3D引擎,关于three....使用微信开发者工具创建新的小游...
  • 微信小游戏开发之一:相关

    千次阅读 2017-12-29 14:21:37
    一、简介 ...在 微信开发者工具下载地址 中下载开发工具并安装 三、新建工程 当前微官方并没有开放小游戏Appid,故选择体验 点击确定,即可看到游戏模板 目录结构如下:
  • 微信小程序》微信小程序开发实例

    千次阅读 多人点赞 2018-09-09 10:37:19
    WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 shitoujiandaobu 程序:石头剪刀布(附代码说明) audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹...
  • 微信公众号开发之发送模板消息

    万次阅读 多人点赞 2018-11-10 13:06:36
    在我们做微信公众号开发时,发送模板消息往往是必不可少的功能。今天我们就来说说吧! 1、申请模板消息 首先我们应该知道,模板消息是需要申请的。这个申请就其本身来说是很easy的(我前一天晚上申请的,显示需要2...
1 2 3 4 5 ... 20
收藏数 3,209
精华内容 1,283
关键字:

微信开发者工具创建小游戏模板