微信小程序写2048小游戏
发布于 8 年前 作者 zouzhenxing 20275 次浏览 来自 分享

为了证明我也能跟得上潮流 为了证明我也能跟得上潮流,我也试了一下微信小程序,看了一官方的文档,觉得还是挺有意思的。感觉思想和代码风格有点跟Angular有点类似,废话少说,下面开始写。 编写步骤 1、下载开发工具 小程序开发工具官方下载 2、创建项目 扫码后进入 untitled1.png 选择添加项目 untitled2.png 选择无AppID,也可以开发,但不能在手机上浏览。等以后开放后再搞吧。后面的操作官方教程上面都有了,我主要分享写代码经验。 3、修改项目 创建一个代码示例项目,如图 untitled3.png 删除logs文件夹,只保留index文件夹,注意删除logs后,要更自以为是app.json untitled4.png

{
  "pages":[
    "pages/index/index"//注意删除原来的logs
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTextStyle":"white",
    "navigationBarTitleText":"2048小游戏"
  }
}

这样一个基于的项目架子就搭好了 4、编写代码 代码我已写了一个简单的, GIT 2048小程序喜欢给个start 效果图如下: untitled5.png 5、开发中遇到的一些问题 1、没有滑动事件,又不能引入其它JS库,只能自己写一个,还好比较简单。主要利用touchstart、touchmove、touchend三个事件来解决这个问题 2、不能直接更新page.data中的数据,要使用this.setData这个函数,才能让页面重新渲染。其中最麻烦的更改data中的数组。

changeData : function( index,num ) {
    var changedData = {};
    changedData['mydata[' + index + ']'] = num;

    this.setData(changedData);
  }

这个一开始还不知道后面看文档才明白 3、动画处理 在H5中直接更改Dom加样式就行了,在小程序中要使用animation这个类,在一开始写代码时没考虑到动画问题,所以数组结构出了点问题,所以动画做得不好。

//初始化动画
    this.data.animation = wx.createAnimation({
        duration: 100,
        timingFunction: 'ease',
    });
    this.data.animation.scale(1.2,1.2).step().scale(1,1).step();

//渲染时
<lable class="item d{{item}}" wx:for="{{mydata}}" animation="{{ index == animationindex ? animation : '' }}">
    {{item ? item : ''}}
  </lable>

总结 1、没什么觉得特别,跟使用HBuild、Ionic等混合式开发差不太多。 2、不能引用其它库是一个特点的地方,让我又找到了写原生JS代码的乐趣。 3、路由、动画队列、渲染指令、数据绑订机制等,跟主流框架一至,原来会的,很快就能学会。我就看了一个下午。

回到顶部