[原始]如果读者不理解微信小程序是什么，则可以阅读我的另一篇文章：[微信小程序：本机散热布局最终将改变世界）
本文将重新开发微信小程序。该程序的功能非常简单。这是一个猜谜游戏。单击“开始”按钮后，它将快速在“锤子”，“剪刀”和“布料”之间切换。在按下“停止”按钮之前，将显示“锤子”和“剪刀”。与“布料”中的一个一样，游戏可以被两个或更多参与者猜到。这里没有提到猜测规则，每个人都应该非常清楚。本节的目的是使用此示例来运行完整开发微信小程序的过程，从注册公共beta帐户开始，直到将微信小程序发布到微信平台并在真实计算机上对其进行测试。通过此示例，读者可以完全掌握微信小程序的开发过程。
1.注册微信小程序公共Beta帐户
在上一篇文章中，已安装微信小程序的IDE，并且创建的项目没有AppID。尽管小程序可以用这种方式在计算机上开发（为了方便起见，微信小程序在将来会被称为小程序）并用仿真器进行测试，但无法在实际环境中测试小程序计算机，更不用说将小程序上传到服务器进行审查了，因此，如果您想以更完美的方式开发小程序，则必须具有小程序的AppID。
现在，腾讯已开放小程序 AppID的注册，但目前仅适用于公司，政府，媒体和其他组织，不适用于个人。我相信小程序正式发布后将对个人开放。对于许多读者来说，他们可能没有相关组织的资格，但通过学习本章，他们也可以对小程序开发的整个过程有深入的了解，以免在全面开放注册后不知所措。将来。
要注册小程序帐户，请首先进入以下页面。
然后单击右上角的“立即注册”链接进入注册页面。在页面中心，您将看到注册类型，如图1所示，包括订阅号，服务号，小程序和企业号。直接单击“ 小程序”以进入小程序注册页面。
图1各种“数字”的注册页面
在注册过程中，将要求您输入一些常规信息，例如电子邮件地址和密码。验证时，系统会要求您输入与公司相关的信息，例如公司名称，统一的社会信用代码，公司银行帐号和其他信息。注册用户可以选择图2所示的主题类型之一。
图2选择主题类型
选择一个主题后，将要求您在页面底部输入相关信息。如果选择公司，将要求您输入公司名称，营业执照注册号和其他信息，以及管理员的相关信息（每个管理员最多只能注册5个小程序）。这里的管理员（将在注册过程中绑定到管理员的微信）用于登录小程序后端，其他加入的普通开发人员无法登录到小程序后端，但只能登录进入小程序 IDE。
最后，系统会要求用户使用公司帐户将0.06元汇入腾讯官方帐户进行验证（要求在10天内汇款，否则验证将失败，并且只能是0.06元）。无论验证是否成功，资金都将退还至原始公司帐户。验证是自动的，但不是实时的。腾讯的服务器应不时进行验证。可能要等几个小时。请耐心等候。
在通过验证之前，您仍然可以使用已注册的电子邮件登录小程序后端，但是您无法获得小程序 AppID。验证通过后，将通过工作站SMS（在小程序后台的右上角）将其通知。需要注意的是，在登录小程序后台过程中，需要使用手机微信扫描QR码登录。请使用管理员的微信进行扫描登录。 小程序背景。
如果验证成功并且您成功登录到小程序背景，您将看到左侧图3所示的菜单。
图3 小程序背景菜单
单击底部的“设置”，然后在页面右侧将显示两个选项卡：“基本设置”和“开发设置”。 “基本设置”用于输入小程序的基本信息。应当注意，每个帐户只能绑定一个小程序。如果要开发多个小程序，则需要注册多个帐户（多个管理员），当然，它也可以由一个管理员同时管理。多个帐户（最多可以注册5个小程序）同一张ID卡）。图4是已记录的小程序的基本信息。
图4 小程序基本信息
接下来，单击“ Development Settings”选项卡，您将看到小程序的AppID（阴影部分），如图5所示。最好不要让无关的人知道这个AppID，否则可能会引起一些问题。读者可以在AppID文本框中输入此AppID。
图5获取小程序的AppID
2，绑定开发人员
尽管管理员创建了小程序项目，但它可能不是负责开发的管理员，而是另一个开发人员。此时，通常有必要为开发人员创建一个帐户。实际上，您只需要将开发者的微信帐户绑定到管理员创建的小程序帐户即可。
在小程序后端的左侧菜单中选择“用户身份”，您将看到在页面右侧显示的当前管理员和开发人员帐户，如图6所示。
图6用户身份页面
单击“ Developer”选项卡，您将看到已绑定的开发人员（最多可以绑定10个），如图7所示。
图7绑定开发者
单击页面右侧的“绑定”按钮，将弹出显示QR码的页面。用开发者的手机微信扫描QR码以将其绑定。绑定完成后，首次登录小程序 IDE时，可以使用绑定的开发人员的手机微信扫描IDE中显示的QR码来登录。但是，除管理员外，绑定的开发人员只能在实际计算机上预览小程序，而不能将小程序上传到腾讯的服务器。
3。创建并打开微信小程序项目
这部分应该是最令人兴奋的部分的开始，因为我们将从这一部分进入开发链接以完成我们的第一个小程序：猜谜游戏。
别忙，小程序项目尚未建立！
现在运行小程序 IDE。如果是第一次运行，将显示如图8所示的登录窗口。然后使用管理员或开发人员的微信扫描QR码以成功登录。
图8 小程序 IDE登录窗口
成功登录后，将显示图9所示的窗口。图9创建小程序项目的窗口
如果您以前使用AppID创建了小程序项目，则在配置小程序时指定的图标将自动显示。如果尚未创建项目，请单击“添加项目”按钮以创建新的小程序项目。如果您已有AppID，请在图10所示的AppID文本框中输入AppID。如果没有AppID，请单击“ No AppID”。并输入项目名称和项目目录，如图10所示。请注意，如果它是一个新项目，则项目目录应该为空。如果目录中其他文件和目录太多，则下次加载IDE时，由于加载这些文件和目录，它将进入暂停的动画状态。如果确实要进入此状态，请在Mac OS X下进入〜/ Library / Application Support目录，然后删除“ 微信 web开发人员工具”目录以恢复IDE的初始状态。如果您使用的是Windows，只需卸载小程序 IDE并重新安装。
图10“创建项目”窗口
如果“项目目录”指定了另一个小程序目录，则使用上述方法将打开小程序项目，而不是创建小程序项目。 IDE会自动识别它是新动作还是打开动作。
4、猜谜游戏的布局
输入小程序 IDE，单击IDE左上角的“编辑”选项（如图11所示）开始编辑代码。
图11 IDE左上角的控件选项
猜测游戏的布局非常简单，如图12所示。图12猜测游戏的布局样式
猜谜游戏的布局在垂直方向上显示三个组成部分：文本，图像和按钮。创建小程序项目时，默认情况下会创建两个页面：索引和日志，如图13所示。我们不需要管理日志。在此示例中，我们仅修改与索引页面相关的文件。 index是小程序中显示的第一页。
图13索引和日志页面的文件结构
其中，index.wxml文件是索引页面的布局文件。现在打开文件并根据以下内容修改代码。
猜盒子游戏
{{imagePath}}“ background-size =” cover“ />
{{title}}
在此代码中，图像和按钮组件的内容需要动态更改，因此图像组件的src属性和按钮组件的文本值（夹在和之间的部分）分别绑定到一个变量。这是小程序的重要功能（与React Native完全相同）。更改组件的属性值时，无需直接获取组件的实例，而只需将属性绑定到相同类型的变量。一旦变量的值更改，属性值也将相应更改。 。绑定变量的格式为“ {{变量名称}}”。下一节将详细描述更改的定义和初始化部分。
我们发现，即使按照以前的布局，也仍然无法如图12所示放置组件。这是因为需要以下代码来调整样式（index.wxss文件）。