微信小程式正式上線，很多地方在刷屏，我們可以看見很多人都在使用微信小程序，但是不少用戶不會(huì)微信小程序怎麼開發(fā)？以下帶來微信小程式開發(fā)實(shí)戰(zhàn)教程，手把手教你開發(fā)跑步微信小程序，一起來了解下吧。

• 軟體名稱：

• 微信小程式開發(fā)工具2017.09.01 (1.01.170901) ?32位元官方安裝套件

• 軟體大小：

• 38MB

• 更新時(shí)間：

• 2017-09-01

#一、準(zhǔn)備工作

##1、註冊一個(gè)小程式帳號(hào)，得用一個(gè)沒註冊過公眾號(hào)碼的信箱註冊。

2、註冊過程中需要很多認(rèn)證，有很多認(rèn)證，比較繁瑣，如果暫時(shí)只是開發(fā)測試，不進(jìn)行提審、發(fā)布的話，只要完成營業(yè)執(zhí)照號(hào)填寫就可以了，不需要完成微信認(rèn)證。

3、註冊完帳號(hào)，登錄，在主頁面左邊列表中點(diǎn)選設(shè)置，然後再設(shè)定頁面中選開發(fā)設(shè)定就可以看到AppID，用於登入開發(fā)工具。

主頁面

#設(shè)定頁面

二、開發(fā)工具

可以到官網(wǎng)下載開發(fā)工具下載

#開發(fā)工具編輯頁面

三、開始專案

開啟開發(fā)者工具，選擇小程式選項(xiàng)，到達(dá)新增專案頁面

這時(shí)候在前面設(shè)定頁面的AppId就用到了。

如果專案目錄中的檔案是個(gè)空資料夾，會(huì)提示是否建立quick start專案。

選擇“是”，開發(fā)者工具會(huì)幫助我們在開發(fā)目錄裡產(chǎn)生一個(gè)簡單的demo。

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

1、框架

先看下一目錄：

app.js:小程式邏輯，生命週期，，全域變數(shù)

app.json:小程式公共設(shè)置，導(dǎo)覽列顏色等，不可以註解

app.wxss :小程式公共樣式，類別CSS。

小程式頁面構(gòu)成：

#頁構(gòu)成

每一個(gè)小程式頁面是由同路徑下同名的四個(gè)不同後綴檔案的組成，如：index.js、index.wxml、index.wxss、index.json。

微信小程式中的每一個(gè)頁面的【路徑頁面名稱】都需要寫在app.json的pages中，而pages中的第一個(gè)頁面是小程式的首頁。

路徑

這四個(gè)檔案依照功能可以分成三個(gè)部分：

配置：json文件

邏輯層：js檔案

視圖層：wxss.wxml檔案

#在iOS上，小程式的javascript程式碼是運(yùn)行在JavaScriptCore中

#在Android上，小程式的javascript程式碼是透過X5核心來解析

在開發(fā)工具上，小程式的javascript程式碼是運(yùn)行在nwjs（chrome核心）。所以開發(fā)工具上的效果跟實(shí)際效果有所出入。

2、元件

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

檢視容器、

基礎(chǔ)內(nèi)容、

表單元件、

操作回饋、

導(dǎo)覽、

媒體元件、

#地圖、

畫布

包含view、scroll-view、button、form等普通常用的元件，也提供了地圖map、畫布canvas。

元件主要屬於視圖層，透過wxml來進(jìn)行結(jié)構(gòu)佈局，類似html。透過wxss修改樣式，類似css。

元件使用語法實(shí)例：

這是一個(gè)普通視圖樣式修改過的視圖更多的元件以及相關(guān)使用方法可以到官方文件-元件查看

#3、API

網(wǎng)路

媒體

資料

#裝置

介面

開發(fā)介面

其中網(wǎng)路請求的使用必須先到公眾平臺(tái)登入小程式帳號(hào)，在設(shè)定頁面那裡，設(shè)定允許存取的域名，網(wǎng)路請求包含了普通的http請求、支援上傳、下載、socket?；旧蠞M足了我們開發(fā)中所需的網(wǎng)路需求。

這些API屬於邏輯層，寫在js檔案中，

使用實(shí)例:

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的使用方法。

4、編譯運(yùn)行

1、模擬器

可以在模擬器上看效果，上面降到了運(yùn)行底層不同，效果跟在手機(jī)上運(yùn)行有些差異

#2、真機(jī)

在左邊的選項(xiàng)列中，選擇項(xiàng)目，然後點(diǎn)預(yù)覽會(huì)生產(chǎn)一個(gè)二維碼，用管理員微信號(hào)掃一掃就可以在真機(jī)上看實(shí)際效果

實(shí)踐--跑步小程式。

真機(jī)運(yùn)行截圖（運(yùn)行於iPhone7，微信版本：6.3.30）：

home.jpeg

run.jpeg

#功能：能夠計(jì)算里程、時(shí)間、即時(shí)取得跑步路徑（有些粗糙）

想法：主要使用了微信小程式的取得位置APIwx.getLocation()和地圖元件map。

先實(shí)作一個(gè)計(jì)時(shí)器進(jìn)行計(jì)時(shí)，透過wx.getLocation()取得座標(biāo)，把取得到的座標(biāo)存在一個(gè)陣列中，透過座標(biāo)每隔一段時(shí)間取得里程，進(jìn)行累加得到總里程，同時(shí)也透過座標(biāo)點(diǎn)進(jìn)行連線

存在的問題：

#1、因?yàn)槟壳罢也坏皆诘貓D上畫連線的方法，所以採用了在地圖上貼小紅點(diǎn)圖的方法顯示大概跑步路徑，路徑比較粗糙。

2、雖然採用了API裡面的火星座標(biāo)gcj02類型，但是取得的座標(biāo)跟國際座標(biāo)差不多，依然存在偏差。

核心程式碼：

我把全部程式碼放在github上-weChatApp-Run，可以下載來看看或先star收藏，我以後還會(huì)進(jìn)行一些優(yōu)化更新。現(xiàn)在只是一個(gè)學(xué)習(xí)Demo，大家溝通學(xué)習(xí)，實(shí)際應(yīng)用還需更多優(yōu)化。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)！

相關(guān)推薦：

微信小程序 高德地圖SDK的解析

以上是微信小程式開發(fā)之跑步微信小程式的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！