Vorwort

Ich habe den gesamten Code auf github-weChatApp-Run gestellt. Sie k?nnen ihn herunterladen, um einen Blick darauf zu werfen, oder ihn zuerst markieren . I Es wird in Zukunft einige Optimierungen Updates geben. Jetzt ist es nur noch eine Lerndemo, jeder kommuniziert und lernt, und die eigentliche Anwendung muss noch weiter optimiert werden.

Text

1. Vorbereitung

1. Um ein Miniprogrammkonto zu registrieren, müssen Sie eine E-Mail-Adresse verwenden, die kein ?ffentliches Konto registriert hat.
2. Der Registrierungsprozess erfordert viele Zertifizierungen, die vorerst relativ umst?ndlich sind, ohne überprüfung oder Freigabe, Sie müssen nur die Gesch?ftslizenznummer ausfüllen . Es ist nicht erforderlich, die WeChat-Zertifizierung abzuschlie?en.
3. Melden Sie sich nach der Registrierung des Kontos an, klicken Sie in der Liste auf der linken Seite der Hauptseite auf Einstellungen und w?hlen Sie dann auf der Einstellungsseite Entwicklungseinstellungen aus, um AppID anzuzeigen, das zum Anmelden verwendet wird Entwicklungstools.

Hauptseite

Einstellungsseite

2. Entwicklungstools

Sie k?nnen Entwicklungstools von der offiziellen Website herunterladen

Entwicklungstools

Bearbeitungsseite für Entwicklungstools

3. Starten Sie das Projekt

?ffnen Sie die Entwicklertools, w?hlen Sie die Option ?Miniprogramm“ und gelangen Sie zur Seite ?Projekt hinzufügen“

Elemente hinzufügen

Zu diesem Zeitpunkt wird das AppId auf der vorherigen Einstellungsseite verwendet.

Wenn es sich bei der Datei im Projektverzeichnis um einen leeren Ordner handelt, werden Sie gefragt, ob Sie ein Schnellstartprojekt erstellen m?chten.
W?hlen Sie ?Ja“. Die Entwicklertools helfen uns dabei, eine einfache Demo im Entwicklungsverzeichnis zu erstellen.
Diese Demo enth?lt einen vollst?ndigen allgemeinen Rahmen des Applets.

1. Framework

Sehen Sie sich zuerst das n?chste Verzeichnis an:

Dateiverzeichnis.png

app.js: Logik des Miniprogramms, Lebenszyklus, globale Variablen
app.json: ?ffentliche Einstellungen des Miniprogramms, Farbe der Navigationsleiste usw. k?nnen nicht kommentiert werden
app.wxss: ?ffentlicher Stil des Miniprogramms, CSS-?hnlich.

Zusammensetzung der Miniprogrammseite:

Seitenzusammenstellung

Jede Miniprogrammseite besteht aus vier Dateien mit demselben Namen unter demselben Pfad Die Zusammensetzung von Dateien mit unterschiedlichen Suffixen, wie zum Beispiel: index.js, index.wxml, index.wxss, index.json.

Ge Wenjia vorgestellt

Der [Pfad + Seitenname] jeder Seite im WeChat-Applet muss in die Seiten der App geschrieben werden .json und die erste Seite in Seiten ist die Homepage des Miniprogramms.

Pfad

Diese vier Dateien k?nnen entsprechend ihrer Funktion in drei Teile unterteilt werden:

Konfiguration: JSON-Datei
Logikebene: JS-Datei
Ansichtsebene : wxss.wxml-Datei

Unter iOS wird der Javascript-Code des Applets ausgeführt In JavaScriptCore
Auf Android wird der Javascript-Code des Miniprogramms durch den X5-Kernel geparst
Auf dem Entwicklungstool wird der Javascript-Code des Miniprogramms auf nwjs ausgeführt ( Chrome-Kernel). Daher unterscheiden sich die Auswirkungen auf die Entwicklungstools von den tats?chlichen Auswirkungen.

2. Komponenten

WeChat bietet viele Komponenten, die haupts?chlich in acht Typen unterteilt sind:

Container anzeigen,

Grundinhalt,
Formularkomponente,
Bedienungsfeedback,
Navigation,
Medienkomponenten,
Karte,
Leinwand

