微信小程序实例——天气预报开发笔记(进行中...)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/79424936

★ 背景

提示】:正在补充更新中…

  • 首先,附上一张效果图.
  • 之前就有关注过小程序的发展,感觉可以抽一点的时间来学习一下,通过官方文档以及提供的示例 Demo,发现兴趣挺高,不失为一个可以扩展自身技能的试炼场
  • 此处仅做简单的使用介绍,几乎无需涉及艰深的代码技术问题,旨在备忘自己的使用步骤 …

(一). 前期准备

注意:作为登录帐号,请填写未被微信公众平台注册,未被微信开放平台注册,未被个人微信号绑定的邮箱

进行微信小程序的开发,需要使用官方提供的开发工具进行代码的开发和上传

根据官方文档,快速熟悉开发者工具的使用

(二). 开发笔记

①. 实现的功能

  1. 微信获取当前所处地的经纬度
  2. 根据经纬度,访问 api.seniverse.com 所提供的天气状况接口,获取 JSON 数据
  3. 页面初始化加载或者通过点击按钮ajax加载数据,完成页面展示效果的更新

②. 熟悉框架代码

  • 本身来讲,小程序所提供的初始源代码是极为简洁的,在此就不多说了,可以参考官方文档加强了解即可,主要操作的代码如下图所示:

③. 配置服务器域名

  • 腾讯要求微信小程序使用到的域名都需要在公众平台中进行设置(可以说是一种备案)
    1. request 合法域名基本上一定要填写,因为只要小程序需要服务器,基本上就需要这个设置。
    2. socket 合法域名一般是小程序功能涉及即时通信时需要
    3. uploadFile 合法域名和 downloadFile 合法域名分别是小程序功能涉及上传文件和下载文件时需要
    4. 也就是说第一项基本是必填,后面三项根据功能选填
  • 以我的代码需求,则需要进行如下的配置(通过这次的操作,以后也要记住这一重点)

④. HTTP请求

  • 因为我只设计了一个页面,简便起见在页面初始化时即进行了三个http请求,/pages/index/index.js 核心代码参考如下:
onReady:function(){
  //初始化加载数据
    var self = this
    //获取定位信息 经纬度
    wx.getLocation({
      success: function (res) {
        //初始化【北京】经纬度  location=39.93:116.40(格式是 纬度:经度,英文冒号分隔) 
        var newLocation = '39.93:116.40'; 
        if(res){newLocation = res.latitude + ":" + res.longitude}
        self.setData({
          newLocation: newLocation
        })

      //初始化获取 当前的天气状况
        wx.request({
          url: 'https://api.seniverse.com/v3/weather/now.json?key=fdw9qkun1btvenxt&location=' + newLocation+'&language=zh-Hans&unit=c',
          success: function (result) {
            self.setData({
              nowInfo: result.data.results[0]
            })
          },
          fail: function ({ errMsg }) {
            console.log('request fail', errMsg)
          }
        }),
          //初始化获取今天的生活指数信息
          wx.request({
          url: 'https://api.seniverse.com/v3/life/suggestion.json?key=fdw9qkun1btvenxt&location=' + newLocation + '&language=zh-Hans',
            success: function (result) {
              self.setData({
                lifeInfo: result.data.results[0].suggestion
              })
            },
            fail: function ({ errMsg }) {
              console.log('request fail', errMsg)
            }
          }),
          //初始化话获取最近三天的天气状况
          wx.request({
          url: 'https://api.seniverse.com/v3/weather/daily.json?key=fdw9qkun1btvenxt&location=' + newLocation + '&language=zh-Hans&unit=c&start=0&days=5',
            success: function (result) {
              self.setData({
                //weatherInfo: result.data.results[0]
                weatherInfo: formatDate(result.data.results[0])
              })
            },
          })
      }
    })
  },

⑤. 代码编译上传

  • 因为微信小程序上传总量的限制,尽量不要等到最后一次性上传,通过微信扫描“预览”所展示的二维码,即可在真机测试自己的小程序效果

最后附一张,开发者工具所展示的效果图:

★ 附录

①. 提示:

②. 问题收集

♠. 页面布局提示

  • 小程序要求组件拥有了一些特有的属性值,需要格外注意,以便准确顺利的进行页面布局

♥. wx:key 警告

  • 主要的提示信息为:
Now you can provide attr "wx:key" for a "wx:for" to improve performance.
  • 官方解释如下:

显然wx:key的出现都与wx:for绑定,可以参看文档:【列表渲染-小程序】 此处对于我的项目,最简单的解决方案:在wx:for后面添加wx:key="key" 可消除警告

♦. 域名配置问题

  • 报错信息如下:

... 不在以下 request 合法域名列表中,请参考文档 ...

  • 类似报错情况如下:

提示:可以参考前面介绍的 【(二)-③】中的解决方案.

③. 关于微信支付的一点思考

  • 根据官方Demo中对此功能的注释如下:

④. 参考推荐

⑤. 源码参考

  • 欢迎指摘

moTzxx 微信小程序

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏微信小程序开发

零基础入门小程序 &实战经验分享

讲师介绍:连胜老师曾经就职于点心移动 & 百度,折腾小程序也有段时间了,参与开发的“小小签到”小程序,在2017年荣获阿拉丁神灯奖。我公司开发了多个工具类小程序...

57913
来自专栏Python数据科学

如何进行手机APP的数据爬取?

平时我们的爬虫多是针对网页的,但是随着手机端APP应用数量的增多,相应的爬取需求也就越来越多,因此手机端APP的数据爬取对于一名爬虫工程师来说是一项必备的技能。...

2042
来自专栏魏艾斯博客www.vpsss.net

宝塔 Linux 面板发布 3.6 版本

3034
来自专栏腾讯移动品质中心TMQ的专栏

【腾讯 TMQ】零基础学习 Fiddler 抓包改包

Fiddler 是一款 HTTP 协议调试代理工具,它能够抓取记录本机所有 HTTP(S) 请求,通过设置断点等方法我们可以任意修改进出 Fiddler 的数据...

1.7K0
来自专栏编程微刊

小程序开发快速入门教程(附源码)小程序初始化目录:我是分割线===开发ing示例步骤:

2403
来自专栏破晓之歌

清除浏览器cookie 原

打开页面后,登录,F12调试工具,设置好的cookie在调试程序-cookie中可以看到

4642
来自专栏程序你好

三分钟让你了解什么是Web开发?

863
来自专栏极乐技术社区

微信小程序跳坑指南系列《一》:新坑30枚

1、小程序名称可以由中文、数字、英文。长度在3-20个字符之间,一个中文字等于2个字符。 2、小程序名称不得与公众平台已有的订阅号、服务号重复。如提示重名,请更...

24910
来自专栏微信小开发

小程序登录态,如何去维护?

引言 对于开发小程序而言,登录态的维护是不可避免的。下面将抛出某书小程序的解决方案,欢迎大家扔砖。 某书小程序是基于wepy开发,下面的同样适用于小程序原生开发...

4305
来自专栏smy

ckplayer 如何在PC上完美支持 m3u8播放

使用过ckplayer的同学都知道,相对jwplayer等,它非常的容易配置和使用。功能也是基本满足我们的需求的。 一般情况我们都使用普通的视频格式比如mp4,...

6206

扫码关注云+社区

领取腾讯云代金券