第一个微信小程序学习——天气查询

17年的时候学习过一个月小程序，但后来由于一直没有用到过，也忘的差不多了，而且这2年小程序也更新了不少新的功能，最近也打算把系统的一部分功能做到小程序上去，从这周开始重新学习，顺便把学习的内容记录下来，当作学习笔记吧。

先简单的做个小程序——天气查询

一、开发前准备

 开发工具、微信小程序的官方网站、官方文档，均可通过下面的网址获得。

小程序官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/

二、最终的页面

   

从图中可以看出，页面非常简单，只有3个元素，分别是 输入框、按钮、查询后显示的内容。

这些元素在小程序里都属于组件，可以进入微信开发平台，查看具体的属性。

 

三、新建一个小程序的项目

      通过上面的网址下载小程序的开发工具后，新建一个小程序项目。

     

     AppID这里点击“测试号”即可，然后点击确定按钮，默认的项目结构如下图

    小程序每个页面最多有4种格式的文件组成，

  js:  业务程序文件，类似于WEB开发里的JS或者后台文件。

wxml: 页面版面文件，类似于HTML文件

wxss:样式文件，类似css文件

json：配置文件。

而app.js\app.json\app.wxss 是项目的主文件，或者理解为统一配置文件。

app.json文件

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "天气查询",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

此文件主要是项目的配置，

pages ： 项目中的所有子页面，第一个就是默认的首页。

window : 配置一些属性，如navigationBarTitleText 设置小程序顶部的名称。

四、首页版面

    打开index.wxml文件，在里面添加需要用到的三个组件。  

<form bindsubmit="searchSubmit">
<view class="container">
  <input class="cityName" name="city" placeholder="城市名" auto-focus />
  <button form-type="submit" type="primary"> 查询天气 </button>    
  <text>{{weather}}</text>
</view>
</form>

 <input/>  -- 输入框 ；<button/> --按钮；<text></text> -- 文本组件。

这3个组件基本用法和HTML中都差不多，特殊的功能可以查看小程序官方文档。

<form> -- 表单组件，类似于HTML中 from,注意这里的 bindsubmit 属性，意思是携带 form 中的数据触发 submit 事件是执行定义的函数，即要想触发这里定义的函数，那么按钮的类型必须是submit，即代码中的form-type="submit"。

{{weather}}  -- 表示的是查询的结果

五、天气预报的查询API

   这个API网上很多，以前用过百度的，但是现在百度的apistore 网站居然打不开了http://apistore.baidu.com/，就改用高德的API了，地址：https://lbs.amap.com/，登陆自己的帐号，进入控制台，建一个应用，获取一个key，具体的步骤就不写了，按照网站的提示一步步做就行了，很简单。应用建好后，会得到一个key。

        找到网页上的“开发支持”-》“微信小程序SDK” ->"获取实时天气数据”，里面有案例，不过案例获取的是实时天气数据。也可以点击“参考手册”-》“基础类”，这里有API的详细用法。

六、编写程序

 打开index.wxss文件，给输入框定义样式。

.cityName{
border: 1px solid #aaa;
width: 90%;
margin: 5%;
padding: 0.5rem;
}

打开index.js 文件，首先下载高德查询天气的JS文件：amap-wx.js；

然后在index.js 中引入JS   ： var amapFile = require('../../utils/amap-wx.js'); 

最后在pages({})内新增提交事件函数 searchSubmit，在此函数里将高德的API代码复制进来。

searchSubmit: function (e) {      
    var cityName = e.detail.value.city;    
    var myAmapFun = new amapFile.AMapWX({ key: '高德应用的KEY' });
    //forecast
    myAmapFun.getWeather({
      type:'live',
      city:cityName,
      success: function (data) {
        //成功回调
        console.log(data)               
      },
      fail: function (info) {
        //失败回调
        console.log("fail --> "+info)
      }
    })
  }

然后编译项目，输入要查询的城市名，点击查询按钮，此时不出意外的话，会报一个错误:"getLocation需要在app.json中声明permission字段"，这是因为没有授权的原因，打开app.json，在里面添加上 下面代码代码即可。

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }

然后重新点击按钮，控制台会出现当前城市的实时天气状况，如下图，如果要获取天气预报数据，将type的live改为forecast即可

七、解析数据

    最终是需要将数据呈现到页面上，即呈现在index.wxml中的   <text>{{weather}}</text> 标签里，

{{weather}}  ： 这种格式在微信小程序里就相当于是一个变量，跟JAVA中EL表达式的${name}类似。

这个变量全部定义在对应的js文件中的data: {} 模块中，例如本例中定义如下

page({data: {    
    weather:''
}
...
})

修改提交函数

searchSubmit: function (e) {
    var $that = this;      
    var cityName = e.detail.value.city;
    var myAmapFun = new amapFile.AMapWX({ key: '高德应用的key' });
    //forecast
    myAmapFun.getWeather({
      type:'live',
      city:cityName,
      success: function (data) {
        //成功回调
        console.log(data)
        var weather="城市："
          + data.city.data+"\r\n"
          + "天气：" + data.liveData.weather + "\r\n"
          + "温度：" + data.temperature.data + "\r\n"
          + "湿度：" + data.humidity.data + "\r\n"
          + "风向：" + data.winddirection.data + "\r\n"
          + "风力：" + data.windpower.data ;       
        $that.setData({ weather:weather});        
      },
      fail: function (info) {
        //失败回调
        console.log("fail --> "+info)
      }
    })
  }

 这里要注意几点

1. var $that = this;  如果在成功回调函数里直接写this.setData({weather:weather})，这里代表的是高德的应用，那是无法赋值的

2. 换行不能用“<Br/>”，更改赋值情况下不起作用。

最终结果如下：