实习日志03

一、框架

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>

练习： 

把整个“地图”页面变成地图（最好有浮标定位到当前位置）

// pages/classify/classify.js
Page({
  data: {
    latitude: 23.099994,
    longitude: 113.324520,
       markers: [{
      iconPath: "../../assets/icons/position2.png",
      id: 0,
      width: 50,
      height: 50
    }],
    polyline: [{
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }],
      color: "#FF0000DD",
      width: 2,
      dottedLine: true
    }],
    controls: [{
      id: 1,
      iconPath: '../../assets/icons/position2.png',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50
      },
      clickable: true
    }]
  },
 
  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,
         
        })
        _this.setData({
          latitude: res.latitude,
          longitude: res.longitude,
          // markers: [{
          //   id: "1",
          //   latitude: res.latitude,
          //   longitude: res.longitude,
          //   width: 50,
          //   height: 50,
          //   iconPath: "../../assets/icons/position2.png"
          // }],
          polyline: [{
            points: [{
              latitude: res.latitude,
              longitude: res.longitude,
            }],
            color: "#FF0000DD",
            width: 2,
            dottedLine: true
          }],
          controls: [{
            id: 1,
            iconPath: '../../assets/icons/position2.png',
            position: {
              left: 0,
              top: 300 - 50,
              width: 50,
              height: 50
            },
            clickable: true
            
          }]
        })
      }
      
    })
    
  }
})

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

 

在“我的” 页面调用微信小程序里的方法，把用户头像、用户名称做一个列表，调用微信小程序的接口获取你的手机信息，在“我的” 页面里把手机信息展示出来（包括手机型号、手机系统、分辨率）

// 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>

  
</view>