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/>”，更改赋值情况下不起作用。
最终结果如下：
