微信小程序开发介绍和准备(一)

微信小程序的文档地址：微信小程序开发文档

一个小程序页面由四个文件组成，（文件的名字最好是相同的，减少开发 ）
在web开发者工具’编辑’模式下，我们来看hello word 这个项目里的代码文件，最关键也必不可少的是app.js、app.json、app.wxss这三个文件，分别代表脚本文件、配置文件、样式表文件。微信小程运行时会读取这些文件，并生成小程序实例。
app.js 脚本代码用于监听并处理小程序的生命周期函数、声明全局变量、调用框架提供的丰富的API等。
在本例app.js中，我们调用了的同步存储及同步读取本地数据的ＡＰＩ——wx.setStorageSync() 及 wx.getStorageSync()

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力,调用API从本地缓冲中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

app.json配置文件是对整个小程序的全局配置。开发者将在这个文件配置小程序是由哪些页面组成、配置小程序的窗口背景色、配置导航条样式、配置默认标题等。
app.json 不添加任何注释
小程序 app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

app.wxss样式表文件是整个小程序的公共样式表