微信小程式-從零開始製作一個跑步微信小程式

王小樹發表於2016-11-13

一、準備工作

1、註冊一個小程式賬號，得用一個沒註冊過公眾號的郵箱註冊。
2、註冊過程中需要很多認證，有很多認證，比較繁瑣，如果暫時只是開發測試，不進行提審、釋出的話，只要完成營業執照號填寫就可以了，不需要完成微信認證。
3、註冊完賬號，登入，在主頁面左邊列表中點選設定，然後再設定頁面中選開發設定就可以看到AppID，用於登入開發工具。

主頁面

設定頁面

二、開發工具

可以到官網下載開發工具下載

開發工具

開發工具編輯頁面

三、開始專案

開啟開發者工具，選擇小程式選項，到達新增專案頁面

新增專案

這個時候在前面設定頁面的AppId就用到了。

如果專案目錄中的檔案是個空資料夾，會提示是否建立quick start 專案。
選擇“是”，開發者工具會幫助我們在開發目錄裡生成一個簡單的 demo。
這個Demo擁有一個完整的小程式的大概框架。

1、框架

先看下一目錄：

檔案目錄.png

app.js: 小程式邏輯，生命週期，，全域性變數
app.json: 小程式公共設定，導航欄顏色等，不可以註釋
app.wxss :小程式公共樣式，類CSS 。

小程式頁面構成：

頁面構成

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

葛文佳介紹

微信小程式中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中，且 pages 中的第一個頁面是小程式的首頁。

路徑

這四個檔案按照功能可以分成三個部分：

配置：json 檔案
邏輯層：js檔案
檢視層：wxss.wxml檔案

在 iOS 上，小程式的 javascript 程式碼是執行在 JavaScriptCore 中
在 Android 上，小程式的 javascript 程式碼是通過 X5 核心來解析
在開發工具上，小程式的 javascript 程式碼是執行在 nwjs（chrome核心）中。所以開發工具上的效果跟實際效果有所出入。

2、元件

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

檢視容器、
基礎內容、
表單元件、
操作反饋、
導航、
媒體元件、
地圖、
畫布

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

元件主要屬於檢視層，通過wxml來進行結構佈局，類似於html。通過wxss修改樣式，類似於css。
元件使用語法例項：


這是一個普通檢視樣式修改過的檢視

1 2	這是一個普通檢視樣式修改過的檢視

更多的元件以及相關使用方法可以到官方文件-元件檢視

3、API

網路
媒體
資料
位置
裝置
介面
開發介面

其中網路請求的使用必須先到公眾平臺登入小程式賬號，在設定頁面那裡，設定允許訪問的域名，網路請求包含了普通的http請求、支援上傳、下載、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 
}})

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、編譯執行

1、模擬器
可以在模擬器上看效果，上面降到了執行底層不同，效果跟在手機上執行有些差異

模擬器.png

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

Paste_Image.png

實踐–跑步小程式。

真機執行截圖（執行於iPhone7，微信版本：6.3.30）：

home.jpeg

run.jpeg

slideback.jpeg

slide.jpeg

功能：

能夠計算里程、時間、實時獲取跑步路徑（有些粗糙）

思路：

主要使用了微信小程式的獲取位置APIwx.getLocation()和地圖元件map。
首先實現一個計時器進行計時，通過wx.getLocation()獲取座標，把獲取到的座標存在一個陣列中，通過座標每隔一段時間獲取里程，進行累加得到總里程，同時也通過座標點進行連線
存在的問題：
1、因為目前找不到在地圖上畫連線的方法，所以採用了在地圖上貼小紅點圖的方法顯示大概跑步路徑，路徑比較粗糙。
2、雖然採用了API裡面的火星座標gcj02型別，但是獲取的座標跟國際座標差不多，依然存在著偏差。

核心程式碼：

我把全部程式碼放在github上-weChatApp-Run，可以下載來看看或者先star收藏，我以後還會進行一些優化更新。現在只是一個學習Demo，大家溝通學習，實際應用還需更多優化。

wxml檔案佈局程式碼：

<view class="head" style="flex-direction:row;">
    <image class="icon" src="/resources/joyrun.png" mode="aspectFill"/>
    <button bindtap="openLocation">開啟位置</button>
    <button bindtap="starRun">開始跑步</button>
    <button bindtap="stopRun">暫停跑步</button>
    <text>\n里程數：{{meters}}km</text>
    <text>\n\n時間：{{time}}</text>