einschlie?lich Ansicht, Scroll-Ansicht, Schaltfl?che, Formular und andere h?ufig verwendete Elemente Die Komponente stellt au?erdem eine Karte <a href="http://www.miracleart.cn/code/8210.html" target="_blank">map<p></p></a> und eine Leinwand <a href bereit="http://www.miracleart.cn/code/7892.html" target="_blank">Leinwand<code><a href="http://www.miracleart.cn/code/8210.html" target="_blank">map</a>. <a href="http://www.miracleart.cn/code/7892.html" target="_blank">canvas</a>

組件主要屬于視圖層，通過wxml來進(jìn)行結(jié)構(gòu)布局，類似于html。通過wxss修改樣式，類似于css。
組件使用語法實(shí)例：

<!--普通視圖-->
<view>這是一個(gè)普通視圖</view>

<!--wxss樣式修改-->
<view clas="mainView">樣式修改過的視圖</view>

更多的組件以及相關(guān)使用方法可以到官方文檔-組件查看

3、API

網(wǎng)絡(luò)
媒體
數(shù)據(jù)
位置
設(shè)備
界面
開發(fā)接口

其中網(wǎng)絡(luò)請求的使用必須先到公眾平臺登錄小程序賬號，在設(shè)置頁面那里，設(shè)置允許訪問的域名，網(wǎng)絡(luò)請求包含了普通的http請求、支持上傳、下載、socket?；旧蠞M足了我們開發(fā)中所需要的網(wǎng)絡(luò)需求。

這些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)行有些差異

模擬器.png

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

Paste_Image.png

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

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

home.jpeg

run.jpeg

slideback.jpeg

slide.jpeg

功能：

能夠計(jì)算里程、時(shí)間、實(shí)時(shí)獲取跑步路徑（有些粗糙）

思路：

主要使用了微信小程序的獲取位置APIwx.getLocation()和地圖組件map。
首先實(shí)現(xiàn)一個(gè)計(jì)時(shí)器進(jìn)行 計(jì)時(shí)，通過wx.getLocation()獲取坐標(biāo)，把獲取到的坐標(biāo)存在一個(gè)數(shù)組中，通過坐標(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收藏，我以后還會進(jìn)行一些優(yōu)化更新?，F(xiàn)在只是一個(gè)學(xué)習(xí)Demo，大家溝通學(xué)習(xí)，實(shí)際應(yīng)用還需更多優(yōu)化。

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里程數(shù)：{{meters}}km</text>
    <text>\\n\\n時(shí)間：{{time}}</text>
</view>

<view class="mainView">
   <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;
/* 毫秒級倒計(jì)時(shí) */
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
    )
}


// 時(shí)間格式化輸出，如03:25:19 86。每10ms都會調(diào)用一次
function date_format(micro_second) {
      // 秒數(shù)
      var second = Math.floor(micro_second / 1000);
      // 小時(shí)位
      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: &#39;&#39;,
    isLocation:false,
    latitude: 0,
    longitude: 0,
    markers: [],
    covers: [],
    meters: 0.00,
    time: "0:00:00"
  },

//****************************
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
    this.getLocation()
    console.log("onLoad")
    count_down(this);
  },
  //****************************
  openLocation:function (){
    wx.getLocation({
      type: &#39;gcj02&#39;, // 默認(rèn)為 wgs84 返回 gps 坐標(biāo)，gcj02 返回可用于 wx.openLocation 的坐標(biāo)
      success: function(res){
          wx.openLocation({
            latitude: res.latitude, // 緯度，范圍為-90~90，負(fù)數(shù)表示南緯
            longitude: res.longitude, // 經(jīng)度，范圍為-180~180，負(fù)數(shù)表示西經(jīng)
            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: &#39;gcj02&#39;, // 默認(rèn)為 wgs84 返回 gps 坐標(biāo)，gcj02 返回可用于 wx.openLocation 的坐標(biāo)
      success: function(res){
        console.log("res----------")
        console.log(res)

        //make datas 
        var newCover = {
            latitude: res.latitude,
            longitude: res.longitude,
            iconPath: &#39;/resources/redPoint.png&#39;,
          };
        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,
        });
      },
    })
  }

})

五、后語

本文是一個(gè)快速上手開發(fā)的介紹，細(xì)節(jié)介紹可以查看官方文檔

【相關(guān)推薦】

1. 微信公眾號平臺源碼下載

2.?小豬cms(PigCms)微電商系統(tǒng)運(yùn)營版（獨(dú)立微店商城+三級分銷系統(tǒng)）

3.?微信人脈王v3.4.5高級商業(yè)版 微信魔方源碼

Das obige ist der detaillierte Inhalt vonWeChat-Entwicklung: Erstellen eines laufenden WeChat-Applets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!