写在前面

微信小程序开发跟前端网页开发流程类似，它是基于微信的架构下，所以须使用专门的环境。即便如此，还是有很多的问题。

前置准备

  1. 首先需要到官网注册一个小程序账号，之后一路填写相关信息。注意！在选择小程序类别的时候，第一类别如果选的游戏，那么只能进行小游戏开发；选择其他类别，才可以进行普通小程序开发。

  2. 注册完成后，可看到如下页面01

  3. 在-开发-开发设置目录下，可以看到自己已经创建好的小程序ID，小程序秘钥

  4. 接下来根据系统类型在官网下载开发环境

  5. 配置好后进入，会要求填写之前生成的小程序ID，填写完毕后即可进入开发界面

文件结构

  1. 在环境内，可以看到类似如下的文件结构

02

其中

  • /images 目录为自定义的文件夹，用于存放图片
  • /pages 目录用于存放页面文件
  • /utils 目录用于存放工具文件
  • /app.js 存放页面初识的状态，一般为登录状态
  • /app.json 存放所有的页面路径
  • /app.wxss 存放总页面样式文件，类比css文件

开发准备

  1. 在开发环境内可以看到一个默认生成的页面，功能是点击获取头像。在第一次开发时，可以将 /util文件全部删除，将/pages目录下的logs文件全部删除，将index.wxml，index.wxss，index.js中全部代码删除

  2. 在index.js中输入page 通过tab补全page页面函数

    03

  3. 此时的一个页面文件结构如下所示

    04

  4. 此时一个index文件夹表示一个页面的全部逻辑，同理，可以创建多个文件，生成多个文件夹

  5. wxml文件以及wxss文件分别对应html和css文件

  6. 每创建一个新的页面，需要在app.json中声明路径，否则会有报错

    05

    如图所示，第一个页面路径表示初始页面，也就是主页面；后面的路径表示其他自定义的页面

  7. 若想要实现各个页面之间的跳转逻辑，可在主页面的js文件中自定义跳转函数（官方类库 wx.navigateto），当遇到跳转事件时就可以以完成跳转

    06

    如图所示，此函数表示遇到事件执行时跳转到url对应路径下

遇到的问题

  1. 第一次接触时，结合网上代码想要实现一个贪吃蛇小程序，结果在调试端正常执行，在手机端无法正常运行。原因是微信原则上不允许开发者在小程序上开发游戏，所以进行了限制，如贪吃蛇中用到的页面刷新逻辑在手机端被加以了限制。
  2. 微信小程序在打包上传时有大小限制，2M，所以如果文件中有图片或者其他大文件，需压缩处理，或者将图片放到网上图床。
  3. 第一次上传时可以直接选体验版上传，不审核。

最后

贴一个当时想用requestAnimationFrame方法结果发现被限制了，只能在小游戏开发中用，然后找到了一个别人做好的轮子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
> var lastFrameTime = 0;
> // 模拟 requestAnimationFrame
> var doAnimationFrame = function (callback) {
>     var currTime = new Date().getTime();
>     var timeToCall = Math.max(0, 16 - (currTime - lastFrameTime));
>     var id = setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);
>     lastFrameTime = currTime + timeToCall;
>     return id;
> };
> // 模拟 cancelAnimationFrame
> var abortAnimationFrame = function (id) {
>     clearTimeout(id)
> }
>

以及，我的图标在哪找的这里！