微信小程序案例学习笔记

视频链接：https://www.bilibili.com/video/BV1i4411c7dU

一、获取信息

（一）页面创建

1.全局三个文件，分别是app.js app.json（放入{}） app.wxss（名称不可更改）

2.创建Pages目录文件（作用是用来放各个页面的）

3.里面创建index目录,里面新建页面（给页面起名字，并且创建四个文件）
（1）js：页面逻辑实现
（2）json：负责标题栏和一些状态栏
（3）wxml：管理页面有什么
（4）wxss：页面排布

4.把内容单元封装在view内部（wxml）

<button open-type='getUserInfo' bindgetuserinfo='getMyInfo'>点击获取头像和昵称</button>
<!-- open-type='getUserInfo' 表示激活获取微信用户信息功能
bindgetuserinfo='getMyInfo' 表示获得的数据将传递给自定义函数getMyInfo，可以自己取-->

5.wxml变量写法：{ {“变量名称”}}

6.js文件中定义变量的方法：在data:{“定义变量”}
规则：变量名称+":"+"’"+内容+"’"
*两个变量之间用","隔开
eg：

data:{
   
    name:'Hello World',
    src:'/image/weixin.jpg'
},

7.js文件中函数的定义方法：
函数名+":"+function(“参数列表(可不写)”){“函数内容”}
*两个{}前后要有“，”

*修改data变量的方法：
this.setData({“修改变量”})
eg:

getMyInfo:function(e){
   
    console.log(e.detail.userInfo;
    let info=e.detail.userInfo;
    this.setData({
   
        name:info.nickName,//更新名称
        src:info.avatarUrl//更新图片来源
    })
},

8.json更改标题栏:
window":{
“内容”:“内容”,
…
},

（二）wxss-flex布局

详细介绍：https://www.cnblogs.com/hellocd/p/10443237.html

display:flex;
尺寸单位"rpx"：无视设备原先的尺寸，统一规定屏幕宽度为750rpx。

容器属性：

二、天气小程序

（一）picker

<picker>是从底部弹起的滚动选择器组件，目前根据mode属性值的不同支持五种选择器：普通选择器（默认），多列选择器，时间选择器，日期选择器，省市区选择器。
eg.
*wxml:

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

*js:

data:{
   
        region:['北京市','北京市','东城区']
    },
changeRegion: function (e) {
   
    this.setData({
   
      region: e.detail.value,
      now: ''
    })
    this.getWeather(); //更新天气
  },

省市区选择器：
value：表示选中的省市区，默认选中每一列的第一个值
bindchange：当value改变时触发change事件，event.detail={value:value}

（二）网络API

和风天气：提供的API接口
根据网站的相关代码提示和接口信息制作url
回到微信公众平台，添加服务器域名
网址：https://dev.qweather.com/docs/api/geo/

1.调用函数：this.“函数名”(参数列表)
eg. this.getWeather();

2.wx.request({
url:
data:
success:function(e){
通常先在控制台输出看一下
}
})
+更改变量值

getWeather: function () {
   
    var that = this; //this不可以直接在wxAPI函数内部使用
    wx.request({
    //寻找城市ID
      url: &#