微信小程序创建

一、下面简单介绍一下微信小程序：

• 首先要注册小程序开发者账号获取appID，没有的话功能会受限很多。例如没发在手机上预览效果。
• 下载小程序官方开发工具
• 下载微信小程序简易教程中的源码
• 接着用微信的开发工具打开你刚才下载的源码，按照提示进行就行了。

显示效果如下：

小程序首界面.png

二、这时点击左侧的编辑按钮会看到相目结构如上图。先看最下方的三个文件：

.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件

1. app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。想了解更多可用 API，可参考 API 文档
   相关代码：

App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

2. app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口�背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考配置详解
   相关代码：

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

3. app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
   相关代码：

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

三、疑问：

1. 创建新的项目都怎么创建？

我每次都是都是下载一次上面的官方源码，感觉这个方法太low了，大家有没有好的创建新项目的方式？微信官方没找到创建方式，开发工具也没找到

2. 创建新的文件怎么创建？

暂时我发现了一个快捷的方式，就是在 app.json中写入路径保存后相关的文件就会自动创建了，这一招太方便了！在官方配置中我依然没有发现这种快捷的创建方式，小程序的文档写的感觉无力吐槽！后面的.wxss配置样式表让我这从来没接触过css的感觉有点崩溃。

以上内容严重参考小程序官方文档