为了帮助开发者简单和高效地开发和调试微信小程序，我们在原有的公众号网页调试工具的基础上，推出了全新的 微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式
一、微信开发工具下载：微信开发工具，安装过程就不介绍了，跟普通的安装工具一样，一直下一步就好了。
二、开始搭建我们自己的第一个微信小程序
1、上篇文章我们介绍了微信小程序的注册过程，也告诉你怎么查看appid，下面我我们开始搭建我们自己的小程序，打开微信开发者工具，选择小程序项目
2、填写上篇文章中介绍的appid，如果你还没有appid也可以使用测试appid，并勾选建立普通快速模板选项，该选项可以帮我们快速搭建一个微信小程序的框架出来，类似一个脚手架
3、进入将出现如下图所示的界面，微信开发工具已经帮我们搭建了一个简单的项目了,到此你的第一个项目就搭建成功了
4、下面我们来看看项目的目录结构和文件
1)pages主要存放文件信息
它包含4个文件：js（必须），wxml（必须），json（非必须），wxss（非必须）
2)app.js是公共的js文件，主要处理一些全局的小程序逻辑
//app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
3)app.json该文件中存放的公共配置，格式就是json，其中pages是必须要配置的，程序中的每一个页面，都需要在这里配置，否则页面会找不到,window属性配置的是一些窗口属性
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
4)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;
}
5)project.config.json 是整个项目的一些项目和环境配置文件
{
"description": "项目配置文件",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true
},
"compileType": "miniprogram",
"libVersion": "2.2.5",
"appid": "wx3639f434d0dce6cc",
"projectname": "helloworld",
"debugOptions": {
"hidedInDevtools": []
},
"isGameTourist": false,
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}
以上只是简单介绍了一些每个文件的作用，后续文章将详细介绍每个文件的具体用处和常用参数的使用。
本文由明天的地平线创作，如想了解更多更详细的内容，请关注一下公众号，公众号内将进行最新最实时的更新！