微信天氣小程序教程

前言

這是一個微信天氣小程序開發教程，簡單易學，半天便可完成。可根據天氣不一樣，配置不一樣的背景圖片。初始默認實時定位當前位置天氣，也可搜索查詢各地區天氣。具體實現效果以下：

歡迎掃碼體驗：

源碼請戳這裏，歡迎star~

初始化項目

首先要註冊小程序、以及安裝微信開發工具，這些在小程序開發文檔中都有詳細說明，這裏就不贅述了。
安裝好微信開發者工具，填好申請到的小程序AppID，選好項目目錄，初始化一個普通小程序目錄結構，獲得如下項目初始目錄：

|-- pages
      |-- index
          |-- index.js        // 首頁js文件
          |-- index.json      // 首頁json文件
          |-- index.wxml      // 首頁wxml文件 至關於html
          |-- index.wxss      // 首頁wxss文件 至關於css
      |-- logs
          |-- logs.js         // 日誌頁js文件
          |-- logs.json       // 日誌頁json文件
          |-- logs.wxml       // 日誌頁wxml文件
          |-- logs.wxss       // 日誌頁wxss文件
  |-- utils
      |-- util.js             // 小程序公用方法
  |-- app.js                  // 小程序邏輯
  |-- app.json                // 小程序公共配置
  |-- app.wxss                // 小程序公共樣式表
  |-- project.config.json     // 小程序項目配置

能夠看到，項目文件主要分爲.json，.wxml，.wxss和.js類型，每個頁面由四個文件組成，爲了方便開發者減小配置，描述頁面的四個文件必須具備相同的路徑與文件名。

配置文件描述

• app.json是小程序的全局配置，包括小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等。其餘配置項細節能夠參考文檔 小程序的配置 app.json 。
• project.config.json是項目工具配置，對工具作的任何配置都會寫入這個文件，使得只要載入同一個項目代碼包，開發則工具會自動恢復當時你開發項目時的個性設置。這裏面須要配置小程序的appid。其餘配置項細節能夠參考文檔 開發者工具的配置 。
• page.json是每一個頁面對應的配置，讓開發者能夠獨立定義每一個頁面的一些屬性，例如頂部顏色、是否容許下拉刷新等等。其餘配置項細節能夠參考文檔
  頁面配置 。

頁面代碼

具體頁面源碼請戳這裏查看。

常見問題

使用 ES7 的 async/await 時報錯：ReferenceError: regeneratorRuntime is not defined

解決方法：

1. 在新建的文件夾中執行 npm init，生成package.json文件（一路回車就好）
2. 執行 npm install regenerator
3. 將node_modules文件夾下的regenerator-runtime文件夾複製到小程序項目中
4. 在須要使用到async await的.js文件引入regenerator-runtime文件夾下的runtime.js文件

報錯：https://free-api.heweather.com 不在如下 request 合法域名列

解決方法：
到小程序開發頁面，點擊左側 開發 -> 開發設置 -> request合法域名，添加 https://free-api.heweather.com https://apis.map.qq.com 者兩個合法域名，目的是爲了容許使用騰訊位置服務 API 和和風天氣 API。

報錯：key不能爲空

因爲位置服務使用的騰訊位置服務-微信小程序JavaScript SDK，請自行申請本身的密鑰（key）。審覈經過後受權給當前要使用的微信小程序（APP ID）,還需將微信小程序域名 servicewechat.com 添加到白名單。