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