小程序自动化。

2.2.使用云开发

您无需设置服务器即可使用云功能。

微信官方文档：云开发简介

存储：文件和图片管理。

云函数：调用云服务器的方法。

3.了解代码结构

新建的工程默认会包含如下图所示的四个文件，主要用于注册和配置微信小程序，包含全局配置信息。

如下图所示，还有一个目录：

每个页面由四个文件组成：

.js：处理页面逻辑和数据交互，变量和函数必须写在page({ })中

.json：对应页面的配置信息

.wxml：显示页面的内容和元素

.wxss：使用wxml设置显示元素的样式

坑一：demo中点击Get，报调用失败

[云功能][]调用失败::-| : .:fail ，代码 -，而不是 : [];在 。应用程序编程接口；

错误原因：云函数未上传：

解决方案：创建并部署云函数

知识点1：微信小程序中的用户ID（和）

指示用户在当前应用程序中的唯一标识符。例如，小程序和微信公众号都被视为一个应用程序。如果您有多个应用程序，同一用户可能有不同的标识符。

如果一个开发者拥有多个移动应用、网站应用、公众号（包括小程序），就可以区分用户的唯一性，因为只要是同一个微信开放平台账号下的移动应用、网站应用、公众号（包括小程序），用户的是独一无二的。也就是说，同一个用户在同一个微信开放平台下，对不同应用的访问权限是相同的。

4.开发小程序

4.1.功能实现：新增2个页面

3 个底部标签

顶部标题设置

实施过程：

创建两个新页面：并在下面绘制。

在app.json中添加三个控件，并指定点击控件时跳转到的页面。当然，相应的图标文件必须提前准备好，并存放在指定目录下。

app.json中的xt字段修改了小程序顶部的标题。

陷阱2：app.json文件中的注释导致错误

''， 得到

错误原因：.json是配置文件，其内容必须符合json格式要求，且不允许注释。

JSON 有两种数据结构：

名称/值对的集合： key :

值的有序列表：即

JSON文档规定，任何不符合上述两种结构的内容都是不支持的，并且会提示错误。

解决办法：去掉注释。

4.2.实现功能：从60到0倒计时效果

倒计时结束后会有提示

实现过程：.wxml中添加代码

.js 中的数据处理

4.3.实现功能：闪杀倒计时，显示格式为：1天11小时11分11秒11

限时抢购时间到期后，提示限时抢购已结束。

标题通过js数据绑定到页面

设置标题样式

实现过程：.wxml中添加代码

.js 中的数据处理

将数据绑定到页面：

设置标题的样式：

陷阱三：前端只显示第一个倒计时

问题原因：只获取到.js中第一个函数的数据。

只能存在一个函数。

解决办法：只保留一个函数。

知识点2：JS与小程序页面生命周期

4.4.实现功能：彩票轮盘

跑马灯效应

抽奖完成后会有弹窗

实现过程：在draw.wxml中添加代码

在draw.wxss中设置样式

在draw.js中进行交互处理，控制外圈闪烁的小球，改变一次样式；控制抽奖项目的背景和跑马灯的开始和停止。

陷阱4：加载图片时出错

错误原因：图片名称中含有特殊符号。

解决办法：去掉图片名称中的下划线、括号等。

陷阱5：大部分内容不显示

错误原因：draw.wxml中容器名称错误。

解决办法：将-out改为-out。

陷阱 6：令人困惑的风格

错误原因：最外层背景和奖品图片背景的容器名称重复。

解决办法：将-out改为-out1。

知识点3：尺寸单位rpx

知识点4：控制小球间隔显示相同颜色

(%2==0)?:

是数组从0开始的序号或下标，%是余数或模，序号是2的余数，如果余数为0则返回1，如果不为0则返回2 。该数组返回偶数项并返回奇数项。

知识点5：打印日志

在js定义的方法中添加.log。

看到这里，恭喜你，你也开始了。