目录结构和页面组成

微信小程序只能运行于微信中
不用下载，需要时使用，不需要的时候就可以删掉，很方便

开发微信小程序需要具备：
wxml，wxss（css），JavaScript核心的能力

与公众号没有联系

app.js

App()函数：注册小程序，接收参数

onLaunch（）：生命周期函数，监听小程序初始化，小程序初始化完成时，会触发onLaunch()

onShow（）：生命周期函数，监听小程序显示，当小程序启动或者从后台进入前台显示，触发onShow

onHide（）：生命周期函数，监听小程序隐藏，当小程序进入后台，触发onHide

示例：

在目录下面的app.js代码的onLuanch{}代码之后，添加一个逗号之后，添加如下代码

onShow: function () {
    console.log('从后台进入前台');

  },
  onHide: function(){
    console.log('从前台进入后台');
  },

点击编译–>调试器–>找到调试器中的console部分–>点击上方的切后/前台–>显示效果如下：

我们可以看到console中显示出了我们点击切换前后台的效果。
由此可以理解onShow()，onHide()，小程序的生命周期

我们也可以在后方添加自定义的函数：

//自定义函数
  anyfunction:function(){
//......
  },

app.json

对小程序的全局配置，在该文件中可以配置小程序由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题等
该文件不可以添加任何注释

pages:
存放页面的列表，里边写上页面的路径，否则会报错，就算不报错，也不能正常运行
我们可以看到页面路径如下：

代码如下：

"pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],

注意代码中的最后一个目录不需要添加后缀
可以自行添加路径，用逗号隔开

window
定义页面的窗口
页面由上，中，下组成

提取代码：

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"，
    "enablePullDownRefresh":true
  }

"navigationBarBackgroundColor": “#fff”,
背景色，#fff表示为白色，改为#000，则变为黑色，页面如下，由于它是全局的，所有打开的页面均会变为黑色：

"navigationBarTitleText": “WeChat”,
由于把背景色变为黑色，由于该字显示为黑色，所以上面看不到，现在我们把字改为白色
“navigationBarTextStyle”:"black"中的black用white代替，编译，显示如下：

现在可以看到上方显示白色的WeChat字了

"enablePullDownRefresh":true
表示允许下拉刷新，把true改为false则相反。

tabBar
“iconPath”:“images/latest.png”,
“selectedIconPath”:“images/lastest_on.png”
“iconPath”: “images/hotest.png”,
“selectedIconPath”: “images/hotest_on.png”

 "tabBar":{
    "color":"#000",
    "selectedColor":"#fff",
    "backgroundColor":"#fff",
    "borderStyle":"white",
    "list":[{
      "pagePath":"pages/index/index",
      "text":"首页"
      
    },{
      "pagePath":"pages/logs/logs",
      "text":"日志"
      
    }]

“color”:"#000",：设置字体颜色；
“selectedColor”:"#fff",：设置选中变为白色；
“backgroundColor”:"#fff",：设置整个下方的区域变为黑色；
“borderStyle”:“white”,：设置边框颜色，只有black和white
如下，显示首页时，下方主页字体为白色看不见：

显示日志时：

  "list":[{
      "pagePath":"pages/index/index",
      "text":"首页"
      
    },{
      "pagePath":"pages/logs/logs",
      "text":"日志"
      
    }]

list中写出：点击首页或者日志之后进入的页面，根据指定路径显示

还有以下，不做过多介绍
networkTimeout
debug

其中pages以及window是必须的

app.wxss

定义整个小程序的公共样式，此处定义的样式所有页面均可以用。

创建页面及页面组成

创建的页面必须在app.json中注册，页面由wxml，js，wxss，json四个文件组成，四个类型文件名必须相同。

wxml：组成页面结构；
js：页面初始化数据以及页面逻辑（如：点击事件）
wxss：页面样式；
json：设置app.json中的window配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项。

创建目录：
右键pages，新建目录test，在目录test下面新建四个文件（js，json，wxml，wxss），命名都为test
然后在app.json中的pages下进行设置：
输入：

"pages/test/test"

并且在app.json的list下面添加如下代码，这样在下方点击添加进去显示的就为目录test了，现在点击进去是空白的，后边会添加代码：

{
      "pagePath": "pages/test/test",
      "text": "添加"
    }

回到test.json，添加如下代码，根据英文命名的变量可以可以了解相关意思，这里不做过多解释：

{
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "我的页面",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true
}

在test.js中添加如下代码：

Page({
  data:{
    mytext:"my first text 100",
    mytext2:{
      num:90
    }
  },
  onLoad:function(){
    console.log("执行onLoad");//生命周期函数onLoad
    //this.anyfunction();
  },
  anyfunction:function(){//自定义函数调用在test.wxml中
    console.log("执行anyfunction");
    this.setData({
      mytext: "my first text 200",
      'mytext2.num':30
    });
  }

})

在test.wxml中添加如下代码，写博客方便讲解，所以在后边添加了注释，如果代码粘贴过去不能运行需要将注释去掉：

<view class="container">//这个container在原始的app.wxss中已经定义好啦
<text>Hello world</text>//添加组件，会显示Hello world
<button type="default" bindtap="anyfunction">测试</button>//添加按钮组件，点击按钮触发执行自定义函数anyfunction，按钮上显示测试两个字
<text>{{mytext}}</text>//定义的mytext字符串
<text>{{mytext2.num}}</text>//自定义的mytext2中的num值
</view>

编译：

点击下方的添加

点击测试按钮：

我们可以看到点击测试按钮之后，两处的数字发生了变化，这个变化是因为执行了anyfunction而产生的。

data

我们来看一下test.js中Page下方定义的data；
它会以json的形式由逻辑层传至渲染层，所以它的数据必须可以转换为json形式：
字符串，数字，布尔值，对象，数组

setData()

接受一个对象，以key，value形式将this.data中的key值改为value

页面跳转

方法一：
打开目录index.wxml，在…之间添加如下一行代码：

<button type="default" ontap="goToMYpage">跳转到我的页面</button>

然后代码目录index.js
添加如下这个函数goToMYpage：

goToMYpage: function () {
    wx.switchTab({//reLaunch 以及switchTab 可以进行跳转，但是上方没有返回，而redirectTo 以及navigateTo不能跳转
      url: '../test/test'  //写的是跳转的目录
    })
  }

页面跳转navigateTo可以返回，navigator也可以返回
重定向redirectTo 把前面的页面杀死了，回不去了
演示结果：

点击跳转到我的页面：