项目九遇到的知识点

  • 第一个微信小程序项目有点兴奋哦

一、跳转页面传参问题

1、a页面跳转到b页面

a页面内容

<view class="test">
  <view  wx:for="{{objList}}" wx:key="idx" wx:for-item="item" class="item-bg">
    <view>姓名：{{item.name}}</view>
    <view>性别：{{item.sex}}</view>
    <view data-address="{{item.id}}" bindtap="HandleAddress">地址：{{item.address}}   </view>
  </view>
</view>
  • data-address="{{item.id}}" 重要
  • e.currentTarget.dataset.address
  • 实现方式：data-名字="{{值}}" e.currentTarget.dataset.名字

a.js

Page({
  data: {
    objList: [
      {
        id: 1,
        name: '易烊千玺',
        sex: '男',
        address: 'xxx'
      },
      {
        id: 2,
        name: '张一三',
        sex: '男',
        address: 'xxx'
      }
    ],
  },
  HandleAddress(e){
    let tmpId = e.currentTarget.dataset.address; // 唯一识别
    wx.navigateTo({
      url: '../b/b?tmpId=' + tmpId
    })
  }
})

2、b页面接收

Page({
  data: {
	tmpId: ''
  },

  onLoad: function (options) {
	this.data.tmpId = options.tmpId;
  }
}）
  • 这样就可以在b页面接收到a页面的参数

3、页面跳转传参数(参数是对象)

  • a页面使用JSON.stringify(obj)对需要传递的对象数据进行转换(转换为json格式的数据)
  • b页面使用JSON.parse(json)转换为js类型的数据。

a页面

// 跳转页面传递对象
handletap() {
	let obj = {
		id: xx,
		sex: xx,
		name: xx
	}
 	let data = JSON.stringify(obj);
	wx.navigataTo({
      url: '../b/b?data=' + data    
	})
}

b页面

onload:function(option){
	let data = JSON.parse(option.data)
}

二、bindtap传参

1、微信小程序bindtap传参

  • 通过使用data - xxxx 的方法标识来传值
  • 如何获取data-xxxx传递的值？
  • 通过数据解析一层层找到数据，var id=e.target.dataset.id(根据你的data-id的取名)

点击按钮

<view bindtap="handleSubmit data-sex="{{objList.sex}}" data-name="{{objList.name}}" >确定<view>

handleSubmit(e) {
	// data里设置了sex,name
	this.setData({
		sex: e.currentTarget.dataset.sex,
		name: e.currentTarget.dataset.name
	})
	let obj = {
		sex: e.currentTarget.dataset.sex,
		name: e.currentTarget.dataset.name
	}
}
  • e.target.dataset.名字 和 e.currentTarget.dataset.名字都可以取到值

2、target和currentTarget区别

  • 事件对象BaseEvent基础事件对象属性列表
  • type String 事件类型
  • timeStamp Integer 事件生成时的时间戳
  • target Object 触发事件的组件的一些属性值集合
  • currentTarget Object 当前组件的一些属性值集合
  • mark Object 事件标记数据

target

  • 触发事件的源组件
  • id String 事件源组件的id
  • dataset Object 事件源组件上由data-开头的自定义属性组成的集合

currentTarget

  • 事件绑定的当前组件
  • id String 当前组件的id
  • dataset Object 当前组件上由data-开头的自定义属性组成的集合

currentTarget和target的区别

  • 　target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。但事件流处于目标阶段，target与currentTarget指向一样， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象。在微信小程序中也可总结为：target指向发生事件的组件，currentTarget指向绑定事件的组件。

  • target指向的是触发事件的元素

  • currentTarget指向的是捕获事件的元素（也就是元素自身）

      <view catchTap = "fetchImage">
    <image src="a.png" data-postId = "item.id">
  </view>
  fetchImage:function(event){
		var  id = event.target.dataset.postid;
  }

  • target:指的是image

  • currentTarget:指的是view

三、下拉刷新和上拉加载

1、下拉刷新的时候出现三个圆点

  • enablePullDownRefresh 是否开启当前页面下拉刷新。默认是false
  • backgroundTextStyle 下拉 loading 的样式，仅支持 dark / light

a.json

{
  "backgroundTextStyle": "dark",
  "enablePullDownRefresh": true
}

2、上拉加载下拉刷新

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

  },

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

  }
})
  • 在移动端，随着手指不断向上滑动，当内容将要到达屏幕底部的时候，页面会随之不断的加载后续内容，直到没有新内容为止（我们是有底线的~），我们将称之为上拉加载，从技术角度来说，也可以称之为触发加载。
  • 这种方式其实是PC端分页浏览的一个分页形式变种，很多pc网页也会采用这种方式来进行内容分页加载，以替代比较古老的1,2,3,4,5...分页（称之为有页码的分页，这种分页方式其实在一些场景下仍然是非常有用的，特别是在后台管理系统页面中需要精确抵达某一数据页的场景）
  • 上面两段是百度的，
  • 原文地址：

3、上拉加载

  • 下拉加载的本质是一个分页加载，每次触发加载下一页的条件是当页面到达底部

