為了幫助開發(fā)者簡單和高效地開發(fā)和調(diào)試微信小程序名眉，我們在原有的公眾號網(wǎng)頁調(diào)試工具的基礎(chǔ)上，推出了全新的 微信開發(fā)者工具凰棉，集成了公眾號網(wǎng)頁調(diào)試和小程序調(diào)試兩種開發(fā)模式
一损拢、微信開發(fā)工具下載：微信開發(fā)工具，安裝過程就不介紹了撒犀，跟普通的安裝工具一樣福压，一直下一步就好了掏秩。
二、開始搭建我們自己的第一個微信小程序
1荆姆、上篇文章我們介紹了微信小程序的注冊過程蒙幻，也告訴你怎么查看appid，下面我我們開始搭建我們自己的小程序胞枕，打開微信開發(fā)者工具杆煞，選擇小程序項目
2、填寫上篇文章中介紹的appid腐泻，如果你還沒有appid也可以使用測試appid决乎，并勾選建立普通快速模板選項，該選項可以幫我們快速搭建一個微信小程序的框架出來派桩，類似一個腳手架
3构诚、進(jìn)入將出現(xiàn)如下圖所示的界面，微信開發(fā)工具已經(jīng)幫我們搭建了一個簡單的項目了,到此你的第一個項目就搭建成功了
4铆惑、下面我們來看看項目的目錄結(jié)構(gòu)和文件
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 => {
// 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId
}
})
// 獲取用戶信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱撕阎，不會彈框
wx.getUserInfo({
success: res => {
// 可以將 res 發(fā)送給后臺解碼出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是網(wǎng)絡(luò)請求受裹，可能會在 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是小程序的公共樣式表照藻，結(jié)構(gòu)如下，首先是一個小數(shù)點.加上別名汗侵，之后就是一對大括號幸缕，在大括號內(nèi)設(shè)置屬性，鍵值對用冒號分割晰韵，鍵值對后面有分號
/**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 是整個項目的一些項目和環(huán)境配置文件
{
"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": []
}
}
}
以上只是簡單介紹了一些每個文件的作用冀值，后續(xù)文章將詳細(xì)介紹每個文件的具體用處和常用參數(shù)的使用。
??本文由明天的地平線創(chuàng)作宫屠，如想了解更多更詳細(xì)的內(nèi)容列疗，請關(guān)注一下公眾號，公眾號內(nèi)將進(jìn)行最新最實時的更新浪蹂！
