等來近一年,微信小程式終於正式發(fā)布了,對於開發(fā)者朋友來說,今後都可以申請創(chuàng)建自己的小程式。那麼微信小程式怎麼申請呢?以下「電腦百事網(wǎng)」小編詳細分享下從零開始做一個微信小程式的實戰(zhàn)開發(fā)教程,希望操作步驟,對初期開發(fā)者會有所幫助。
微信小程式申請前的準備:
首先,你需要註冊一個小程式帳號。需要用一個沒註冊過公眾號碼的信箱註冊。註冊過程中需要很多認證,比較繁瑣。如果暫時只是試水、沒有發(fā)布的打算,那麼只要完成基本資訊填寫就可以,不需要完成微信認證。
之後,就可以在公眾平臺使用註冊的帳戶進行登入。
然後,在主頁面左邊列表中點選設(shè)置,再設(shè)定頁面中選開發(fā)設(shè)置,就可以看到AppID。而AppID 可以用於在開發(fā)工具中進行登記,使用開發(fā)工具的進階功能。你可以到官網(wǎng)下載開發(fā)工具。
開始專案:
開啟開發(fā)者工具,選擇小程式選項,然後直接點選「新增專案」按鈕。我們可以在這個步驟,填入剛才註冊的時候所使用的?AppID。
如果專案目錄中的檔案是空資料夾,會提示是否建立 quick start 專案。
選擇“是”,開發(fā)者工具會幫助我們在開發(fā)目錄裡產(chǎn)生一個簡單的 Demo。
這個 Demo 擁有一個完整的小程式的大概框架。
1. 框架
我們先看一下官方提供的 Demo 含有的目錄:
app.js:小程式邏輯、生命週期、全域變數(shù)。
app.json:小程式公共設(shè)定、導(dǎo)覽列顏色等,不可以註解。
app.wxss:小程式公共樣式,類似 CSS 。
小程式頁面構(gòu)成類似這樣:
每一個小程式頁面是由同路徑下同名的四個不同後綴檔案的組成,如:index.js、index.wxml、index .wxss、index.json
*??&*微信小程式中的每一個頁面的路徑和頁面檔名,都需要寫在app.json的pages中,且pages數(shù)組中的第一個頁面是小程序的首頁。 這四個檔案依照功能可以分成三個部分:設(shè)定:json?檔案邏輯層:js?檔案視圖層:wxss. wxml?檔案在iOS 上,小程式的邏輯程式碼運行於?JavaScriptCore 中,而在?Android上,這個任務(wù)則是交給X5 核心來完成。 在 開發(fā)工具上, 小程式的?JavaScript?程式碼是執(zhí)行在 NW.js(Chrome?核心) 中。這也導(dǎo)致開發(fā)工具上的效果跟實際效果有所出入。 2. 元件微信提供了許多元件,主要分為八種:這其中,包含了view、scroll-view、button、form等普通常用的元件,也提供了地圖mapcanvas元件主要屬於視圖層,透過WXML 來進行結(jié)構(gòu)佈局,類似?HTML。樣式則透過 WXSS 來定義和修改,它的語法和使用近似 CSS。 元件使用語法實例:<><>3. API網(wǎng)路媒體資料位置*&??設(shè)備
介面
開發(fā)介面
網(wǎng)路請求介麵包含了普通的HTTPS 請求,支援上傳、下載、Socket,基本上滿足了我們開發(fā)中所需的網(wǎng)路需求。
這些 API 屬於邏輯層,寫在 JS 邏輯檔中。
使用實例:
wx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res. speed var accuracy = res.accuracy } })
可以到官方文件– API 查看其它API 的使用方法。
編譯運行
1. 模擬器調(diào)試
我們可以在微信提供的開發(fā)者工具中,使用模擬器查看小程式運行的效果。
之前我們提過,小程式的運作底層??不同,這也導(dǎo)致在模擬器上的效果,會與在手機上運作有些差異。
2. 真機調(diào)試
在左邊的選項欄中,選擇項目,然後點預(yù)覽會生產(chǎn)一個二維碼,用管理員微信號掃一掃,就可以在真機上看實際效果。
實戰(zhàn):跑步小程式
真機運作截圖(運行於?iPhone?7,微信版本:6.3.30):
先實作一個計時器進行計時,透過wx.getLocation取得座標,把獲取到的座標存在一個陣列中,透過座標每隔一段時間取得里程,進行累加得到總里程,同時也透過座標點進行連線。存在的問題:
因為目前找不到在地圖上畫連線的方法,所以採用了在地圖上貼小紅點圖的方法顯示大概跑步路徑,路徑比較粗糙;
雖然採用了API 裡面的火星座標GCJ02 類型,但是取得的座標跟國際座標差不多,依然存在偏差。
我已經(jīng)把全部程式碼放在?GitHub?上,大家可以下載來看看或先 Star 起來,我之後還會再進行一些優(yōu)化更新。現(xiàn)在只是一個學(xué)習(xí) Demo,大家溝通學(xué)習(xí),實際應(yīng)用還需更多優(yōu)化。
更多微信小程式怎麼申請 從零開始做一個微信小程式教學(xué)相關(guān)文章請關(guān)注PHP中文網(wǎng)!

