实战:从入门到上线,手把手教你搭建天气预报微信小程序

勇康博客网
预计阅读时长 5 分钟
位置: 首页 小程序 正文

博主之前发布过一篇文章,微信小程序源码合集500套。不少友友反馈很多都用不了,这里博主给大家道个歉,因为博主也是花钱网上收集到的源码,来给大家免费下载,内容之多也不可能一个个去测试它的可用性。而且博主发现很多对小程序感兴趣的朋友连怎么发布代码都不知道,下面博主就呕心沥血写下这篇博文,从入门到上线,抛砖引玉,讲述这款天气查询小程序的发布过程。

首先看看真机调试效果吧

image.png9d071dcb14bf1645e8d89513fdee4bc.jpg

PS:文尾附有源码安装包

上线过程

注册微信小程序

前往“微信公众平台”,按照步骤注册微信小程序账号即可,注册完之后会有一个appID,后面会用到。

下载微信开发者工具

下载微信开发者工具,这个傻瓜式安装即可,我们的微信小程序代码是放在这上面打开的

导入项目文件

将下载好的压缩包解压,然后打开微信开发者工具客户端,创建小程序,如下图所示,项目名称自己写,目录选择解压后的天气源码包,AppID即你注册微信小程序后的appid,后端服务选择不使用云服务,最后点击确定即可

image.png

腾讯位置服务

因这个小程序特殊性,需要用到当前使用人的地理位置,所以需要开通腾讯位置服务,注意,这个不是必须的,有的小程序没用到这个服务自然不用开通。前往腾讯位置服务,没有账号的话注册一个,然后登入控制台->应用管理->我的应用->创建应用,如下图所示,AppID即你上面注册小程序的appid,点击保存即可。

image.png

添加key

将腾讯位置服务获取到的应用key复制,然后找到miniprogram/util/config.js文件,在第11行代码处,添加刚刚申请到的key;在第9行代码处填入和风天气接口key,此处可以拿注释中的key先调试,到时候申请下来再更换也不迟。

添加小程序合法域名

登入小程序后台->开发管理->开发设置->服务器域名,添加小程序合法域名,https://apis.map.qq.com、https://devapi.qweather.com,为了允许小程序访问腾讯位置服务以及和风天气API

编译小程序

此时,如果一切顺利的话,点击编译小程序,应该能看到和博主一样的界面,如果你完全按照博主给的流程走下来应该问题不大。如果你编译报错了,也不要着急,博主后面也贴出了常见编译错误的解决方法。

image.png

上传小程序

如果编译没问题,点击微信开发者工具右上角上传按钮,填写版本号以及备注,然后上传即可。

发版

上传成功后,登入微信小程序后台,版本管理菜单,可以看到刚刚上传的版本,点击提交审核即可,微信后台工作人员会给你的小程序审核,如果审核通过,直接全量发版,然后你就可以用你的微信在搜一搜里面搜到自己的小程序了。至此,一款全新的微信小程序应用上线!!!

image.png

常见问题及解决方法

key不能为空

image.png

这是因为你没有正确添加腾讯位置服务key导致的。上面有写。

Request合法域名相关

这是因为没有登入小程序后台添加合法域名,即使添加了也不是即时生效的,一般要等个十几分钟才生效。


可能还有一些博主预料不到的错误,如果小伙伴遇到的话可在下方留言


天气小程序源码包

微信扫描下方二维码,关注“勇康博客网”公众号,回复“天气小程序”即可

本文来自投稿,不代表本站立场,如若转载,请注明出处:
-- 展开阅读全文 --
头像
Vue面试中,经常会被问到的面试题/Vue知识点整理
« 上一篇 2022-04-10
zblog教程笔记:访问统计工具
下一篇 » 2022-04-18
取消
微信二维码
微信二维码
支付宝二维码

发表评论

共14条评论,3868人围观

头像 划线 说道:
2022-12-14 · 来自江苏省常州市 · Google Chrome 108.0.0.0 Windows 10 x64

想问下https://6465-demo-57510e-1257978613.tcb.qcloud.la/miniWeather/images/icon/location_s_w.png这个网址用不了了,天气图标不显示,出现渲染层网络层错误要怎么解决呢

头像 勇康博客网 头像 说道:
2022-12-14 · 来自广东省深圳市 · Google Chrome 108.0.0.0 Windows 10 x64

@划线 写这篇文章的时候还是四月份,当时真机调试没问题的,最近太忙了,也没有去验证现在到底还是否可用,等博主有空的时候验证一下:黑线:

头像 云深 说道:
2022-11-24 · 来自湖南省长沙市 · WeChat 8.0.28.2240 Huawei TAS

渲染层网络层错误是什么问题呀

头像 SnowDragon 说道:
2022-11-04 · 来自河北省石家庄市 · Google Chrome 105.0.0.0 Windows 10 x64

我配置完界面是空白的

头像 访客 说道:
2022-08-02 · 来自广西省南宁市 · Google Chrome 103.0.0.0 Windows 10 x64

为什么我用我的key 还是报错 TypeError: Cannot read property 'parent_city' of undefined

头像 *雾岛之樱 头像 说道:
2022-05-07 · 来自山西省大同市 · WeChat 8.0.21.2120 Android 11

为啥一直转圈加载不出来天气信息呢

头像 云深 说道:
2022-11-24 · 来自湖南省长沙市 · WeChat 8.0.28.2240 Huawei TAS

@*雾岛之樱 我的也是这样,为啥呀

头像 勇康博客网 头像 说道:
2022-05-09 · 来自广东省深圳市 · Google Chrome 100.0.4896.127 Windows 10 x64

@*雾岛之樱 打开调试工具看下,是不是报错了,也有可能是和风天气apikey调用次数用完了,最好自己申请一个key,源码包贴出来的key用的人多,很容易就上限了

头像 c杰 头像 说道:
2022-04-19 · 来自重庆省 · WeChat 8.0.18 Apple iPhone

想问一下添加合法域名哪里,是把这两个域名添加到哪个位置呢?,服务器配置那里有6项

头像 勇康博客网 头像 说道:
2022-04-19 · 来自广东省深圳市 · Google Chrome 100.0.4896.75 Windows 10 x64

@c杰 添加第一项:request合法域名即可,多个域名用分号隔开

头像 访客 说道:
2022-04-19 · 来自重庆省 · WeChat 7.0.20.1781 Windows 7 x64

@勇康博客网 谢谢博主!成功了!!!

头像 大肠包小肠 说道:
2022-04-13 · 来自广东省深圳市 · Google Chrome 100.0.4896.75 Windows 10 x64

写的很详细,虽然代码看的不是很懂,但是成功编译[Badlaugh]

头像 勇康博客网 头像 说道:
2022-04-13 · 来自广东省深圳市 · Google Chrome 100.0.4896.75 Windows 10 x64

@大肠包小肠 感谢支持

作者信息

勇康博客网
承接企业、个人,仿站、定制。域名,主机一键代发
TA的最新作品

热门文章

2
3

动态快讯

标签列表

目录[+]