微信越來越貼近我們的生活，有些開發者們也不斷地在開發著微信小程序，那麼小程式到底怎麼開發呢？如何入手呢？那我們就用一個微信小程式」為例，簡單的介紹下，微信小程式的入門級用法。
一、註冊小程式帳號
1、進入微信公眾平台（ https://mp.weixin.qq.com/），註冊小程式帳號，依照指示填寫對應的資訊即可。 ->小程式開發與管理->設定伺服器中，點選「開發者設定」。
##注意：如果要以非管理員微訊號在手機上體驗該小程序，那麼我們還需要操作「綁定開發者」。上需要體驗該小程式的微訊號。有效率地開發，微信小程式推出了全新的開發者工具，整合了開發調試、程式碼編輯及程式發布等功能。 qq.com/debug/wxadoc/dev/devtools/download.html?t=201715
（1）編輯區可以對目前專案進行程式碼編寫和檔案的新增、刪除以及重新命名等基本操作
（2）程序調試主要有三大功能區：模擬器、調試工具和小程式操作區
注意：啟動工具時，開發者需要使用已在後台綁定成功的微訊號掃描二維碼登錄，後續所有的操作都會基於這個微信帳號
1、實例目錄結構
? test ├─ page │ └─ index │ ├─ index.js │ ├─ index.json │ ├─ index.wxml │ └─ index.wxss ├─ app.js ├─ app.json └─ app.wxss
2、實例檔案說明及原始碼
一個小程式包含一個app（主體部分）和多個page （頁）
（1）app是用來描述整體程式的，由三個文件組成，.js後綴的是腳本文件，.json後綴的文件是設定文件，.wxss後綴的是樣式表文件，必須放在專案的根目錄。
app.js是小程式的腳本程式碼（必須），可以監聽並處理小程式的生命週期函數、宣告全域變量，呼叫框架提供的豐富的API。 、視窗表現、設定網路逾時時間、設定多tab等。接受一個數組，每一項都是字串，來指定小程式由哪些頁面組成。微信小程式中的每一個頁面的【路徑+頁面名稱】都需要寫在app.json的pages中，且pages中的第一個頁面是小程式的首頁。
?
App({
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
},
globalData: {
hasLogin: false
}
}){
"pages":[
"page/index/index"
],
"window":{
"navigationBarTextStyle": "black",
"navigationBarTitleText": "欢迎页",
"navigationBarBackgroundColor": "#fbf9fe",
"backgroundColor": "#fbf9fe"
},
"debug": true
}page {
background-color: #fbf9fe;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
justify-content: space-between;
}Page({
data: {
title:'小程序',
desc:'Hello World!'
}
})index.wxss是頁面樣式表檔案（非必須），當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋app.wxss中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構檔案中直接使用app.wxss中指定的樣式規則。
<view class="container">
<view class="header">
<view class="title">标题：{{title}}</view>
<view class="desc">描述：{{desc}}</view>
</view>
</view>Tips：
a.為了方便開發者減少設定項，小程式規定描述頁面的這四個檔案必須具有相同的路徑與檔案名稱2、填寫小程式的AppID，專案名稱，選擇第三步驟寫好的小程式實例資料夾，點選「新增項目」。
3、如果出現以下效果，那麼恭喜你，你的第一個小程式專案已經寫成功了！點擊左側邊欄“編輯”，也可以在右側編輯視窗直接對程式碼進行修改，儲存（CTRL+S）後刷新（F5）即可生效。
4、如果想看小程式專案在手機上的效果，點擊左側邊欄“專案”，點擊“預覽”產生二維碼，打開微信掃描，就可以看到了。
總結
以上就是這篇文章的全部內容了，希望開發者們能從中獲取思路，能幫助到大家更好的開發微信小程式。
相關推薦：
以上是微信小程式開發入門實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