1.初始页号为1，向后端请求第一页数据（数据中包含数据总条数，及当前页的数据数组），返回后渲染该页数据

2.监听页面是否被滚动到底部，是的话，则递增页号（+1）并向后端请求该新页号的数据，返回结果后，将该页数据添加到之前已加载的数据后面，并重新渲染

3.重复步骤2的操作

正式开始

Page({
  /**
   * 页面的初始数据
   */
  data: {
    objList: [], // 页面上显示的数据
    page: 1, // 当前页
    size: 4, // 每页显示的个数
    pages: 0 // 总个数
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  // 初始化数据
  InitLoad(){
    wx.showLoading({
      title: '拼命加载中',
    })
    wx.request({
      url: 'xxx',
      // 后端要的参数
      data: {
        page: this.data.page,
        size: this.data.size
      },
      method: 'POST',
      // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: function (res) {
        let list = res.data.list; // 后端返回的列表
        this.data.objList = this.data.objList.concat(list)
        this.setData({
          objList: this.data.objList,
          pages: res.data.TotalItemCount // 后端返回的总个数
        })
      },
      fail: function () {
        // fail
      },
      complete: function () {
        wx.hideLoading()
      }
    })               
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.data.page = 1;
    this.InitLoad();
    wx.stopPullDownRefresh();
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    // 当总个数大于列表的长度页码++，否则不在请求数据  
    if(this.data.pages > this.data.objList.length){
      this.data.page ++;
      this.InitLoad();
    }
  }
})

4、（/Date(1570032000000+0800)/）字符串（时间戳）转日期

util.js

//时间戳转换成日期时间
function date_time(val) {
  var date = new Date(parseInt(val.replace("/Date(", "").replace(")/", ""), 10));

  //月份为0-11，所以+1，月份小于10时补个0
  var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
  var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var hour = date.getHours();
  var minute = date.getMinutes();
  var second = date.getSeconds();
  //年月日时分秒
  var theTime = date.getFullYear() + "-" + month + "-" + currentDate + " " + hour + ":" + minute + ":" + second;
  return theTime ;

}
module.exports = {
  date_time: date_time
}

在需要的转换时间戳的地方引用util.js

var util = require("../../utils/util.js");
wx.request({
    url: 'url',
	header: {
	    'content-type': 'application/json'
	},
	success:function(res) {
	    var datas = res.data.data;
	    for (var i in datas) {
	        datas[i].CreateTime = util.date_time(datas[i].CreateTime)
	    }
	}
})

四、小程序的登录

wx.login

wx.login({
  success (res) {
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://test.com/onLogin', // 登录接口
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

其他知识点

1、缓存

  • wx.setStorageSync('key', 'value') （设置缓存）
  • var value = wx.getStorageSync('key') （得到本地缓存）

2、微信小程序Image组件中scaleToFill和aspectFit模式应用详解

  • scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素。
  • aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。//mode="aspectFit"
  • 缩放 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

3、微信小程序---显示与隐藏hidden

  • 1、wxml页面部分

      <view bindtap="clickMe">点击</view>
  //这是显示隐藏的部分
  <view hidden="{{hiddenName}}">隐藏显示部分</view>

  • 2、js部分

      page({
      data:{
          hiddenName:true
      },
      clickMe:function(e){
          this.setData({
              hiddenName:!this.data.hiddenName
          })
      }
  })

注意：hidden用于频繁切换

4、小程序中使用input标签，添加背景图，给了no-repeat,还是会出现多个背景图？

  • 原因：是input样式的padding-left引起的
  • 解决方法：把背景图放在input标签的外层

5、微信小程序中placeholder的样式

  • 通常，现代浏览器大多支持::placeholder选择器，用于设置placeholder的样式，但是在微信小程序中并不支持这种方式，而是提供了一个专门的属性(placeholder-class)

  • <input placeholder-class="place-holder" class="input-text" name="username" placeholder="用户名" />

  • 在样式文件中就可以使用自己定义的这个类了

      .place-holder{
  	font-size: 12px;
  }

6、微信小程序input标签中文字被遮盖的问题

  • 在设置input组件的宽度的时候，如果是width的值，则不能用百分比，而是要真实的数据，比如px,rpx等
  • 还有一种情况就是真需要用到百分比，那么可设置的input组件的min-width和max-width，但注意，如果设置min-width或max-width属性，不可设置width属性

7、微信小程序的picker使用对象数组

  • range-key中的字段必须带单引号，否则无效！！！

      <picker class="picker" bindchange="bindChange" value="{{Index}}" range="{{Data}}" range-key="name">
  	<view>当前选择:{{Data[Index].name}}</view>
  </picker>
  data:{
  	Data:[
  		{
  			id:0,
  			value: "a",
  			name: A
  		},
  		{
  			id:1,
  			value: "b",
  			name: B
  		}
  	]
  }

8、拨打电话

wx.makePhoneCall(Object object)
拨打电话
wx.makePhoneCall({
  phoneNumber: '1340000' //仅为示例，并非真实的电话号码
})
posted @ 2019-06-24 13:54  不完美的完美  阅读(354)  评论(0)    收藏  举报