实习日志day3——6.19

一、框架

1、全局配置

permission

2、框架接口

 获取应用实例：const app = getApp()
    App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。
    
    AppObject getApp(Object object)：获取到小程序全局唯一的 App 实例。
    
二、组件

swiper、滑块视图容器。其中只可放置swiper-intem组件，否则会导致未定义的行为。
属性
            类型
            默认值
            必填
            说明
        indicator-dots
            boolean
            false
            否
            是否显示面板指示点
        indicator-color
            color
            rgba(0, 0, 0, .3)
            否
            指示点颜色
        indicator-active-color
            color
            #000000
            否
            当前选中的指示点颜色
        autoplay
            boolean
            false
            否
            是否自动切换
        current
            number
            0
            否
            当前所在滑块的 index
        属性
            类型
            默认值
            必填
            说明
        data
            Object
             
             
            页面的初始数据
        onLoad
            function
             
             
            生命周期回调—监听页面加载
        onShow
            function
             
             
            生命周期回调—监听页面显示
        onReady
            function
             
             
            生命周期回调—监听页面初次渲染完
        说明：

data 是页面第一次渲染使用的初始数据。页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。
    渲染层可以通过 wxml 对数据进行绑定。
    <view> {{ message }} </view>

    
    更改data属性：this.setdata(object)
 

<!-- 引用模板 -->

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

 

<!-- 定义一个模板 -->

<template name="modal">

{{index}}:{{name}}

<text>{{time}}</text>

</template>

 

<!-- 导入一个模板 -->

<import src="../../template.wxml"/>

onLoad(Object query)

页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

 

数据绑定
      WXML 中的动态数据均来自对应 Page 的 data。

简单绑定
        数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

1、内容

<view> {{ message }} </view>

2、组件属性(需要在双引号之内

<view id="item-{{id}}"> </view>

3、控制属性(需要在双引号之内)

<view wx:if="{{condition}}"> </view>

4、关键字(需要在双引号之内)

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"> </checkbox>

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

 

运算
可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

1、三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

 

2、逻辑判断

<view wx:if="{{length > 5}}"> </view>

3、字符串运算

<view>{{"hello" + name}}</view>

4、数据路径运算

<view>{{object.key}} {{array[0]}}</view>

5、组合

也可以在 Mustache 内直接进行组合，构成新的对象或者数组。

6、数组

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

 

7、对象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>

Page({
  data: {
    a: 1,
    b: 2
  }
})

最终组合成的对象是 {for: 1, bar: 2}

注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面

注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

等同于

<view wx:for="{{[1,2,3] + ' '}}">
  {{item}}
</view>
 

 

练习

1.把整个“地图”页面变成地图

classify.js

// pages/classify/classify.js

Page({

data: {

longitude: 0,

latitude: 0

},

onLoad: function () {

console.log(this)

},

onReady: function () {

// console.log(this)

var _this = this;

wx.getLocation({

success: function (res) {

console.log(res);

_this.setData({

longitude: res.longitude,

latitude: res.latitude

})

}

})

 

}

})

 

classfiy.wxml

<view style='width:100%;height:100%'>

<map longitude="{{longitude}}" latitude="{{latitude}}" scale="13" style='width:100%;height:100%' show-location="true" enable-rotate="true"></map>

</view>

2.调用微信小程序的接口获取你的手机信息，在“我的” 页面里把手机信息展示出来（包括手机型号、手机系统、分辨率）

// pages/mine/mine.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    uicon:'../../assets/icons/my.png',
    uname:'用户名',
    model:'',
    system:'',
    screenHeight:'',
    screenWidth:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // this
    var _this = this;
    // 获取手机系统信息
    wx.getSystemInfo({
      success: function (res) {
        console.log(res);
        _this.setData({
          model: res.model,
          system: res.system,
          screenHeight: res.screenHeight,
          screenWidth: res.screenWidth
        })
      }
    });
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function (res) {
              _this.setData({
                uicon: res.userInfo.avatarUrl,
                uname: res.userInfo.nickName
              })
            }
          })
        } else {
          bindGetUserInfo();
        }
      }
    });
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

<!--pages/mine/mine.wxml-->
<view class="container">
  <view class='bg'>
    <!-- <image class='auto-img' src='../../images/bg.jpg' /> -->

    <image class='usericon' src='{{uicon}}'></image>
    <text>{{uname}}</text>
  </view>
  <view>手机型号：{{model}}</view>
  <view>手机版本号：{{system}}</view>
  <view>手机屏幕分辨率：{{screenWidth}} * {{screenHeight}}</view>