</view>

<view class="mainView">
   <map
        class="mapView"
        style="width: 100%; height: 375px;"
        latitude="{{latitude}}"
        longitude="{{longitude}}"
        markers="{{markers}}"
        covers="{{covers}}"
        >
    </map>

</view>

<text>\n里程數：{{meters}}km</text>

</view>

<map

class="mapView"

style="width: 100%; height: 375px;"

latitude="{{latitude}}"

longitude="{{longitude}}"

markers="{{markers}}"

covers="{{covers}}"

</map>

</view>

js檔案邏輯程式碼：

var countTooGetLocation = 0;
var total_micro_second = 0;
var starRun = 0;
var totalSecond  = 0;
var oriMeters = 0.0;
/* 毫秒級倒數計時 */
function count_down(that) {

    if (starRun == 0) {
      return;
    }

    if (countTooGetLocation >= 100) {
      var time = date_format(total_micro_second);
      that.updateTime(time);
    }

      if (countTooGetLocation >= 5000) { //1000為1s
        that.getLocation();
        countTooGetLocation = 0;
      }   


 setTimeout
      setTimeout(function(){
        countTooGetLocation += 10;
    total_micro_second += 10;
        count_down(that);
    }
    ,10
    )
}


// 時間格式化輸出，如03:25:19 86。每10ms都會呼叫一次
function date_format(micro_second) {
      // 秒數
      var second = Math.floor(micro_second / 1000);
      // 小時位
      var hr = Math.floor(second / 3600);
      // 分鐘位
      var min = fill_zero_prefix(Math.floor((second - hr * 3600) / 60));
      // 秒位
    var sec = fill_zero_prefix((second - hr * 3600 - min * 60));// equal to => var sec = second % 60;


    return hr + ":" + min + ":" + sec + " ";
}


function getDistance(lat1, lng1, lat2, lng2) { 
    var dis = 0;
    var radLat1 = toRadians(lat1);
    var radLat2 = toRadians(lat2);
    var deltaLat = radLat1 - radLat2;
    var deltaLng = toRadians(lng1) - toRadians(lng2);
    var dis = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(deltaLat / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(deltaLng / 2), 2)));
    return dis * 6378137;

    function toRadians(d) {  return d * Math.PI / 180;}
} 

function fill_zero_prefix(num) {
    return num < 10 ? "0" + num : num
}

//****************************************************************************************
//****************************************************************************************

Page({
  data: {
    clock: '',
    isLocation:false,
    latitude: 0,
    longitude: 0,
    markers: [],
    covers: [],
    meters: 0.00,
    time: "0:00:00"
  },

//****************************
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉所帶來的引數
    this.getLocation()
    console.log("onLoad")
    count_down(this);
  },
  //****************************
  openLocation:function (){
    wx.getLocation({
      type: 'gcj02', // 預設為 wgs84 返回 gps 座標，gcj02 返回可用於 wx.openLocation 的座標
      success: function(res){
          wx.openLocation({
            latitude: res.latitude, // 緯度，範圍為-90~90，負數表示南緯
            longitude: res.longitude, // 經度，範圍為-180~180，負數表示西經
            scale: 28, // 縮放比例
          })
      },
    })
  },


//****************************
  starRun :function () {
    if (starRun == 1) {
      return;
    }
    starRun = 1;
    count_down(this);
    this.getLocation();
  },


 //****************************
  stopRun:function () {
    starRun = 0;
    count_down(this);
  },


//****************************
  updateTime:function (time) {

    var data = this.data;
    data.time = time;
    this.data = data;
    this.setData ({
      time : time,
    })

  },


//****************************
  getLocation:function () {
    var that = this
    wx.getLocation({

      type: 'gcj02', // 預設為 wgs84 返回 gps 座標，gcj02 返回可用於 wx.openLocation 的座標
      success: function(res){
        console.log("res----------")
        console.log(res)

        //make datas 
        var newCover = {
            latitude: res.latitude,
            longitude: res.longitude,
            iconPath: '/resources/redPoint.png',
          };
        var oriCovers = that.data.covers;

        console.log("oriMeters----------")
        console.log(oriMeters);
        var len = oriCovers.length;
        var lastCover;
        if (len == 0) {
          oriCovers.push(newCover);
        }
        len = oriCovers.length;
        var lastCover = oriCovers[len-1];

        console.log("oriCovers----------")
        console.log(oriCovers,len);

        var newMeters = getDistance(lastCover.latitude,lastCover.longitude,res.latitude,res.longitude)/1000;

        if (newMeters < 0.0015){
            newMeters = 0.0;
        }

        oriMeters = oriMeters + newMeters; 
        console.log("newMeters----------")
        console.log(newMeters);


        var meters = new Number(oriMeters);
        var showMeters = meters.toFixed(2);

        oriCovers.push(newCover);

        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,
          markers: [],
          covers: oriCovers,
          meters:showMeters,
        });
      },
    })
  }

})

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

