用微信小程序做H5游戏尝试

简介:

 微信小程序发布后,公司虽然没有拿到第一批内测资格,但作为微信亲密合作伙伴,一定要第一时间去尝试啦。现在微信小程序刚发布还在测试阶段,可以说是1.0版本,所以框架和结构内容都还不多,相关的文档跟微信API一样都做得很好。

 

  1)微信小程序到底是什么?跟H5,HTML5是不是一样?

    它可以把应用功能快速嵌入到微信公众号中,用户无需安装应用就能访问。相比现在的app开发和发布都容易很多。

               微信小程序本质上就是Html5,或者说是一种优化过之后的Html5。不过在编码方式跟HTML5还是有很多不同的地方,但是其内核还是大量使用HTML5的相关技术,有H5经验的前端会更容易的掌握上手。

               关于让让小程序在个完整支持HTML5标准的浏览器上运行起来,有兴趣的同学具体可以参见让你的微信小程序运行在Chrome浏览器上

  2)开发者入门学习

    1.首先去下载安装微信Web开发者工具,很贴心的支持Mac,并且教程的截图都是Mac的哦~~

                 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

                  

    2.打开开发者工具后,(网络慢的二维码可能加载很久)扫二维码后可以添加项目或导入项目,appid不会公众号的,没有内测邀请的可以不填,输入项目名称比如:HelloWorld,选择项目保存地址的时候选择一个新创建的空文件夹,如果勾选在当前目录创建 quick start项目, 它就会帮我们创建一个简易的小程序demo,方便我们学习理解

 

    3.点击开发者工具左侧导航的“编辑”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。在项目文件夹下看到了三个特别的文件app.js、app.json、app.wxss,其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。这三个文件是一个项目必不可少的文件,删除任意一个文件项目都会运行不了。

      app.js: 小程序运行主要逻辑及入口,里面使用App()函数来注册一个小程序,普通页面的js文件中可以通过 getApp()函数拿到App()函数所拥有的参数,并调用其中的数据。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。想了解更多可用 API,可参考 API 文档

      app.json: 是小程序的全局配置文件。可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考配置详解。每一个小程序加载的页面,包括四个部分[js、json、wxml、wxss])都要在 pages数组中声明后才能访问, window对象中可以设置窗口的样式颜色等。

      app.wxss: 是一个公共的样式文件,整个项目的每个页面都可以调用,我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则,就如一个全局的css文件。

 

    4.在左边菜单栏中选择“编辑”,可以查看我们这个项目的文件和结构,从文件结构中我们可以看到文件类型有4种:

      .js : 这就是一个JavaScript文件,只不过它是微信基于javascript封装过的,所以很多js函数是不能使用的,比如localhost.href,微信加入了很多自身的接口,比如跳转页面是: wx.navigationTo()函数。例如index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

      .json : 是页面的配置文件,可以配置页面头部title信息等,页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。

      .wxml : 视图结构文件,功能就像html文件差不多,用于描述页面结构,只不过它有自己独特的标签,不使用html标签。微信对wxml的全称定义也不是weixin xml,而是WeiXin MarkupLanguage,很霸气的要自成体系感。自然wxss也是WeiXin Style Sheets,一样的希望给人牛逼哄哄的感觉。

      .wxss : 视图样式文件,格式跟css文件一样,他在css的基础上扩展了几个特性 比如:尺寸单位 / 样式导入

 

    5: 项目运行过程:

      第一步:加载项目根目录下的 app.js、 app.json、 app.wxss文件,同时会执行app.js文件,并触发其中的onLaunch 和 onShow 函数

      第二步:加载app.json中pages数组中配置的第一个页面,作为项目的欢迎页,同时会执行对应页面js文件,并触发 onLoad / onReady 和 onShow 函数

      往后:页面可以通过事件与js文件交互,比如 在标签元素上绑定点击事件,并且指向js文件中的一个函数,就能用js中的逻辑去处理这个事件了

 

             3)提出几个问题

                1.移动网站或WebApp能直接改造成小程序

                  其实,之所以会保留这个认识,主要是由于过去微信公众号的二次开发经验,很大程度上给到了我们很多人先入为主的观念。

                 但通过我们上面所分析的第一个问题,可以知道微信小程序本质上就是Html5,但实际上却是一种优化过之后的Html5,这也就意味着绝大多数的移动网站或WebApp直接改造成小程序的难度很大,因为里面有大量的内容需要重写。小程序是相当于重新做了一个App,从开发、设计、测试、运维升级都是单独的一套。哦,你还得加个学习成本和风险,如此新的东西一次搞利索的可能性还真不好说,毕竟小程序现在自己也还是在测试阶段。

              2.微信小程序能不能做H5小游戏

                现阶段看来不行,不过可以做一些轻量的推广用得小游戏功能,一切还要看后面正式版的发布。

 

最后把微信官方的文档放在这里

https://mp.weixin.qq.com/debug/wxadoc/dev/

各位看官也可以看看我们的作品案例 H5游戏开发案例


本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/p/6007642.html,如需转载请自行联系原作者

相关文章
|
7月前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?
|
7月前
|
移动开发 小程序 JavaScript
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
693 0
|
24天前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
49 3
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
320 3
|
2月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
47 2
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的游戏账号交易微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的游戏账号交易微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
移动开发 小程序 前端开发
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
134 0
|
7月前
|
JavaScript Java 测试技术
游戏账号交易微信小程序+ssm+vue.js附带文章和源代码设计说明文档ppt
游戏账号交易微信小程序+ssm+vue.js附带文章和源代码设计说明文档ppt
55 1
|
7月前
|
小程序 JavaScript Java
基于微信小程序的游戏账号交易微信小程序的设计与实现(源码+lw+部署文档+讲解等)
基于微信小程序的游戏账号交易微信小程序的设计与实现(源码+lw+部署文档+讲解等)
|
7月前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
1191 1