熱AI工具

Undress AI Tool
免費脫衣圖片

Undresser.AI Undress
人工智慧驅(qū)動的應(yīng)用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

熱門話題

閒魚官方微信小程式悄悄上線,在小程式中可以發(fā)布閒置與買家/賣家私訊交流、查看個人資料及訂單、搜尋物品等,有用好奇閒魚微信小程式叫什麼,現(xiàn)在快來看一下。閒魚微信小程式叫什麼答案:閒魚,閒置交易二手買賣估價回收。 1、在小程式中可以發(fā)布閒置、與買家/賣家私訊交流、查看個人資料及訂單、搜尋指定物品等功能;2、在小程式的頁面中有首頁、附近、發(fā)閒置、訊息、我的5項功能;3、想要使用的話必要要開通微信支付才可以購買;

實現(xiàn)微信小程式中的圖片濾鏡效果隨著社群媒體應(yīng)用程式的流行,人們越來越喜歡在照片中應(yīng)用濾鏡效果,以增強照片的藝術(shù)效果和吸引力。在微信小程式中也可以實現(xiàn)圖片濾鏡效果,為使用者提供更多有趣和創(chuàng)意的照片編輯功能。本文將介紹如何在微信小程式中實現(xiàn)圖片濾鏡效果,並提供具體的程式碼範例。首先,我們需要在微信小程式中使用canvas元件來載入和編輯圖片。 canvas元件可以在頁面

實現(xiàn)微信小程式中的下拉式選單效果,需要具體程式碼範例隨著行動互聯(lián)網(wǎng)的普及,微信小程式成為了網(wǎng)路開發(fā)的重要一環(huán),越來越多的人開始關(guān)注和使用微信小程式。微信小程式的開發(fā)相比傳統(tǒng)的APP開發(fā)更加簡單快捷,但也需要掌握一定的開發(fā)技巧。在微信小程式的開發(fā)中,下拉式選單是一個常見的UI元件,實現(xiàn)了更好的使用者操作體驗。本文將詳細介紹如何在微信小程式中實現(xiàn)下拉式選單效果,並提供具

閒魚官方微信小程式已經(jīng)悄悄上線,它為用戶提供了一個便捷的平臺,讓你可以輕鬆地發(fā)布和交易閒置物品。在小程式中,你可以與買家或賣家進行私訊交流,查看個人資料和訂單,以及搜尋你想要的物品。那麼閒魚在微信小程式中究竟叫什麼呢,這篇教學(xué)攻略將為您詳細介紹,想要了解的用戶們快來跟著本文繼續(xù)閱讀吧!閒魚微信小程式叫什麼答案:閒魚,閒置交易二手買賣估價回收。 1、在小程式中可以發(fā)布閒置、與買家/賣家私訊交流、查看個人資料及訂單、搜尋指定物品等功能;2、在小程式的頁面中有首頁、附近、發(fā)閒置、訊息、我的5項功能;3、

微信小程式實現(xiàn)圖片上傳功能隨著行動網(wǎng)路的發(fā)展,微信小程式已經(jīng)成為了人們生活中不可或缺的一部分。微信小程式不僅提供了豐富的應(yīng)用場景,還支援開發(fā)者自訂功能,其中包括圖片上傳功能。本文將介紹如何在微信小程式中實作圖片上傳功能,並提供具體的程式碼範例。一、前期準備工作在開始編寫程式碼之前,我們需要先下載並安裝微信開發(fā)者工具,並註冊成為微信開發(fā)者。同時,也需要了解微信

使用微信小程式實現(xiàn)輪播圖切換效果微信小程式是一種輕量級的應(yīng)用程序,具有簡單、高效的開發(fā)和使用特點。在微信小程式中,實作輪播圖切換效果是常見的需求。本文將介紹如何使用微信小程式實現(xiàn)輪播圖切換效果,並給出具體的程式碼範例。首先,在微信小程式的頁面檔案中,新增一個輪播圖元件。例如,可以使用<swiper>標籤來實現(xiàn)輪播圖的切換效果。在該組件中,可以透過b

實現(xiàn)微信小程式中的圖片旋轉(zhuǎn)效果,需要具體程式碼範例微信小程式是一種輕量級的應(yīng)用程序,為用戶提供了豐富的功能和良好的用戶體驗。在小程式中,開發(fā)者可以利用各種元件和API來實現(xiàn)各種效果。其中,圖片旋轉(zhuǎn)效果是一種常見的動畫效果,可以為小程式增添趣味性和視覺效果。在微信小程式中實作圖片旋轉(zhuǎn)效果,需要使用小程式提供的動畫API。以下是一個具體的程式碼範例,展示如何在小程

實作微信小程式中的滑動刪除功能,需要具體程式碼範例隨著微信小程式的流行,開發(fā)者在開發(fā)過程中經(jīng)常會遇到一些常見功能的實作問題。其中,滑動刪除功能是常見、常用的功能需求。本文將為大家詳細介紹如何在微信小程式中實現(xiàn)滑動刪除功能,並給出具體的程式碼範例。一、需求分析在微信小程式中,滑動刪除功能的實作涉及以下要點:列表展示:要顯示可滑動刪除的列表,每個列表項目需要包
