首頁小程序開發(fā) 正文

官方微信小程序開發(fā)教程（微信小程序開發(fā)小程序）

小程序開發(fā) 2023-04-14T03:21:10 4651

今天給各位分享官方微信小程序開發(fā)教程的知識(shí)，其中也會(huì)對(duì)微信小程序開發(fā)小程序進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！本文目錄一覽： 1、微信小程序開發(fā)教程

今天給各位分享官方微信小程序開發(fā)教程的知識(shí)，其中也會(huì)對(duì)微信小程序開發(fā)小程序進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！

微信小程序開發(fā)教程

微信小程序開發(fā)教程如下：

工具/原料

小新air13

Windows10

百度瀏覽器8.6.3

1、點(diǎn)擊立即注冊(cè)

在微信公眾平臺(tái)中，找到界面右上角的立即注冊(cè)按鈕，點(diǎn)銀含擊它。

2、點(diǎn)擊小程序

在新界面中，找到小程序老桐選項(xiàng)，點(diǎn)擊它進(jìn)入新的界鋒含笑面里。

3、點(diǎn)擊注冊(cè)

在小程序界面中，填寫信息，點(diǎn)擊注冊(cè)，即可開始制作微信小程序。

官方微信小程序開發(fā)教程（微信小程序開發(fā)小程序）

微信小程序開發(fā)工具使用步驟？

1、首先要下載微信官方的微信Web開發(fā)者工具。打開微信公眾平臺(tái)，找到右下方的小程序模塊，點(diǎn)擊“開發(fā)”按鈕

2、點(diǎn)擊頂部導(dǎo)航欄的“工具”按鈕，在新頁面的左側(cè)欄中找到“下載”?？梢钥吹?，開發(fā)工具提供Windows32位、Windows64位和Mac三個(gè)版本?？筛鶕?jù)實(shí)際情況，選擇適合自己電腦的開發(fā)工具。

3、安裝后，就可以直接啟動(dòng)開發(fā)者工具。如果是首次啟動(dòng)開發(fā)者工具，則需要使用開啟判發(fā)者的微信號(hào)掃碼登錄。登陸后，點(diǎn)擊“添加項(xiàng)目”按鈕，填寫APPID（如果沒有，則點(diǎn)擊無APPID）和項(xiàng)目名稱。接著，在項(xiàng)目目錄中點(diǎn)擊“選擇”，新建一個(gè)文件夾作為新的項(xiàng)目目錄。然后再次點(diǎn)擊“添加項(xiàng)目”，就可以新建出一個(gè)微信小程序項(xiàng)目了。

4、微信小程序開發(fā)者工具共分成“編輯”、“調(diào)試”和“項(xiàng)目”三個(gè)部分。

編輯：編輯和修改小程序的代碼。

調(diào)試：顯示小程序代碼錯(cuò)誤和警告，便于調(diào)試游旁臘代碼錯(cuò)誤。

項(xiàng)目：用于查看小程序的屬性、修改小程序配置，以及提交小程序代碼至微信服務(wù)器。

開發(fā)工具還神滑提供簡(jiǎn)單的模擬器（頁面左側(cè)），開發(fā)者可以使用模擬器在電腦上模擬用戶點(diǎn)擊及使用，提供后臺(tái)情況模擬、多媒體播放器調(diào)試、緩存數(shù)據(jù)處理等功能。

5、懂技術(shù)的程序員到這一步就可以自己開發(fā)了。而不懂編程的小白，可以登錄微信小程序開發(fā)平臺(tái)“即速應(yīng)用”官方網(wǎng)站進(jìn)行小程序的制作。里面有大量的小程序模板，根據(jù)自己的需求選擇一個(gè)模板進(jìn)行制作即可。

6、制作完成后，點(diǎn)擊“生成按鈕”。然后選擇“小程序打包”，下載小程序的標(biāo)準(zhǔn)代碼包。

7、回到在微信Web開發(fā)工具中，在“項(xiàng)目目錄”這一欄選擇下載好的代碼包，打開后就可以看到小程序的預(yù)覽效果了。

8、在“項(xiàng)目”頁面中，開發(fā)者可以查看小程序的基本屬性，也可以進(jìn)行真機(jī)預(yù)覽調(diào)試，或向微信服務(wù)器提交一個(gè)新版本的小程序代碼。服務(wù)器收到代碼后，管理員就可以通過公眾平臺(tái)，將新版本提交審核了。

