微信小程式怎麼申請 從頭開始做一個微信小程式教程

高洛峰
發布: 2017-02-21 09:55:15
原創
1835 人瀏覽過

等來近一年,微信小程式終於正式發布了,對於開發者朋友來說,今後都可以申請創建自己的小程式。那麼微信小程式怎麼申請呢?以下「電腦百事網」小編詳細分享下從零開始做一個微信小程式的實戰開發教程,希望操作步驟,對初期開發者會有所幫助。

微信小程式申請前的準備:

首先,你需要註冊一個小程式帳號。需要用一個沒註冊過公眾號碼的信箱註冊。註冊過程中需要很多認證,比較繁瑣。如果暫時只是試水、沒有發布的打算,那麼只要完成基本資訊填寫就可以,不需要完成微信認證。

之後,就可以在公眾平台使用註冊的帳戶進行登入。

然後,在主頁面左邊列表中點選設置,再設定頁面中選開發設置,就可以看到AppID。而AppID 可以用於在開發工具中進行登記,使用開發工具的進階功能。你可以到官網下載開發工具。

開始專案:

開啟開發者工具,選擇小程式選項,然後直接點選「新增專案」按鈕。我們可以在這個步驟,填入剛才註冊的時候所使用的 AppID。

如果專案目錄中的檔案是空資料夾,會提示是否建立 quick start 專案。

選擇“是”,開發者工具會幫助我們在開發目錄裡產生一個簡單的 Demo。

這個 Demo 擁有一個完整的小程式的大概框架。

1. 框架

我們先看一下官方提供的 Demo 含有的目錄:

app.js:小程式邏輯、生命週期、全域變數。

app.json:小程式公共設定、導覽列顏色等,不可以註解。

app.wxss:小程式公共樣式,類似 CSS 。

小程式頁面構成類似這樣:

每一個小程式頁面是由同路徑下同名的四個不同後綴檔案的組成,如:index.js、index.wxml、index .wxss、index.json

*​​&*微信小程式中的每一個頁面的路徑和頁面檔名,都需要寫在app.json的pages中,且pages數組中的第一個頁面是小程序的首頁。

這四個檔案依照功能可以分成三個部分:

設定:json 檔案

邏輯層:js 檔案

視圖層:wxss. wxml 檔案

在iOS 上,小程式的邏輯程式碼運行於 JavaScriptCore 中,而在 Android上,這個任務則是交給X5 核心來完成。

在 開發工具上, 小程式的 JavaScript 程式碼是執行在 NW.js(Chrome 核心) 中。這也導致開發工具上的效果跟實際效果有所出入。

2. 元件

微信提供了許多元件,主要分為八種:

這其中,包含了view、scroll-view、button、form等普通常用的元件,也提供了地圖mapcanvas

元件主要屬於視圖層,透過WXML 來進行結構佈局,類似 HTML。樣式則透過 WXSS 來定義和修改,它的語法和使用近似 CSS。

元件使用語法實例:

<><>

3. API

網路

媒體

資料

位置*&​​

設備

介面

開發介面

網路請求介麵包含了普通的HTTPS 請求,支援上傳、下載、Socket,基本上滿足了我們開發中所需的網路需求。

這些 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. 模擬器調試

我們可以在微信提供的開發者工具中,使用模擬器查看小程式運行的效果。

之前我們提過,小程式的運作底層​​不同,這也導致在模擬器上的效果,會與在手機上運作有些差異。

2. 真機調試

在左邊的選項欄中,選擇項目,然後點預覽會生產一個二維碼,用管理員微信號掃一掃,就可以在真機上看實際效果。

實戰:跑步小程式

真機運作截圖(運行於 iPhone 7,微信版本:6.3.30):

先實作一個計時器進行計時,透過wx.getLocation取得座標,把獲取到的座標存在一個陣列中,透過座標每隔一段時間取得里程,進行累加得到總里程,同時也透過座標點進行連線。存在的問題:

因為目前找不到在地圖上畫連線的方法,所以採用了在地圖上貼小紅點圖的方法顯示大概跑步路徑,路徑比較粗糙;

雖然採用了API 裡面的火星座標GCJ02 類型,但是取得的座標跟國際座標差不多,依然存在偏差。

我已經把全部程式碼放在 GitHub 上,大家可以下載來看看或先 Star 起來,我之後還會再進行一些優化更新。現在只是一個學習 Demo,大家溝通學習,實際應用還需更多優化。

更多微信小程式怎麼申請 從零開始做一個微信小程式教學相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!