实训第三天 微信小程序组件

今天讲了小程序的几个组件和API，包括轮播图，数据绑定，列表渲染，条件渲染，模板，API接口的获取手机信息和map地图等。这些组件和API的解释和使用方法在微信公众平台都有。
1.轮播图组件：swiper
老师的实例是在在js页面定义data，wxml页面使用轮播图组件代码引用它
js页面代码：Page({
  data:{
    msg:"Home",
    id:"txt",
    index:"5",
    imgurl: [{
      url: "../../images/b3.jpg"
    },],  //imgrul里面定义图片链接
wxml页面代码：
<swiper indicator-dots="true" indicator-color="#fff" indicator-active-color="#5fdec9">//出现指示器，且指示器颜色为白色，选中指示器颜色为 #5fdec9
  <block wx:for="{{imgurl}}" wx:key="{{index}}">
    <swiper-item>
      <image src='{{item.url}}' style='width:100%;height:100%;'></image>
    </swiper-item>
  </block>
</swiper>
2.数据绑定

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

3.模板template
①页内模板，只能在本页面内使用
定义模板
<template name="model">//定义一个名字为model的模板
<view>
    <text> {{obj.index}}: {{obj.name}} </text>
<text> {{index}}: {{name}} </text> //obj解构后
    <text> {{obj.time}} </text>
  </view>
</template>
使用模板
<template is="model" data="{{obj}}"></template>  //数据来源为脚本定义的obj
<template is="model" data="{{...obj}}"></template> //解构obj，obj的对象名就不用obj.对象名  
三目运算
<text wx:if="{{index==5 ?true :false}}">三目运算</text> //index=5就显示文字，否则不
②页外模板，每一个页面都可以使用，直接新建一个页面建立一个模板。再在各个页面导入和引用模板
新开一个template.wxml
定义一个模板
<template name="item">
<text>页面模板</text>
</template>
index.html导入模板
<import src="../../template.wxml"/>
引用模板
<template is="item">
4.API接口
获取手机系统信息
同步请求：wx.getSystemInfoSync    wx.getSystemInfo 的同步版本
异步请求：wx.getSystemInfo    获取系统信息
 获取手机信息
    wx.getSystemInfo({key:value})
    wx.getSystemInfo({
      success: function (res){
        console.log(res);
      }
    })
5.更改data属性
 this.setdata(object)
    this.setData({
  //更改的信息
    })
  },
6.map地图：经度纬度放大比例是必须有的
<view stytle='width:100%;height:100%'>
<map longitude="116" latitude="23.26" scale="13"stytle='width:100%;height:100%' >//东经是正的，西经是负的
<map longitude="{{longitude}}" latitude="{{latitude}}" scale="13"stytle='width:100%;height:100%'>
在js页面
wx.getLocation{{
success:function{res}{
console.log(res);},