資訊專欄INFORMATION COLUMN
摘要：前言這是一個微信天氣小程序開發(fā)教程，簡單易學，半天即可完成。報錯不能為空由于位置服務使用的騰訊位置服務微信小程序，請自行申請自己的密鑰。審核通過后授權給當前要使用的微信小程序還需將微信小程序域名添加到白名單。
前言
這是一個微信天氣小程序開發(fā)教程，簡單易學，半天即可完成?？筛鶕?jù)天氣不同，配置不同的背景圖片。初始默認實時定位當前位置天氣，也可搜索查詢各地區(qū)天氣。具體實現(xiàn)效果如下：
歡迎掃碼體驗：
源碼請戳這里，歡迎star~
初始化項目首先要注冊小程序、以及安裝微信開發(fā)工具，這些在小程序開發(fā)文檔中都有詳細說明，這里就不贅述了。
安裝好微信開發(fā)者工具，填好申請到的小程序AppID，選好項目目錄，初始化一個普通小程序目錄結(jié)構，得到以下項目初始目錄：
|-- 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類型，每一個頁面由四個文件組成，為了方便開發(fā)者減少配置，描述頁面的四個文件必須具有相同的路徑與文件名。
配置文件描述app.json是小程序的全局配置，包括小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡超時時間、底部 tab 等。其他配置項細節(jié)可以參考文檔 小程序的配置 app.json 。
project.config.json是項目工具配置，對工具做的任何配置都會寫入這個文件，使得只要載入同一個項目代碼包，開發(fā)則工具會自動恢復當時你開發(fā)項目時的個性設置。這里面需要配置小程序的appid。其他配置項細節(jié)可以參考文檔 開發(fā)者工具的配置 。
page.json是每個頁面對應的配置，讓開發(fā)者可以獨立定義每個頁面的一些屬性，例如頂部顏色、是否允許下拉刷新等等。其他配置項細節(jié)可以參考文檔
頁面配置 。
具體頁面源碼請戳這里查看。
常見問題 使用 ES7 的 async/await 時報錯：ReferenceError: regeneratorRuntime is not defined解決方法：
在新建的文件夾中執(zhí)行 npm init，生成package.json文件（一路回車就好）
執(zhí)行 npm install regenerator
將node_modules文件夾下的regenerator-runtime文件夾復制到小程序項目中
在需要使用到async await的.js文件引入regenerator-runtime文件夾下的runtime.js文件
報錯：https://free-api.heweather.com 不在以下 request 合法域名列解決方法：
到小程序開發(fā)頁面，點擊左側(cè) 開發(fā) -> 開發(fā)設置 -> request合法域名，添加 https://free-api.heweather.com https://apis.map.qq.com 者兩個合法域名，目的是為了允許使用騰訊位置服務 API 和和風天氣 API。
由于位置服務使用的騰訊位置服務-微信小程序JavaScript SDK，請自行申請自己的密鑰（key）。審核通過后授權給當前要使用的微信小程序（APP ID）,還需將微信小程序域名 servicewechat.com 添加到白名單。
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100817.html
摘要：微信應用號小程序資源匯總。每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 wechat-weapp-resource 微信應用號（小程序）資源匯總。 每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 showImg(https://segmentfault.com/img/remote/1460000...
摘要：微信應用號小程序資源匯總。每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 wechat-weapp-resource 微信應用號（小程序）資源匯總。 每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 showImg(https://segmentfault.com/img/remote/1460000...
摘要：課程內(nèi)容以打造一款擁有天氣預報和簽到功能的小程序為主線，從基礎知識到小程序運行機制，從開發(fā)環(huán)境搭建到小程序云開發(fā)的接口使用調(diào)試上線，打通微信小程序開發(fā)全流程。 9 月 11 日，微信開發(fā)者工具新增小程序「云開發(fā)」功能。 showImg(https://segmentfault.com/img/bVbjQLW?w=1000&h=544); 大多數(shù)開發(fā)者在開發(fā)應用時和部署服務時，無論是選擇...
摘要：前提雖然我們每天都會查看天氣，但是如果你能夠用限制微信每天早上七點定時為推送天氣預報，生活指數(shù)。重要其中模塊是本項目以及后續(xù)項目中很重要的模塊，就是因為這個開源項目，我們才能使其與微信產(chǎn)生交互。 showImg(https://segmentfault.com/img/remote/1460000019558841?w=1920&h=1279); 前提 雖然我們每天都會查看天氣，但是如...
閱讀 3898·2021-09-27 13:36
閱讀 4637·2021-09-22 15:12
閱讀 3074·2021-09-13 10:29
閱讀 1844·2021-09-10 10:50
閱讀 2381·2021-09-03 10:43
閱讀 532·2019-08-29 17:10
閱讀 455·2019-08-26 13:52
閱讀 3271·2019-08-23 14:37
