实训日记·threeday

数据绑定

 

容器+组件+框架

常用组件：轮播图（swiper滑块视图容器）参数值：swiper+block+swiper-item+image标签（路径src、宽高不能直接修改，需要使用class或者样式style修改可以使用数据绑定获取设备的宽高优化图片的显示）多个内嵌的swiper-item可以实现轮播图，在swiper标签里面可以设置轮播器的显示设置，如指示点的颜色和样式、是否自动轮播、衔接轮播等

 

数据绑定在app.js内的page+Data内定义，使用{{data}}动态获取数值

控制数据需要使用wx：if或者wx：for，这里if内的数值应该是boolean类型数值

条件渲染if elif else

列表渲染 for循环data里的一个数组，使{index}.{{item.url}}//下标.每一项获取元素值，若元素不止一个，需要使用key给元素设定唯一标识符

可以使用wx：for-index和wx：for-item指定当前数组的下标和数值

 

bindtap点击事件

 可以使用setData方法改变绑定的数值，在.js内设置function处理事件  

if与hidden的区别：if是惰性的，而hidden组件始终会被渲染

若程序频繁切换应该使用hidden，否则应该使用if

 

模板template，实现代码段的复用

//app.js

obj:{

name:"a",

index:"b",

time:"c"

},

 

//index.wxml

<template name="modal">

{{obj.index}}:{{obj.name}}

<text>{{obj.time}}</text>

</template>

//调用模板

<template is="modal" data="{{...obj}}"></template>

通过obj设置参数，也应该用obj获得数值

解构：在传进来的参数（obj）前加“...”可以实现解构，在模板使用时可以直接使用键名获得数值

使用import可以导入页外摸板

 

三目运算法都要包裹在双花括号里面

 

单线程

获得手机屏幕信息wx.getSystemInfoSync()是xs.getSystemInfo()同步版本

 

地图map 必填值：经度和纬度（东正西负，北正南负）

 

homework：

 

//map.js

// pages/map/map.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    longitude: 0,
    latitude: 0,
    speed: 0,
    accuracy: 0,
    altitude: 0,
    markers: [{
      iconPath: "../../img/map/sign.png",
      latitude: 0,
      longitude: 0,
      width: 20,
      height: 30
    }],
  },
  

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    wx.showLoading({
      title: "定位中",
      mask: true
    })
    wx.getLocation({
      type: 'gcj02',
      altitude: true,//高精度定位
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        var speed = res.speed
        var accuracy = res.accuracy
        var altitude = res.altitude
        
        // markers: [{
        //   latitude: res.latitude,
        //   longitude: res.longitude
        // }]

        that.setData({
          longitude: longitude,
          latitude: latitude,
          speed: speed,
          accuracy: accuracy,
          altitude: altitude,
        })
      },
      complete: function () {
        //隐藏定位中信息进度
        wx.hideLoading()
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

//map.wxml
<view class='view'>
  <map  longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}" show-location
  show-compass>
    <cover-view class='cv'>
    经度：{{longitude}}
    </cover-view>
     <cover-view class='cv'>
    纬度：{{latitude}}
    </cover-view>
    <cover-view class='cv'>
    速度：{{speed}}
    </cover-view>
    <cover-view class='cv'>
    高度：{{altitude}}
    </cover-view>
    <cover-view class='cv'>
    精度：{{accuracy}}
    </cover-view>
  </map>
</view>


//main.js
// pages/main/main.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
   model:null,
   width:0,
   height:0,
   brand:0,
  pixelRatio:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this
    wx.getSystemInfo({
      success(res) {
        console.log(res.model)
        console.log(res.pixelRatio)
        console.log(res.windowWidth)
        console.log(res.windowHeight)
        console.log(res.language)
        console.log(res.version)
        console.log(res.platform)

        that.setData({
          brand: res.brand,
          pixelRatio: res.pixelRatio,
          model:res.model,
          width: res.windowWidth,
          height: res.windowHeight,
        })
      }
    })
    var that = this;
    /**
     * 获取用户信息
     */
    wx.getUserInfo({
      success: function (res) {
        console.log(res);
        var avatarUrl = 'userInfo.avatarUrl';
        var nickName = 'userInfo.nickName';
        that.setData({
          [avatarUrl]: res.userInfo.avatarUrl,
          [nickName]: res.userInfo.nickName,
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

//main.wxss

/* pages/main/main.wxss */
.one{
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  width: 100%;
  height: 300px;
}
.username{
  color: #999999;
  align-self:center;
}
.userimg{
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%; 
  align-self:center;
}

.two{
  display: flex;
  flex-direction: column;
}
.model{
  color: #999999;
}
.min{
   color: #999999;
}


//main.wxml
<view >
<view class="one">
  <image class="userimg" src='{{userInfo.avatarUrl}}'></image>
  <view class="username">{{userInfo.nickName}}</view>
</view>
<view class="two"> 
  <view class='model'>设备品牌：{{brand}}</view>
  <view class='model'>手机型号：{{model}}</view>
  <view class='model'>像素比：{{pixelRatio}}</view>
  <view class='min'>屏幕像素：{{width}}×{{height}}</view>
</view>
</view>