微信小程序实训day03-微信小程序项目框架、组件应用

最新推荐文章于 2022-08-20 11:13:19 发布

_lijian_

最新推荐文章于 2022-08-20 11:13:19 发布

阅读量326

点赞数 1

分类专栏：作业

本文链接：https://blog.csdn.net/ljlj8888/article/details/92846882

版权

作业专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1、数据绑定

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

简单绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：<view> {{ message }} </view>

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

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

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

2、列表渲染

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

3、条件渲染

wx:if

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

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

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

如不提供 wx:key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

4、模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

定义模板

使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如：

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用模板

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

<template is="msgItem" data="{{...item}}"/>

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

5、引用

WXML 提供两种文件引用方式import和include。

import

import可以在该文件中使用目标文件定义的template，如：

在 item.wxml 中定义了一个叫item的template：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

6、swiper组件

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

属性	类型	默认值	必填	说明	最低版本
indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.1.0
autoplay	boolean	false	否	是否自动切换	1.0.0
current	number	0	否	当前所在滑块的 index	1.0.0
interval	number	5000	否	自动切换时间间隔	1.0.0
duration	number	500	否	滑动动画时长	1.0.0
circular	boolean	false	否	是否采用衔接滑动	1.0.0
vertical	boolean	false	否	滑动方向是否为纵向	1.0.0
previous-margin	string	"0px"	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	1.9.0
next-margin	string	"0px"	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	1.9.0
display-multiple-items	number	1	否	同时显示的滑块数量	1.9.0
skip-hidden-item-layout	boolean	false	否	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	1.9.0
easing-function	string	"default"	否	指定 swiper 切换缓动动画类型	2.6.5
bindchange	eventhandle		否	current 改变时会触发 change 事件，event.detail = {current, source}	1.0.0
bindtransition	eventhandle		否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}	2.4.3
bindanimationfinish	eventhandle		否	动画结束时会触发 animationfinish 事件，event.detail 同上	1.9.0

easing-function 的合法值

值	说明	最低版本
default	默认缓动函数
linear	线性动画
easeInCubic	缓入动画
easeOutCubic	缓出动画
easeInOutCubic	缓入缓出动画

7、map

地图。相关api wx.createMapContext。

个性化地图能力可在小程序后台“开发-开发者工具-腾讯位置服务”申请开通，详见《小程序个性地图使用指南》。小程序内地图组件应使用同一 subkey，可通过 layer-style（地图官网设置的样式 style 编号）属性选择不同的底图风格。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

8、作业

1、在“我的” 页面调用微信小程序里的方法，把用户头像、用户名称做一个列表
2、调用微信小程序的接口获取你的手机信息，在“我的” 页面里把手机信息展示出来（包括手机型号、手机系统、分辨率）
3、把整个“地图”页面变成地图（最好有浮标定位到当前位置）

我的页面：

wxml

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class='sqb'> 授权 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <view >
      <view class='title'>
      <text>用户信息</text>
      </view >
  <block wx:for='{{userdata}}' wx:key='index' >
    <view class='dataitem' >
        <text>{{item.item}} : {{item.itemdata}}</text>
    </view>
  </block>
</view>
<view >
      <view class='title'>
      <text>手机信息</text>
      </view >
  <block wx:for='{{phonedata}}' wx:key='index' >
    <view class='dataitem' >
        <text>{{item.item}} : {{item.itemdata}}</text>
    </view>
  </block>
</view>
    </block>
  </view>
</view>

wxss

.sqb{
  margin-top: 100rpx;
}
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.dataitem{
  color: #aaa;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.title{
  text-align: center;
}

const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {},
    userdata:[],
    phonedata:[],
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')

  },
  getUserInfo: function (e) {
    console.log(e)
    if ( e.detail.userInfo){
      this.getuserdata(e.detail.userInfo)
      this.setData({
        userInfo: e.detail.userInfo,
        hasUserInfo: true
      })
    }else{
      this.setData({
        hasUserInfo: false
      })
    }
    
  },
  getuserdata:function(e){
    var data = [{ 'item': '昵称', 'itemdata': '' }, { 'item': '国家', 'itemdata': '' }, { 'item': '城市', 'itemdata': '' }]
    data[0].itemdata=e.nickName
    data[1].itemdata = e.country
    data[2].itemdata= e.province + '/' + e.city
    this.setData({
      userdata:data
    })
    console.log(data)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if (app.globalData.userInfo) {
      this.getuserdata(app.globalData.userInfo)
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.getuserdata(res.userInfo)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.getuserdata(app.globalData.userInfo)
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
    console.log(this.data.userInfo)
    var pdata = [{ 'item': '手机型号', 'itemdata': '' }, { 'item': '手机系统', 'itemdata': '' }, { 'item': '分辨率', 'itemdata': ''} ]
    var i
    var that=this
    wx.getSystemInfo({
      success: function (res) {
        pdata[0].itemdata=res.model
        pdata[1].itemdata=res.system
        pdata[2].itemdata=res.screenWidth+'*'+res.screenHeight
        that.setData({
          phonedata:pdata
        })
        console.log(pdata)
      },
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

地图页面：

wxml

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

wxss

page{
  width: 100%;
  height: 100%;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    longitude:0,
    latitude:0,

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var that=this;
    wx.getLocation({
      success: function(res) {
        console.log(res)
        that.setData({
          latitude:res.latitude,
          longitude:res.longitude
        })
        console.log(that.data.latitude,that.data.longitude)
      },
    })

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

_lijian_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
微信小程序实训day03-微信小程序项目框架、组件应用

1、数据绑定WXML 中的动态数据均来自对应 Page 的 data。简单绑定数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：<view> {{ message }} </view>关键字(需要在双引号之内)true：boolean 类型的 true，代表真值。false： boolean 类型的 false，代表假值。...
复制链接

扫一扫