微信开发者平台学习笔记

这次学习只为了解，不深入，看了B站一个讲得很好的学长记录的笔记。
下载微信开发者工具之后，微信扫码登录，创建小程序，在AppID中选择测试号，这样对于开发者测试比较方便。

1.获取微信头像昵称

编译界面如图，（打码部分是微信昵称和头像）

1.1 创建页面

1. 编译方法： （1）界面有“编译”快捷按钮； （2）快捷键ctrl+s
2. .js .json .wxml .wxss不同文件的注释方法都略有不同，需要注意

1. 全局文件有三个：app.js app.json app.wxss （名称不可更改）；

2. 创建Pages目录文件，用来存放各个页面；

3. 创建页面，页面名字以及4个文件
   1）js：页面逻辑实现
   2）json：负责标题栏和一些状态栏
   3）wxml：管理页面内容
   4）wxss：页面排布

4. 把内容单元封装在view内部： <view>内容</view>
   用class方式进行页面布局，class也可以对组件进行布局，
   class规定的样式名称前要加 ’ . ’ ，也可以对image、text组件不加点进行全局布局。

5. 获取图片、文字、按钮的组件，在index.wxml中进行
   1）图片 <image src='图片路径 '></image>
   2）文字 <text>内容</text>
   3）按钮 <button "属性内容">按钮上的内容</button>

6. 页面设计
   在index.wxml中会有<view class="container"> </view>，container是自命名的一个容器，这个容器放在index.wxss文件中，主要是设计样式。

7. 逻辑设计，在index.js文件中进行
   函数定义方法：函数名：function(参数列表){函数内容}， （函数结尾要有逗号）
   变量定义方法：data：{变量名称：‘内容’} （两个变量的定义之间用逗号隔开）

1.2 示例对应解释

1. index.wxml中的内容
   

2. index.js中部分内容
   
   

3. index.wxss对应内容
   

1.3 补充wxss之flex布局

1.3.1 wxss

（1）尺寸单位“rpx”
原理是无视设备原先的尺寸，统一规定屏幕宽度为750rpx。比如相对于iphone6，1rpx=0.5px。

（2）常用属性
background-color — 背景色
color — 前景色
font-size — 字体大小
border — 边框
width — 宽度
height — 高度

（3）内联样式
a)class 如前所使用
b)style
<view style="color:red;background-color:yellow">测试</view>

1.3.2 flex布局

1.基本概念
（1）容器和项目

<view class="a">  
	<view class="b">    
		<view class="c"></view>  
	</view>
</view>

对于a,b：a是容器，b是项目
对于b,c：b是容器，c是项目

（2）坐标轴
默认是水平布局：从左向右方向为主轴，从上向下方向为辅轴；
垂直布局：从上向下方向为主轴，从左向右方向为辅轴。

2.容器属性

.container {
  height: 100%;
  display: flex;  
  flex-direction: column;   
  /* 设置主轴方向  
  row||row-reverse||column-reverse 
  其中reverse是指主轴方向设为相反方向 */
  
  align-items: center;  
  /* 设置项目在行中的对齐方式  
  stretch默认值，未设置项目尺寸时将项目拉伸填满辅轴；  
  flex-start，项目顶部与辅轴起点对齐，对应有flex-end；  
  center，项目在辅轴居中对齐； */
  
  justify-content: space-between;  
  /* 设置项目在主轴方向上的对齐方式，分配项目之间及其周围多余的空间  
  flex-start默认值，项目对齐主轴起点，项目间不留空隙，对应有flex-end；  
  center，项目在主轴上居中，项目间不留空隙；  
  space-between，项目间距相等，第一个和最后一个项目分别与起点和终点对齐；  
  space-around，项目间距相等，第一个和最后一个项目与起点和终点的距离为中间项目间距的一半；*/
  
  align-content: center;  
  /* 用于多行排列时设置项目在辅轴上的对齐方式，分配项目之间及其周围多余的空间  
  flex-start,flex-end,center,space-between,space-around与以上类似，  
  只不过是以整行项目为单位 */
  
  flex-wrap: inherit;  
  /* 用于规定是否允许项目换行，以及多行排列时换行的方向  
  nowrap默认值，不换行，若单行内容过多，项目宽度会被压缩；  
  wrap，允许换行；  
  wrap-reverse，允许换行，换行方向为wrap的反方向 */  
  
  padding: 200rpx 0;  
  box-sizing: border-box;} 

2. 查询天气小程序

准备工作：
桌面新建空文件夹weather，新建小程序名称也为weather，文件存放位置为新建文件夹所在位置。
在文件夹中新建一个image文件夹，用来存放可能会使用到的图片，天气图片可以自己到百度下载。

