微信小程序开发笔记(二)

"pages": [
    //这里的的第一个页面作为首页显示
    "pages/index/index",
    "pages/logs/logs"
  ],
//小程序中新增/减少页面，都需要对 pages 数组进行修改

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "演示",
    "navigationBarTextStyle": "black"
  },

属性                　　　　　　 类型    　　默认值    描述       最低版本
navigationBarBackgroundColor  HexColor  #000000   导航栏背景颜色，如 #000000    
navigationBarTextStyle        string    white     导航栏标题颜色，仅支持 black / white    
navigationBarTitleText        string    wechat    导航栏标题文字内容    
navigationStyle            　 string    default   导航栏样式，仅支持以下值：default 默认样式；custom 自定义导航栏，只保留右上角胶囊按钮    微信客户端 7.0.0
backgroundColor               HexColor  #ffffff   窗口的背景色    
backgroundTextStyle        　 string    dark    　下拉 loading 的样式，仅支持 dark / light    
backgroundColorTop        　  string    #ffffff   顶部窗口的背景色，仅 iOS 支持    微信客户端 6.5.16
backgroundColorBottom         string    #ffffff   底部窗口的背景色，仅 iOS 支持    微信客户端 6.5.16
enablePullDownRefresh         boolean   false     是否开启当前页面下拉刷新。详见 Page.onPullDownRefresh    
onReachBottomDistance         number    50        页面上拉触底事件触发时距页面底部距离，单位为px。详见 Page.onReachBottom    
pageOrientation            　 string    portrait  屏幕旋转设置，支持 auto / portrait / landscape    详见 响应显示区域变化2.4.0 (auto) / 2.5.0 (landscape)
disableScroll            　 　boolean    false    设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置    
usingComponents              Object    否         页面自定义组件配置    1.6.3
style                　　　   string    default    启用新版的组件样式    2.10.2

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "page/component/index",
        "iconPath": "image/icon_component.png",
        "selectedIconPath": "image/icon_component_HL.png",
        "text": "组件"
      },
      {
        "pagePath": "page/weui/example/index",
        "iconPath": "image/icon_component.png",
        "selectedIconPath": "image/icon_component_HL.png",
        "text": "扩展组件"
      },
      {
        "pagePath": "page/API/index",
        "iconPath": "image/icon_API.png",
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "接口"
      },
      {
        "pagePath": "page/cloud/index",
        "iconPath": "image/icon_cloud.png",
        "selectedIconPath": "image/icon_cloud_HL.png",
        "text": "云开发"
      }
    ]
  },

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: ‘Set some data for updating view.‘
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: ‘MINA‘
  }
})

 　　{
        "navigationBarBackgroundColor":"#ffffff",
        "navigationBarTextStyle":"black",
        "navigationBarTitleText":"微信接口功能演示",
        "backgroundColor":"#eeeeee",
        "backgroundTextStyle":"light"
    }

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: ‘Hello MINA!‘
  }
})

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

<!--wxml-->
<view wx:if="{{view == ‘WEBVIEW‘}}"> WEBVIEW </view>
<view wx:elif="{{view == ‘APP‘}}"> APP </view>
<view wx:else="{{view == ‘MINA‘}}"> MINA </view>

// page.js
Page({
  data: {
    view: ‘MINA‘
  }
})

<!--pages/item/item.wxml-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

<!--pages/index/index.wxml-->
<import src="../item/item.wxml"/>
<template is="msgItem" data="{{...item}}"/>

<!--pages/index/index.js-->
Page({
  data: {
    item: {
      index: 0,
      msg: ‘this is a template‘,
      time: ‘2016-09-15‘
    }
  }
})