这不是必需的小程序开发，并且它不指向主界面〜因为applet的主页是由JSON文件中的配置决定的
使用这两个文件运行程序，IDE将不会报告错误，这意味着这是最简单的微信小程序
Paste_Image.png Hello World创建程序示例
app.js文件管理着整个程序的生命周期，因此在其中添加以下代码：（输入App IDE将提示）
App（{onLaunch：function（）{console.log（'App Launch'）}}，onShow：function（）{console.log（'App Show'）}，onHide：function（）{console.log（ “应用程序隐藏”）}}）
具体的API解释如下
Paste_Image.png美化ActionBar
json文件负责配置ActionBar的颜色，我们只需要在其中添加以下代码，下图显示了参数说明！
Paste_Image.png
Paste_Image.png {“ window”：{“ navigationBarBackgroundColor”：“＃BBDEF8”，“ navigationBarTitleText”：“ Demo”，“ navigationBarTextStyle”：“ white”}}
Paste_Image.png
现在让我们来看看ActionBar是否是如此！好的，让我们继续编写我们的第一个界面。
美化页面
我们使用wxml和wxss文件美化了页面
为使程序代码结构简洁，我们需要在以下目录中自由创建一个新的文件夹名称。我们在这里将其称为页面，然后在pages文件夹中创建一个新的文件夹名称。在这里，我们称其为index，然后创建index.wxml文件。然后写下面的代码你好
然后创建index.wxss文件并在其中写入以下代码
.window {color =＃4995fa; }
然后我们创建index.js文件
在文件中输入以下代码（输入页面IDE会提示）Page（{data：{//文本：“ This is a page”}，onLoad：function（options）{//页面初始化选项是页面跳转传输带来的参数}，onReady：function（）{//页面渲染完成}，onShow：function（）{//页面显示}，onHide：function（）{//页面隐藏}，onUnload：function（） {//页面已关闭}}）
功能说明如下：
Paste_Image.png配置主页
Json文件负责配置页面路径
因此，我们在其中添加以下代码，其中index的含义实际上是指index.js文件。在这里，我们需要解释页面中的路径实际上指向js文件。如果目录中没有此名称的js文件，将报告错误！ “页面”：[“页面/索引/索引”]，
完成！让我们运行程序！
Paste_Image.png超级Hello World
为了学习事件绑定以及如何更新页面上的数据
让我们制作一个超级的Hello World，即，我单击文本以使其颜色改变！绑定事件
我们打开index.wxml并将其中的代码更改为这样
你好
实际上，它已添加。
catchtap =“ click”
这两个属性是什么意思，不用担心，我会一一解释它们
Paste_Image.png
上图显示了事件的一些属性名称。在这里，您需要注意红色框中标记的内容，以区分冒泡事件和非冒泡事件。实际上，冒泡事件需要将事件传递到容器的上层。
看看这张照片，让我们看看catchtap =“ click”
的含义。
catch表示一个非气泡事件，tap表示一个单击事件，因此连接在一起就是一个非气泡单击事件。点击背后的点击实际上是一个变量名。我们需要在index.js中用该名称绑定接收事件的函数。打开index.js并添加以下函数click：function（）{console.log（“ clicked the text”）; }
添加后，代码在红色框中看起来像这样。此代码已添加
Paste_Image.png
实际上，click事件的回调函数是catchtap =“ click”
单击后跟：function（）。现在，运行程序尝试单击文本Paste_Image.png
查看是否调用了click：function函数并打印了日志
好吧，让我们写一键更改颜色的逻辑。
如何更改文本的颜色，当然是CSS，因此我们需要为index.wxss.window-red {color：＃D23933; } Paste_Image.png
然后我们进入index.js文件
您会发现代码中有一个数据：{}：它不是页面生命周期函数。实际上，它是一个变量数组。可以在wxml Paste_Image.png
中使用此变量。
我们在这里申请颜色
Paste_Image.png
color的值是index.wxss中的样式名称
然后输入index.wxml并将类中的值更改为{{color}} Paste_Image.png
实际上，这意味着在此处使用js文件中的变量color的值
即，该值等于window，然后返回index.js文件并在顶部申请变量控件click，然后将以下代码添加到click：function（）函数click ：function（）{console.log（“ clicked Text”）; if（flag）{color =“ window-red”;标志=假; } else {color =“ window”; flag = true;} this.setData（{color}）; }
修改后的代码如图所示
Paste_Image.png
实际上，单击“是”后，颜色变量的值被更改，并且更改后的值实际上是样式的名称
更新界面数据
这里有问题。我们已经替换了该值，但是它不会立即在wxml中生效
因此，我们需要调用this.setData（）方法将值同步到wxml，以使其立即生效
好的，让我们运行该程序，然后单击“ Hello”以查看是否单击它来更改颜色！
111111.gif
最后，再添加一件事。 json文件也可以在索引目录中配置
也就是说，每个页面都可以配置自己独特的操作栏颜色，等等。此处的配置将覆盖app.json文件的配置
在末尾附加github地址