前言

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

正文

一、準備工作

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

二、開發工具

三、開始專案

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

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

1、框架

先看下一目錄：

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 程式碼是執行在 NW.js（chrome核心） 中。所以開發工具上的效果跟實際效果有所出入。

2、元件

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

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

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

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

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

3、API

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

其中網路請求的使用必須先到公眾平臺登入小程式賬號，在設定頁面那裡，設定允許訪問的域名，網路請求包含了普通的http請求、支援上傳、下載、socket。基本上滿足了我們開發中所需要的網路需求。

這些API屬於邏輯層，寫在js檔案中，
使用例項:

可以到官方文件-API檢視其它API的使用方法。

4、編譯執行

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

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

實踐–跑步小程式。

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

功能：

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

思路：

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

核心程式碼：

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

wxml檔案佈局程式碼：

js檔案邏輯程式碼：

五、後語

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