2.1 设置页面大体框架

这部分内容的最终呈现结果：（1）小程序最顶端格式设置
在app.json文件中：

（2）页面内容设置
在index.wxml文件中：

<!--pages/weather/index.wxml-->
<view class="container"> 
 <!-- 地区选择器组件 --> 
  <picker mode="region">  
  <view>北京市</view> 
  </picker>
  
  <text>19度 多云</text>
  <image src="/images/cloudy.png"></image>
  
  <view class="detail">    
  <view class="bar">      
   <view class="box">湿度</view>      
   <view class="box">气压</view>      
   <view class="box">能见度</view>   
  </view>    
  <view class="bar">     
   <view class="box">0%</view>      
   <view class="box">0hpa</view>      
   <view class="box">0km</view>    
  </view>    
  <view class="bar">     
   <view class="box">风向</view>      
   <view class="box">风速</view>      
   <view class="box">风力</view>    
  </view>    
  <view class="bar">     
   <view class="box">0</view>      
   <view class="box">0km/h</view>      
   <view class="box">0</view>    
  </view>  
 </view>
</view>

picker组件：是从底部弹起的滚动选择器组件，根据mode属性值可以选择不同的选择器：普通选择器（默认）、多列选择器、时间选择器、日期选择器、省市区选择器。
当mode=‘region’时：

属性名	类型	默认值	说明
value	Array	[]	表示选中的省市区，默认选中每一列的首项
custom-item	String		可为每一列的顶部添加一个自定义的项
bindchange	EventHandle		当value改变时触发change事件，event.detail={value:value}
disabled	Boolean	false	是否禁用

为了使picker组件在选择时逻辑上有效，需要改动一部分：

  <picker mode="region" bindchange="ChangeRegion">    
    <view>{{region}}</view>  
  </picker>

同时在index.js文件中添加如下内容：

  data: {
      region:['北京市','北京市','东城区'] 
  },  
  ChangeRegion:function(e){
      this.setData({
            region:e.detail.value    
      })  
  },

显然，添加一个事件函数ChangeRegion实现逻辑功能，变量region是为了使得显示随着选择的地区改变而改变。

（3）页面布局设置
在index.wxss文件中：

/* pages/weather/index.wxss */
.container{
  height: 100vh;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: space-around;
 }
.detail{
  display: flex;  
  flex-direction: column;  
  width: 100%;
}
.bar{
  display: flex;  
  flex-direction: row;  
  margin: 20rpx 0;    /*设置外边距*/
}
.box{
  width: 33.3%;  
  text-align: center;
}
text{
  font-size: 80rpx;  
  color: #3c5f81;
}
image{
  width: 220rpx;  
  height: 200rpx;
}

这些设置完成后只是完成了页面内容布局和结构设置，在功能方面并没有开始完善。

2.2 逻辑功能实现

这部分就是使得显示的天气以及其他相关信息在联网状态下随着地区的改变而实时改变。

2.2.1找到可靠的天气信息

网络API

1. 找到合适的API接口；
2. 根据网站的相关代码提示和接口信息制作url；
3. 回到微信公众平台，添加服务器域名

根据UP主的推荐，百度搜索“和风天气”，进入网页，注册登陆账号密码。
在“应用管理”中新建一个免费开发版的应用，KEY名称设为“今日天气”，类型是Web API。新建成功后，需要用到的是KEY部分内容。key=a38457c8d0b24333aa2262595ebb55b6

（1）获取天气图标
点击上面的“开发文档”，找到“天气图标”，把相关的天气图标下载下来，然后选择里面喜欢的图表样式解压到images文件中去。（个人觉得下面这种好看）
可以把之前设置的图片改为999.png图片，这个是没有加载到天气图片的一个提示。

（2）获取API
“开发文档”中找到“API”，切到“城市信息搜索”一栏，这里有获取城市天气信息的详细介绍：
可以通过以下方式查看能够获取到的数据概览（以北京市为例）：
复制“请求URL”中的网址数据，把“{请求参数}”部分改为必选的两个location和key的参数数据：

https://geoapi.heweather.net/v2/city/lookup？location=beijing&key=a38457c8d0b24333aa2262595ebb55b6

访问网址就会获得以下信息：
返回的数据中的参数、参数描述等都已经显示在“城市信息搜索”中。

（3）服务器配置
登录“微信公众平台”在首页找到“开发”->“开发设置”->“服务器域名”->“开始配置”->微信扫码登录->配置服务器信息：
在request合法域名中输入：https://geoapi.heweather.net，保存提交即可。
如果编辑页面的“详情”中显示如下，则说明配置成功（如果这一步配置不成功，则无法进行以下所有步骤）

2.2.1

（估计就到此为止了……）