var countTooGetLocation = 0;

var total_micro_second = 0;

var starRun = 0;

var totalSecond = 0;

var oriMeters = 0.0;

/* 毫秒級倒數計時 */

function count_down(that) {

if (starRun == 0) {

return;

}

if (countTooGetLocation >= 100) {

var time = date_format(total_micro_second);

that.updateTime(time);

}

if (countTooGetLocation >= 5000) { //1000為1s

that.getLocation();

countTooGetLocation = 0;

}

setTimeout

setTimeout(function(){

countTooGetLocation += 10;

total_micro_second += 10;

count_down(that);

}

,10

)

}

// 時間格式化輸出，如03:25:19 86。每10ms都會呼叫一次

function date_format(micro_second) {

// 秒數

var second = Math.floor(micro_second / 1000);

// 小時位

var hr = Math.floor(second / 3600);

// 分鐘位

var min = fill_zero_prefix(Math.floor((second - hr * 3600) / 60));

// 秒位

var sec = fill_zero_prefix((second - hr * 3600 - min * 60));// equal to => var sec = second % 60;

return hr + ":" + min + ":" + sec + " ";

}

function getDistance(lat1, lng1, lat2, lng2) {

var dis = 0;

var radLat1 = toRadians(lat1);

var radLat2 = toRadians(lat2);

var deltaLat = radLat1 - radLat2;

var deltaLng = toRadians(lng1) - toRadians(lng2);

var dis = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(deltaLat / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(deltaLng / 2), 2)));

return dis * 6378137;

function toRadians(d) { return d * Math.PI / 180;}

}

function fill_zero_prefix(num) {

return num < 10 ? "0" + num : num

}

//****************************************************************************************

