微信小程式怎麼申請 從零開始做一個微信小程式教程
阿新 • • 發佈:2019-01-28
微信小程式申請前的準備:
首先,你需要註冊一個小程式賬號。需要用一個沒註冊過公眾號的郵箱註冊。註冊過程中需要很多認證,比較繁瑣。如果暫時只是試水、沒有釋出的打算,那麼只要完成基本資訊填寫就可以,不需要完成微信認證。
之後,就可以在公眾平臺使用註冊的帳戶進行登入。
然後,在主頁面左邊列表中點選設定,再設定頁面中選開發設定,就可以看到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. 真機除錯
在左邊的選項欄中,選擇專案,然後點預覽會生產一個二維碼,用管理員微訊號掃一掃,就可以在真機上看實際效果。
首先,你需要註冊一個小程式賬號。需要用一個沒註冊過公眾號的郵箱註冊。註冊過程中需要很多認證,比較繁瑣。如果暫時只是試水、沒有釋出的打算,那麼只要完成基本資訊填寫就可以,不需要完成微信認證。
之後,就可以在公眾平臺使用註冊的帳戶進行登入。
然後,在主頁面左邊列表中點選設定,再設定頁面中選開發設定,就可以看到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. 真機除錯
在左邊的選項欄中,選擇專案,然後點預覽會生產一個二維碼,用管理員微訊號掃一掃,就可以在真機上看實際效果。