微信天氣小程序教程

PingCAP 發布于2019-08-23 14:35 / 1057人閱讀

摘要：前言這是一個微信天氣小程序開發教程，簡單易學，半天即可完成。報錯不能為空由于位置服務使用的騰訊位置服務微信小程序，請自行申請自己的密鑰。審核通過后授權給當前要使用的微信小程序還需將微信小程序域名添加到白名單。

前言

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

歡迎掃碼體驗：

源碼請戳這里，歡迎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

解決方法：

在新建的文件夾中執行 npm init，生成package.json文件（一路回車就好）

執行 npm install regenerator

將node_modules文件夾下的regenerator-runtime文件夾復制到小程序項目中

在需要使用到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 添加到白名單。

GPU云服務器云服務器微信小程序微信小程序支付微信付款小程序微信小程序部署

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100817.html

微信應用號（小程序）資源匯總（1010更新）

摘要：微信應用號小程序資源匯總。每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 wechat-weapp-resource 微信應用號（小程序）資源匯總。每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 showImg(https://segmentfault.com/img/remote/1460000...

趙春朋 2019-08-29 11:20 評論0 收藏0
微信應用號（小程序）資源匯總（1010更新）

摘要：微信應用號小程序資源匯總。每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 wechat-weapp-resource 微信應用號（小程序）資源匯總。每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 showImg(https://segmentfault.com/img/remote/1460000...

piapia 2019-08-20 11:12 評論0 收藏0
小程序 · 云開發

摘要：課程內容以打造一款擁有天氣預報和簽到功能的小程序為主線，從基礎知識到小程序運行機制，從開發環境搭建到小程序云開發的接口使用調試上線，打通微信小程序開發全流程。 9 月 11 日，微信開發者工具新增小程序「云開發」功能。 showImg(https://segmentfault.com/img/bVbjQLW?w=1000&h=544); 大多數開發者在開發應用時和部署服務時，無論是選擇...

nanchen2251 2019-06-28 11:00 評論0 收藏0
超簡單！只需簡單幾步即可為TA定制天氣小助理！！

摘要：前提雖然我們每天都會查看天氣，但是如果你能夠用限制微信每天早上七點定時為推送天氣預報，生活指數。重要其中模塊是本項目以及后續項目中很重要的模塊，就是因為這個開源項目，我們才能使其與微信產生交互。 showImg(https://segmentfault.com/img/remote/1460000019558841?w=1920&h=1279); 前提雖然我們每天都會查看天氣，但是如...

NicolasHe 2019-07-31 10:36 評論0 收藏0