1 第一个微信小程序

微信小程序将在2017年1月9日正式上线，目前个人不能注册小程序，如果我们要向体验小程序开发过程可以使用微信开发工具进行体验。

1 创建项目

首先在微信提供的网站下载开发工具：
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474644089359
安装完成后，打开开发工具，将会要求扫码进入，如图1所示。

---

---

登录后，将会进入开发工具主界面，如图2所示。

---

---

我们选择【本地小程序项目】，选择【添加项目】如图3所示。

---

---

创建【HelloWorld】项目，且AppID选择【无AppID】，如图4所示。

---

---

添加项目后，选择【编辑】，将会在开发工具中看到图5所示界面。

---

---

2 项目结构

创建小程序项目后，开发工具在根目录（项目路径）中有三个主体文件app.js、app.json、app.wxss和两个文件夹pages、utils。
（1）app.js ：是程序主入口的脚本文件（小程序逻辑）；
（2）app.json ：是全局配置文件（小程序公共设置）；
（3）app.wxss ：是小程序的样式表文件（小程序公共样式表）；
（4）pages：所有的页面都在 pages 文件夹中（小程序页面）；
（5）utils：存放全局的一些.js文件，公共用到的一些事件处理代码文件可以放到该文件夹下，用于全局调用。
一个小程序主体部分由三个文件组成，必须放在项目的根目录下面。小程序的所有页面放置在pages文件夹中，且每个页面占据一个子文件夹，并由四个文件组成，分别是index.js（页面逻辑）、index.json（页面配置）、index.wxml（页面结构）和index.wxss（页面样式表）。

注意：四个文件名必须和子文件夹一致

---

---

在演示项目中，工具自动生成了两个页面，分别是首页面和日志页面。

3 主体配置文件

使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

---

//app.js
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
  }
})

---

这里初始化了一个 App 对象，并且定义了三个方法 onLaunch，getUserInfo 和 globalData。

4 app.json

---

{
  "pages":[//工程有两个页面
    "pages/index/index",//第一个元素作为小程序的主页，与index名称无关
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",//背景文本类型
    "navigationBarBackgroundColor": "#fff",//导航背景颜色
    "navigationBarTitleText": "WeChat",//导航文本
    "navigationBarTextStyle":"black"//导航文字颜色
  }
}

---

这个配置文件中定义了两个节点，【pages】和【window】， pages 是小程序的所有页面对应的路径， window 是小程序窗口的配置信息。

5 app.wxss

相当于css文件

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

---

6 pages文件夹

pahes文件夹中结构如图6所示。

---

---

其中index和logs文件夹对应app.json中两个页面。

6.1 index文件夹

6.1.1 index.js

---

//index.js
//获取应用实例
var app = getApp()//获取app实例，即根目录app.js定义的APP
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({//页面跳转
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

---

6.1.2 index.wxml

首页面UI

---

<!--index.wxml-->
<view class="container">//容器
  //绑定点击事件（index.js中定义）
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    //motto为pages/index/index.jsp中定义数据
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

---

对应于首页面的一张图片和一句问候语，如图7所示。

---

---

7 上传小程序

logs 和 index 的页面的基本思路都是一样。 开发完小程序后，我们怎么部署呢？ 切换到项目选项卡，然后点击上传按钮即可。

---

---

由于我的环境没有内测账号，所以在上传区域显示的是项目未关联 AppID， 如果有了测试账号，就会显示你的 AppID 了。 目前只有内测账号才能够上传小程序。这就是唯一的差别了。没有内测账号只是不能上传，但完全可以在本地开发和测试。