前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序实例——天气预报开发笔记(进行中...)

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

作者头像
泥豆芽儿 MT
发布2018-09-11 11:32:04
1.6K0
发布2018-09-11 11:32:04
举报
文章被收录于专栏:木头编程 - moTzxx

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1333797

★ 背景

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

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

(一). 前期准备

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

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

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

(二). 开发笔记

①. 实现的功能

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

②. 熟悉框架代码

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

③. 配置服务器域名

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

④. HTTP请求

  • 因为我只设计了一个页面,简便起见在页面初始化时即进行了三个http请求,/pages/index/index.js 核心代码参考如下:
代码语言:javascript
复制
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 警告

  • 主要的提示信息为:
代码语言:javascript
复制
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 微信小程序

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018年03月03日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ★ 背景
  • (一). 前期准备
  • (二). 开发笔记
    • ①. 实现的功能
      • ②. 熟悉框架代码
        • ③. 配置服务器域名
          • ④. HTTP请求
            • ⑤. 代码编译上传
            • ★ 附录
              • ①. 提示:
                • ②. 问题收集
                  • ♠. 页面布局提示
                  • ♥. wx:key 警告
                  • ♦. 域名配置问题
                • ③. 关于微信支付的一点思考
                  • ④. 参考推荐
                    • ⑤. 源码参考
                    相关产品与服务
                    云开发 CloudBase
                    云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
                    领券
                    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档