微信小程序怎么開發(fā)

工具使用教程：

1、網(wǎng)頁搜索小程序平臺(tái)，進(jìn)入小程序搭建系統(tǒng)，如圖1。

2、進(jìn)入平臺(tái)右上角點(diǎn)擊“注冊(cè)”按鈕，物皮鄭如圖2。

3、編輯一個(gè)用戶名、密碼，輸入驗(yàn)證碼并確認(rèn)注冊(cè)協(xié)議，如圖3。

4、編輯一個(gè)小程序名字、錄入手機(jī)號(hào)碼和找回密碼的郵箱賬號(hào)，如圖4。

5、數(shù)字產(chǎn)品類型選擇界面，選擇小程序，如圖5。

6、左側(cè)選擇官網(wǎng)或商城，官網(wǎng)為展示型小程序模板。根據(jù)行業(yè)選擇小程序模板，預(yù)覽模板后，點(diǎn)擊選用并點(diǎn)擊確認(rèn)按鈕，如圖6、圖7。

7、點(diǎn)擊小程序模板頭部區(qū)域，彈出鉛筆圖標(biāo)后，進(jìn)入編輯框替換logo，該模板logo為透明色，請(qǐng)按照系統(tǒng)提示尺寸進(jìn)行上傳，如圖8、圖9。

8、鼠標(biāo)點(diǎn)擊首頁輪播握肆圖，彈出鉛筆圖標(biāo)后，點(diǎn)擊進(jìn)入編輯框，按照系統(tǒng)提示尺寸，替換圖片如圖10、圖11和圖12。

9、小程序?qū)Ш綌?shù)量可以根據(jù)實(shí)際需求進(jìn)行增減。如果是商城類小程序，導(dǎo)航分類一般對(duì)應(yīng)產(chǎn)品類型，如圖13、圖14和圖15。

10、上傳產(chǎn)品后，鼠標(biāo)點(diǎn)擊商品板塊，彈出鉛筆圖標(biāo)后進(jìn)去編輯框，設(shè)置商品按條件自動(dòng)調(diào)用，該功能配置好以后，新增產(chǎn)品會(huì)自動(dòng)出現(xiàn)在各個(gè)對(duì)應(yīng)板塊，如圖16、圖17。

11、首頁界面設(shè)計(jì)完成以后，點(diǎn)擊左側(cè)頁面、添加欄目按鈕繼續(xù)設(shè)計(jì)其他罩頌頁面，比如展示型小程序常用的關(guān)于我們、聯(lián)系我們、品牌特色等頁面，在設(shè)計(jì)過程中，可以從素材、模塊里拖拽功能插件到頁面里，如圖18、圖19和圖20。

12、到這一步小程序基本設(shè)計(jì)完成，可以溝通平臺(tái)協(xié)助配置各類系統(tǒng)接口，提交騰訊審核發(fā)布。

微信小程序開發(fā)教程？

1.進(jìn)入微信公眾平臺(tái)，注冊(cè)小程序賬號(hào)，根據(jù)提示填寫對(duì)應(yīng)的信息即可。

2.注冊(cè)成功后進(jìn)入首頁，在小程序發(fā)布流程-小程序開發(fā)與管理-配置服務(wù)器中，點(diǎn)擊“開發(fā)者設(shè)置”。

3.會(huì)獲得一個(gè)AppID，記錄AppID，后面創(chuàng)建項(xiàng)目時(shí)會(huì)用到。

注意：如果要以非管理員微信號(hào)在手機(jī)上體驗(yàn)該小程序，那么我們還需要操作“綁定開發(fā)者”。即在“用戶身份”-“開發(fā)者”模塊，綁定上需要體驗(yàn)該小程序的微信號(hào)。本教程默認(rèn)注冊(cè)帳號(hào)、體驗(yàn)都是使用管理員微信號(hào)

二、下載微信web開發(fā)者工具