Page({

data: {

clock: '',

isLocation:false,

latitude: 0,

longitude: 0,

markers: [],

covers: [],

meters: 0.00,

time: "0:00:00"

//****************************

onLoad:function(options){

// 頁面初始化 options為頁面跳轉所帶來的引數

this.getLocation()

console.log("onLoad")

count_down(this);

//****************************

openLocation:function (){

wx.getLocation({

type: 'gcj02', // 預設為 wgs84 返回 gps 座標，gcj02 返回可用於 wx.openLocation 的座標

success: function(res){

wx.openLocation({

latitude: res.latitude, // 緯度，範圍為-90~90，負數表示南緯

longitude: res.longitude, // 經度，範圍為-180~180，負數表示西經

scale: 28, // 縮放比例

})

//****************************

starRun :function () {

if (starRun == 1) {

return;

}

starRun = 1;

count_down(this);

this.getLocation();

//****************************

stopRun:function () {

starRun = 0;

count_down(this);

//****************************

updateTime:function (time) {

var data = this.data;

data.time = time;

this.data = data;

this.setData ({

time : time,

})

//****************************

getLocation:function () {

var that = this

wx.getLocation({

type: 'gcj02', // 預設為 wgs84 返回 gps 座標，gcj02 返回可用於 wx.openLocation 的座標

success: function(res){

console.log("res----------")

console.log(res)

//make datas

var newCover = {

latitude: res.latitude,

longitude: res.longitude,

iconPath: '/resources/redPoint.png',

};

var oriCovers = that.data.covers;

console.log("oriMeters----------")

console.log(oriMeters);

var len = oriCovers.length;

var lastCover;

if (len == 0) {

oriCovers.push(newCover);

}

len = oriCovers.length;

var lastCover = oriCovers[len-1];

console.log("oriCovers----------")

console.log(oriCovers,len);

var newMeters = getDistance(lastCover.latitude,lastCover.longitude,res.latitude,res.longitude)/1000;

if (newMeters < 0.0015){

newMeters = 0.0;

}

oriMeters = oriMeters + newMeters;

console.log("newMeters----------")

console.log(newMeters);

var meters = new Number(oriMeters);

var showMeters = meters.toFixed(2);

oriCovers.push(newCover);

that.setData({

latitude: res.latitude,

longitude: res.longitude,

markers: [],

covers: oriCovers,

meters:showMeters,

});

})

}

})

五、後語

本文是一個快速上手開發的介紹，細節介紹可以檢視官方文件
我的相關全部程式碼放在github上-weChatApp-Run

打賞支援我寫出更多好文章，謝謝！
打賞作者

打賞支援我寫出更多好文章，謝謝！

任選一種支付方式

微信小程式-從零開始製作一個跑步微信小程式

從零開始一個微信小程式版知乎
2018-01-19
微信小程式
微信小程式開發教程-從零開始（1）
2016-10-18
微信小程式
微信小程式開發教程-從零開始（2）
2016-10-18
微信小程式
微信小程式開發教程-從零開始（3）
2016-10-19
微信小程式
花店小程式：如何開通製作鮮花店的微信小程式？
2021-10-09
微信小程式
微信抽獎小程式如何製作？教你快速製作微信公眾號抽獎小程式！
2021-10-14
我的第一個微信小程式（Discuz!! + 微信小程式）
2018-02-01
微信小程式
我的第一個微信小程式（Discuz!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + 微信小程式）
2018-02-01
微信小程式
從零搭建微信小程式後臺
2018-05-16
微信小程式
從零開始學做微信小程式，看這些就夠了！
2016-11-10
微信小程式
微信小程式從零開始開發步驟（三）底部導航欄
2018-03-16
微信小程式
微信小程式第一篇（開始）
2018-08-07
微信小程式
如何製作一個線上預約旅遊的微信小程式？
2021-11-01
微信小程式
微信小程式零基礎入門：什麼是微信小程式
2017-11-21
微信小程式
微信小程式複製功能
2020-11-30
微信小程式
2019最新微信小程式開發製作模板
2019-01-08
微信小程式
微信小程式開發小記
2018-04-21
微信小程式
從0到1上線一個微信小程式
2019-03-01
微信小程式
微信小程式開發
2018-05-03
微信小程式
【小程式】微信小程式開發實踐
2016-11-07
微信小程式
【小程式】微信小程式開發準備
2018-04-19
微信小程式
自己做一個ChatGPT微信小程式(程式碼開源)
2023-03-05
ChatGPT微信小程式
首個微信小程式開發教程！
2016-09-24
微信小程式
微信小程式的機會，拼多多隻是個開始
2018-05-04
微信小程式
擼一個微信天氣小程式
2019-04-01
微信小程式
2024-06-13
微信小程式
多功能微信小程式開發教程，線上製作步驟分享！
2023-05-09
微信小程式
微信小程式小技巧
2018-08-15
微信小程式
一週擼一個 GitHub 微信小程式
2018-11-04
Github微信小程式
微信小程式開發風口下，微信小程式該如何運營？
2020-06-16
微信小程式
微信小程式開發系列二：微信小程式的檢視設計
2018-09-04
微信小程式
微信小程式開發系列教程三：微信小程式的除錯方法
2018-09-06
微信小程式除錯
微信小程式開發系列七：微信小程式的頁面跳轉
2018-09-09
微信小程式
微信小程式開發教程
2021-04-21
微信小程式
微信小程式開發2
2020-09-29
微信小程式
微信開發與小程式
2017-12-19
快速開發微信小程式
2017-12-30
微信小程式
旅遊類微信小程式該如何設計製作？
2021-11-01
微信小程式

微信小程式-從零開始製作一個跑步微信小程式

二、開發工具

三、開始專案

1、框架

小程式頁面構成：

2、元件

3、API

4、編譯執行

實踐–跑步小程式。

真機執行截圖（執行於iPhone7，微信版本：6.3.30）：

功能：

思路：

核心程式碼：

五、後語

打賞支援我寫出更多好文章，謝謝！

相關文章