| 泡芙小姐 110 1. JSON 配置文件 小程序中，包含唯一的全局配置文件 app.json，以及每个页面的配置文件 page.json。每单页页面相应的 JSON 文件会覆盖与 app.json相同的配置项。 如下，是一个包含了所有配置选项的简单配置 app.json。 [图片] 2. JS 逻辑层 小程序的逻辑层由 Java 语言完成。但因为小程序不在浏览器中运行，所以 JS 在 web 浏览器中的一些函数不能用，如 document、 window等。 app.js有全局的小程序生命周期， page.js有自己本页面的生命周期。 2.1 注册小程序 app.js 这一步骤，有这几个需要注意的地方： 必须在 app.js中，使用 app()函数注册微信小程序。全局小程序中，只能注册一次； 不能在 app()内的函数中调用 getApp()（小程序实例），使用 this就可以拿到小程序的实例； 不要在 onLaunch的时候 getCurrentPage()，因为此时 Page还没有生成； 通过其他子页面调用 getApp()获取实例后，不要私自调用">小程序全局的生命周期方法； 可以通过 var app=getApp()获取小程序的实例。 [图片] 2.2 注册小程序的页面 page.js Page()用来注册一个页面，维护该页面的生命周期以及数据。 [图片] 2.3 公共模块 util.js 公共模块方法需要通过 module.exports对外暴露接口，使用的时候需要利用 require(path)，将文件引入。如： [图片] 2.4 数据操作 setData()不能直接操作数据，例如 this.data.text="xxxxx"就是错误的。你需要在 this.setData()之中，进行数据的操作。 同时，这里有作用域的问题。比如，需要在局部函数中使用，就需要 .bind(this)。 如果你需要操作全局的数据，你需要在 app.js中进行相应设置，例如： [图片] [图片] 3. 视图层 WXML 视图层的数据绑定均来自于 Page中的 data，想要修改相应值，你需要用到 this.setData。数据绑定使用两对花括号，将变量名包起来。 3.1 条件渲染 你可以利用 if和 else，在视图层上编写在特定情况下，出现的不同的视图结果。 [图片] 很多人会将 CSS 中的 display: hidden属性，与 WXML 的这个特性做一个比较。 微信小程序中的 wx:if是惰性的。如果不符合渲染条件，它不会渲染相应部分； 使用 display: hidden时，元素始终渲染，只是视图层上没有显示，用户看不见。 如果你的小程序有元素显示频繁切换的需求，建议你使用 display: hidden，能够为用户提供能顺畅的使用体验。 3.2 列表渲染 相当于让 WXML 处理一个循环。 在 WXML 中，你可以这样来建立一个 for循环： 然后在相应的 JS 中，新建一个数组： [图片] 需要注意的是，如果列表中的项需要动态添加到列表中，并希望项目保持原有的特征和状态，那么你应该使用 wx:key。 wx:key有两种形式： 字符串：wx:key="unique"； 保留关键字：wx:key="*this"。 3.3 运算 WXML 可以执行简单的运算任务。例如： 也可以做到字符串拼接： 甚至，你可以使用 ...在 WXML 中展开对象。

今天分享一下开发时用到的特效：震屏效果！在一些重要事件发生时，为了给玩家一种震憾的感觉，屏幕抖动一下。 游戏引擎：Laya 开发语言：ts 代码： /**震屏效果临时变量 */ var vibrateObj = {         x: 0, y: 0, rotation: 0, view: null }; /** * 调用该方法前，请将view的描点设置为中心点 * 震屏效果 * 三个变量：x水平方向  5,y垂直方向  5,rotation旋转角度  10 * @param view * @param time  持续时间 以毫秒为单位 */ function vibrateScreen(view: Laya.Sprite, time?: number): void {     if (vibrateObj.view) {         Laya.timer.clearAll(vibrateObj);         //说明上一次的动画还没完成         vibrateObj.view.x = vibrateObj.x;         vibrateObj.view.y = vibrateObj.y;         vibrateObj.view.rotation = vibrateObj.rotation;     }     //先清除该对象上的缓和时间     vibrateObj.x = view.x;     vibrateObj.y = view.y;     vibrateObj.rotation = view.rotation;     vibrateObj.view = view; //定义参数       var count = time ? (time / 10) : 50;         var loop = 0;//震动次数       var offX;     var offY;     var dir = 1;//震动方向。1正，-1反       var rotation;     Laya.timer.loop(10, vibrateObj, function () {         loop++;         //随机获取震动方向           dir = Math.random() > .5 ? 1 : -1;         //随机获取X轴移动量           offX = Math.random() * 5 * dir + vibrateObj.x;         //随机获取Y轴移动量           offY = Math.random() * 5 * dir * -1 + vibrateObj.y;         // rotation = Math.random() * 5 * dir + vibrateObj.rotation;         Laya.Tween.to(view, { x: offX, y: offY, rotation: rotation }, 10, Laya.Ease.linearNone, Laya.Handler.create(vibrateObj, function () {             if (loop > count) {                 Laya.timer.clearAll(vibrateObj);                 view.x = vibrateObj.x;                 view.y = vibrateObj.y;                 view.rotation = vibrateObj.rotation;                 vibrateObj.view = null;                 return;             }         }));     }); } 使用： vibrateScreen(view);//view即为需要抖动的视图 再配合下手机的震动（自定义震动----也是我写的），效果还是不错的！ 欢迎扫下我的小游戏，体验下效果！（游戏结束时就会有震屏效果) [图片]