為了幫助開發(fā)者簡(jiǎn)單和高效地開發(fā)，微信小程序推出了全新的開發(fā)者工具，集成了開發(fā)調(diào)試、代碼編輯及程序發(fā)布等功能。1.下載頁面：?t=201715根據(jù)系統(tǒng)，選擇對(duì)應(yīng)的工具版本下載2.工具包含編輯、調(diào)試和項(xiàng)目三個(gè)頁卡：（1）編輯區(qū)可以對(duì)當(dāng)前項(xiàng)目進(jìn)行代碼編寫和文件的添加、刪除以及重命名等基本操作（2）程序調(diào)試主要有三大功能區(qū)：模擬器、調(diào)試工具和小程序操作區(qū)（3）項(xiàng)目頁卡主要有三大功能：顯示當(dāng)前項(xiàng)目細(xì)節(jié)、提交鬧消散預(yù)覽和提交上傳和項(xiàng)目配置

注意：?jiǎn)?dòng)工具時(shí)，開發(fā)者需要使用已在后臺(tái)綁定成功的微信號(hào)掃描二維碼登錄，后續(xù)所有的操作都會(huì)基于這個(gè)微信帳號(hào)

三、編寫小程序?qū)嵗?/p>

1.實(shí)例目錄結(jié)構(gòu)

2.實(shí)例文件說明及源碼一個(gè)小程序包含一個(gè)app（主體部分）和多個(gè)page（頁面）（1）app是用來描述整體程序的，由三個(gè)文件組成，.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，必須放在項(xiàng)目的根目錄。app.js是小程序的腳本代碼（必須），可以在這個(gè)文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量，調(diào)用框架提供的豐富的API。

app.json是對(duì)整個(gè)小程序的全局配置（必液氏須），用來對(duì)微信小程序進(jìn)行全局配置，決定頁橋洞面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多tab等。接受一個(gè)數(shù)組，每一項(xiàng)都是字符串，來指定小程序由哪些頁面組成。微信小程序中的每一個(gè)頁面的【路徑+頁面名】都需要寫在app.json的pages中，且pages中的第一個(gè)頁面是小程序的首頁。

app.wxss是整個(gè)小程序的公共樣式表（非必須）。

（2）page是用來描述頁面，一個(gè)頁面由四個(gè)文件組成，這里以首頁index為例，每一個(gè)小程序頁面是由同路徑下同名的四個(gè)不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁面結(jié)構(gòu)文件。index.js是頁面的腳本文件（必須），在這個(gè)文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)、獲取小程序?qū)嵗?，聲明并處理?shù)據(jù)，響應(yīng)頁面交互事件等。

index.wxml是頁面結(jié)構(gòu)文件（必須）。

index.wxss是頁面樣式表文件（非必須），當(dāng)有頁面樣式表時(shí)，頁面的樣式表中的樣式規(guī)則會(huì)層疊覆蓋app.wxss中的樣式規(guī)則。如果不指定頁面的樣式表，也可以在頁面的結(jié)構(gòu)文件中直接使用app.wxss中指定的樣式規(guī)則。

index.json是頁面配置文件（非必須），當(dāng)有頁面的配置文件時(shí)，配置項(xiàng)在該頁面會(huì)覆蓋app.json的window中相同的配置項(xiàng)。如果沒有指定的頁面配置文件，則在該頁面直接使用app.json中的默認(rèn)配置。這里無需指定。Tips：a.為了方便開發(fā)者減少配置項(xiàng)，小程序規(guī)定描述頁面的這四個(gè)文件必須具有相同的路徑與文件名b.小程序提供了豐富的API，可以根據(jù)自己需求選擇

四、測(cè)試小程序?qū)嵗?/p>

1.打開微信web開發(fā)者工具，選擇“本地小程序項(xiàng)目”。2.填寫小程序的AppID，項(xiàng)目名稱，選擇第三步寫好的小程序?qū)嵗募A，點(diǎn)擊“添加項(xiàng)目”。3.如果出現(xiàn)如下效果，那么恭喜你，你的第一個(gè)小程序項(xiàng)目已經(jīng)編寫成功了！點(diǎn)擊左側(cè)邊欄“編輯”，還可以在右側(cè)編輯窗口直接對(duì)代碼進(jìn)行修改，保存（CTRL+S）后刷新（F5）即可生效。

4.如果想看小程序項(xiàng)目在手機(jī)上的效果，點(diǎn)擊左側(cè)邊欄“項(xiàng)目”，點(diǎn)擊“預(yù)覽”生成二維碼，打開微信掃描，就可以看到了。