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

★ 背景

【提示】：正在补充更新中…

• 首先，附上一张效果图.
  

• 之前就有关注过小程序的发展，感觉可以抽一点的时间来学习一下，通过官方文档以及提供的示例 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中对此功能的注释如下：
  

• 文章太过冗长所以已摘出为新文章 【小程序 —— 关于微信支付功能的思路】

④. 参考推荐

• 微信小程序页面跳转方法总结
• 微信小程序支付简单小结与梳理
• exports 和 module.exports 的区别
• 微信小程序初体验与DEMO分享

⑤. 源码参考

• 欢迎指摘

【moTzxx 微信小程序】