第一节：begin微信小程序

微信小程序入门

距离腾讯微信小程序的推出已经一年多了，一直想学习和了解一下这个新事物，总是因为种种原因没能实现。今天借着朋友准备创立公司，做小程序相关的内容，学习一下。

微信小程序
https://mp.weixin.qq.com/debug/wxadoc/dev/
小程序发布一年多，现在的版本也渐渐稳定，但作为发展中的事物，还是有很多的不确定性相比刚发布的时候，废除了很多API，官方开发工具也做了一些调整。

官方的开发工具截图：

这个开发工具目前很不成熟，快捷键都极少支持，使用起来并不是很方便，所以，如果不习惯的话可以使用其他的前端编程工具。

尝试编写了一个小demo，感觉跟一般的前端开发很相似，小程序还封装了一些有用的API，源码很简单，记录下来：

• appr.json 相当于全局的配置文件
  其中在”pages”:[
  “pages/index/index”
  ]定义或者说声明目录

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#b3d4db",
    "navigationBarTitleText": "第一个小程序",
    "navigationBarTextStyle":"black"
  }
}

• appr.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;
} 

text{
  font-family: Microsoft YaHei;/**全局字体：微软雅黑**/
}

• index.js 自定义的页面的js文件，这个版本不能为空，会报错，提示：出现脚本错误或者未正确调用 Page()

/**index.js**/
Page({

})

• index.wxml 自定义的html文件

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
  <image class="userinfo-avatar" src="/images/132.jpg"                background-size="cover"></image>
    <text class="userinfo-nickname">Hello，晨曦</text>
  </view>
  <view class='motto'>
    <text class="usermotto"> 开启小程序之旅 </text>
  </view>
</view>

• index.wxss 自定义的css文件

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin-top: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  margin-top: 100rpx;
  color: #000;
  font-size: 32rpx;
  font-weight: bold;
}

.motto {
  margin-top: 200rpx;
  border: 1px solid #405f80;
  border-radius: 5px;
  width: 200rpx; 
  height: 80rpx;
  text-align: center;
}

.usermotto{
  line-height: 80rpx;
  font-size: 26rpx;
}

page{
  background-color: #b3d4db;
}

• demo中还有一个自定义的images目录，存放了一张图片(头像)
  至此，demo的所有代码就写完了。