教你如何使用微信开发工具体验微信小程序

教你如何使用微信开发工具体验微信小程序。微信小程序将在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.js中定义)

{{userInfo.nickName}}

//motto为pages/index/index.jsp中定义数据

{{motto}}

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

7 上传小程序

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

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