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

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/>”,更改赋值情况下不起作用。

最终结果如下:

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值