这是我修改后的app.json配置，配置的参数具体参考官网的解释:app.json配置详细

1.pages字段 —— 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

2.window字段 —— 用于设置小程序的状态栏、导航条、标题、窗口背景色。

 

因为我们暂时不用登录，获取用户信息等功能，所以我们可以修改一下app.js，将之前的全删了，然后敲app有提示的，按回车会出来很多代码，上面有注释都写得很清楚。

---

App({

  /**

  * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）

  */

  onLaunch: function () {

    console.log("小程序初始化完成");

  },

  /**

  * 当小程序启动，或从后台进入前台显示，会触发 onShow

  */

  onShow: function (options) {

    console.log("小程序启动或进入了前台");

  },

  /**

  * 当小程序从前台进入后台，会触发 onHide

  */

  onHide: function () {

    console.log("小程序进入到了后台");

  },

  /**

  * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息

  */

  onError: function (msg) {

    console.log("小程序出错啦："+msg);

  }

})

---

 

下面我们来修改index.wxml，修改后的内容如下图。在这里语法我就不讲了，用过vue的基本都能看懂，没用过的自己去看微信的开发文档，因为这语法不是一会半会能讲完的。

下面试index.js的内容



然后下面就是运行后的结果



点击标题，标题样式会改变，因为点击的时候我们将它的class改变了