小程序料理第二课 代码结构和简单实例

    经过了上一节课的工具准备，我们就可以开发小程序了。但在这之前，我们还得熟悉熟悉我们手上的工具，毕竟一开始接触这个工具还不知道如何下手。我们首先来看开发工具的程序面板。

    如上图所示，开发工具的面板主要分为了三个区域，分别是：（1）    模拟器 用于实时显示代码改动后在手机上显示的效果（2）    编辑器 用来写代码的区域（3）    调试器 给出错误信息或者提示信息的区域    我们的主要活动，就在于使用编辑器去得到我们想要的结果，一个一个介绍未免过于枯燥，所以下面我将采用灵活的稍微有趣的解说。    首先我们可以看到，在目录那一栏中，一共有四种文件类型，如果你学过网页前端，我将给你类比一下，你就会明白这些文件究竟有什么作用。1.    js文件，与前端的js类似，它主要包含的内容是一些点击事件和处理函数；2.    wxml文件，就和html一样，用来设置网页中的内容、控件3.    wxss文件，和css类似，包含的是对网页中的控件进行样式的设计（字体、大小、颜色、排列等）4.    json文件，json文件有好几种，比如app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，app.json默认的内容如下：{  "pages":[    "pages/index/index",    "pages/logs/logs"  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "WeChat",    "navigationBarTextStyle":"black"  }}     app.json 是对当前小程序的全局配置，其中pages字段用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。window字段定义小程序所有页面的顶部背景颜色，文字颜色。    project.config.json用于保存该项目的一些外部设置    xxx.json（xxx为我们创建的包名，例如log.json），一般是我们自己新建的，其实用来表示 pages/logs 目录下的小程序页面相关的配置。    明白了基本文件的功能，我们来简单的新建一个页面，走一套小程序的创建流程。    要创建小程序页面,一般来讲，在文件目录中右击pages文件夹，先新建目录，然后右击目录依次新建js、wxml、json、wxss文件，但其实还有个更简单的方法。直接点击app.json，在其中的pages下面添加"pages/test/test"，然后点击上方的编译按钮。

    然后你就会在目录中发现一下子都建好了。

    接下来我们需要做什么呢？    首先我们先简单设置一下test界面的内容，打开test.wxml，写下代码<!--pages/test/test.wxml-->    <text>这里是测试页面！</text>    然后打开test.json设置测试页面标题文字    {      "navigationBarTitleText": "测试界面"    }    由于测试界面没什么内容，我们就不对test.js做什么改动了，我们看到首页index.wxml有两种方式可设置跳转，一种是设置按钮  <view>  <buttontype="default"bindtap="jumpToMyPage">log信息</button>  </view>    Bindtap是这个按钮的标记，也就是类似于id，便于在js文件里写识别。然后打开index.js，添加//事件处理函数 bindViewTap: function() {   wx.navigateTo({     url: '../test/test    })  },    然后编译保存即可。    还有一种方法是直接在index.wxml中写如下语句    <viewclass="btn-area">         <navigatorurl="/pages/test/test"hover-class="navigator-hover">跳转test页面</navigator>       </view>    也可以实现跳转，跳转结果如右下图

      

                                       Index界面                                                                   测试界面