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 了。 目前只有内测账号才能够上传小程序。这就是唯一的差别了。没有内测账号只是不能上传，但完全可以在本地开发和测试。