微信小程序開發 微信小程序調試編譯程序運行方法(實例)。萬眾矚目的微信小程序咋昨天終于上線了，大家伙終于都能體驗微信小程序的服務了。隨著小程序的出現，一些和小程序相關的問題也出來了，今天小編就為大家介紹一下微信小程序開發及調試編譯程序運行方法。

首先，你需要注冊一個小程序賬號。需要用一個沒注冊過公眾號的郵箱注冊。注冊過程中需要很多認證，比較繁瑣。如果暫時只是試水、沒有發布的打算，那么只要完成基本信息填寫就可以，不需要完成微信認證。

之后，就可以在公眾平臺使用注冊的帳戶進行登錄。

然后，在主頁面左邊列表中點擊設置，再設置頁面中選開發設置，就可以看到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. 真機調試

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

真機運行截圖(運行于iPhone7，微信版本：6.3.30)：

首先實現一個計時器進行 計時，通過wx.getLocation獲取坐標，把獲取到的坐標存在一個數組中，通過坐標每隔一段時間獲取里程，進行累加得到總里程，同時也通過坐標點進行連線。存在的問題：

因為目前找不到在地圖上畫連線的方法，所以采用了在地圖上貼小紅點圖的方法顯示大概跑步路徑，路徑比較粗糙;

雖然采用了 API 里面的火星坐標 GCJ02 類型，但是獲取的坐標跟國際坐標差不多，依然存在著偏差。

我已經把全部代碼放在GitHub上，大家可以下載來看看或者先 Star 起來，我以后還會進行一些優化更新?，F在只是一個學習 Demo，大家溝通學習，實際應用還需更多優化。

在這里小編為大家介紹一個的好玩的小程序－－嗨圖！大家可以直接在這個微信小程序上DIY自己的照片，先來看看具體嗨圖有些什么功能吧！

微信小程序嗨圖功能

1、專題——DIY圖片的模板，點擊可以生成使用，分享到朋友圈。

2、分享墻——用戶上傳的自己DIY作品。

3、立即制作——可以用自己的圖來DIY。

4、告訴我——告訴產品的改進，內容的增加。

想要體驗怎么制作屬于自己個性朋友圈照片的用戶，掃一掃下面的二維碼就可以啦！還等什么，趕緊掃碼體驗，開啟你的嗨圖之旅吧！