這篇“微信小程序入門開發(fā)示例分析”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“微信小程序入門開發(fā)示例分析”文章吧。
寶豐網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)公司于2013年創(chuàng)立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運(yùn)維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。
一、注冊小程序賬號
1、進(jìn)入微信公眾平臺，注冊小程序賬號，根據(jù)提示填寫對應(yīng)的信息即可。
2、注冊成功后進(jìn)入首頁，在 小程序發(fā)布流程->小程序開發(fā)與管理->配置服務(wù)器中，點擊“開發(fā)者設(shè)置”。
3、會獲得一個AppID，記錄AppID，后面創(chuàng)建項目時會用到。
注意：如果要以非管理員微信號在手機(jī)上體驗該小程序，那么我們還需要操作“綁定開發(fā)者”。即在“用戶身份”-“開發(fā)者”模塊，綁定上需要體驗該小程序的微信號。本教程默認(rèn)注冊帳號、體驗都是使用管理員微信號
二、下載微信web開發(fā)者工具
為了幫助開發(fā)者簡單和高效地開發(fā)，微信小程序推出了全新的開發(fā)者工具 ，集成了開發(fā)調(diào)試、代碼編輯及程序發(fā)布等功能。
1、下載頁面：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715
根據(jù)系統(tǒng)，選擇對應(yīng)的工具版本下載
2、工具包含編輯、調(diào)試和項目三個頁卡：
（1）編輯區(qū)可以對當(dāng)前項目進(jìn)行代碼編寫和文件的添加、刪除以及重命名等基本操作
（2）程序調(diào)試主要有三大功能區(qū)：模擬器、調(diào)試工具和小程序操作區(qū)
（3）項目頁卡主要有三大功能：顯示當(dāng)前項目細(xì)節(jié)、提交預(yù)覽和提交上傳和項目配置
注意：啟動工具時，開發(fā)者需要使用已在后臺綁定成功的微信號掃描二維碼登錄，后續(xù)所有的操作都會基于這個微信帳號
三、編寫小程序?qū)嵗?/strong>
1、實例目錄結(jié)構(gòu)
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是小程序的腳本代碼（必須），可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量，調(diào)用框架提供的豐富的 API。
重慶分公司
重慶分公司
App({
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
},
globalData: {
hasLogin: false
}
})app.json是對整個小程序的全局配置（必須），用來對微信小程序進(jìn)行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多tab等。接受一個數(shù)組，每一項都是字符串，來指定小程序由哪些頁面組成。微信小程序中的每一個頁面的【路徑+頁面名】都需要寫在app.json的pages中，且pages中的第一個頁面是小程序的首頁。
{
"pages":[
"page/index/index"
],
"window":{
"navigationBarTextStyle": "black",
"navigationBarTitleText": "歡迎頁",
"navigationBarBackgroundColor": "#fbf9fe",
"backgroundColor": "#fbf9fe"
},
"debug": true
}app.wxss是整個小程序的公共樣式表（非必須）。
page {
background-color: #fbf9fe;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
justify-content: space-between;
}（2）page是用來描述頁面，一個頁面由四個文件組成，這里以首頁index為例，每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁面結(jié)構(gòu)文件。
index.js 是頁面的腳本文件（必須），在這個文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)、獲取小程序?qū)嵗暶鞑⑻幚頂?shù)據(jù)，響應(yīng)頁面交互事件等。
Page({
data: {
title:'小程序',
desc:'Hello World!'
}
})index.wxml是頁面結(jié)構(gòu)文件（必須）。
