微信小程序开发笔记

其他 2018-07-12 16:51:14 阅读次数: 0

微信小程序开发笔记

在点击事件触发后，通过事件传入参数

可以传入event参数
在wxml中绑定事件函数

  <input name='price' type="number" placeholder="price" value="{{item.price}}" bindinput='inputPrice'></input>

在js中处理事件

  inputPrice: function (e) {
    let price = e.detail.value;
    console.log('price: ', price);
    if (isNaN(price)) {
      price = 0;
    }
    const x = this.data.item;
    this.setData({
      item: {
        ...x,
        price: price
      },
      pagestatus: 'edited',
    });
  },

事件的消息结构如下:

{
"type":"tap",
"timeStamp":895,
"target": {
  "id": "tapTest",
  "dataset":  {
    "hi":"WeChat"
  }
},
"currentTarget":  {
  "id": "tapTest",
  "dataset": {
    "hi":"WeChat"
  }
},
"detail": {
  "x":53,
  "y":14
},
"touches":[{
  "identifier":0,
  "pageX":53,
  "pageY":14,
  "clientX":53,
  "clientY":14
}],
"changedTouches":[{
  "identifier":0,
  "pageX":53,
  "pageY":14,
  "clientX":53,
  "clientY":14
}]
}

显示table的方式

需要使用flex布局, 需要在.table中定义diaplay: flex；　

<view class="table">
  <view class="tr bg-w">
    <view class="th">head1</view>
    <view class="th">head2</view>
    <view class="th ">head3</view>
  </view>
  <block wx:for="{{listData}}" wx:key="{{code}}">
    <view class="tr bg-g" wx:if="{{index % 2 == 0}}">
      <view class="td">{{item.code}}</view>
      <view class="td">{{item.text}}</view>
      <view class="td">{{item.type}}</view>
    </view>
    <view class="tr" wx:else>
      <view class="td">{{item.code}}</view>
      <view class="td">{{item.text}}</view>
      <view class="td">{{item.type}}</view>
    </view>
  </block>
</view>
.table {
  border: 0px solid darkgray;
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 3rem;
  align-items: center;
}
.td {
  width:40%;
  justify-content: center;
  text-align: center;
}
.bg-w{
  background: snow;
}
.bg-g{
  background: #E6F3F9;
}
.th {
  display: flex;
  width: 40%;
  justify-content: center;
  background: #3366FF;
  color: #fff;
  height: 3rem;
  align-items: center;
}

在{{}}中使用函数或者表达式

在{{}}中使用数据变量取值，复杂的逻辑需要在函数中实现．

跨页传递数据

  1. 设置当前页面的数据
this.setData({item:e.target.dataSet.item;})
  1. 跳转至下一页面
  wx.navigateTo({url:path})
  1. 获取上一页面的数据
  var pages = getCurrentPages();
  var curPage = pages[pages.length-1];
  var prePage = pages[pages.length-2];
  prePage.data.item;

小程序样式不支持hidden属性

列表页左划删除功能

bindevent of bindtouchstart, bindtouchmove;
当滑动时，需要设置isTouchMove，然后样式为touch-move-active。

<view class="container">
 <view class="tr {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="">
  <view class="td name">{{item.content}}</view>
  <view class="del" catchtap="del" data-index="{{index}}">删除</view>
 </view>
</view>
 ```

在每一行`tr`的显示中，需要添加，其中没一列都使用trans定义起始点偏移量；在第一列的`.tr .name`定义`-90`偏移量。

```css
.tr {
display:flex; 
overflow:hidden; 
}

.td {
-webkit-transition: all 0.4s; 
transition: all 0.4s; 
-webkit-transform: translateX(90px);
transform: translateX(90px); 

}

.tr .name {
  margin-left: -90px
}





<div class="se-preview-section-delimiter"></div>

最后一列del,正常显示时会被隐藏，在滑动后，trans偏移变为0，这时才会显示出来。

.del {
 background-color: orangered;
 width: 90px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 color: #fff;
 -webkit-transform: translateX(90px);
 transform: translateX(90px);
 -webkit-transition: all 0.4s;
 transition: all 0.4s;
}
.touch-move-active .td{
 -webkit-transform: translateX(0);
 transform: translateX(0);
}




<div class="se-preview-section-delimiter"></div>

计算元素的起始点(0,0)，根据touchmove事件中的e.changedTouches[0].clientX,clientY计算偏移，如果是向左偏移，设置属性.touch-move-active，
之后translateX(0)样式激活，让右侧隐藏的del按钮显示。

var app = getApp()
Page({
 data: {
  items: [],
  startX: 0, //开始坐标
  startY: 0
 },
 onLoad: function () {
  for (var i = 0; i < 10; i++) {
   this.data.items.push({
    content: i + " 向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦",
    isTouchMove: false //默认全隐藏删除
   })
  }
  this.setData({
   items: this.data.items
  })
 },
 //手指触摸动作开始 记录起点X坐标
 touchstart: function (e) {
  //开始触摸时 重置所有删除
  this.data.items.forEach(function (v, i) {
   if (v.isTouchMove)//只操作为true的
    v.isTouchMove = false;
  })
  this.setData({
   startX: e.changedTouches[0].clientX,
   startY: e.changedTouches[0].clientY,
   items: this.data.items
  })
 },
 //滑动事件处理
 touchmove: function (e) {
  var that = this,
   index = e.currentTarget.dataset.index,//当前索引
   startX = that.data.startX,//开始X坐标
   startY = that.data.startY,//开始Y坐标
   touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
   touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
   //获取滑动角度
   angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
  that.data.items.forEach(function (v, i) {
   v.isTouchMove = false
   //滑动超过30度角 return
   if (Math.abs(angle) > 30) return;
   if (i == index) {
    if (touchMoveX > startX) //右滑
     v.isTouchMove = false
    else //左滑
     v.isTouchMove = true
   }
  })
  //更新数据
  that.setData({
   items: that.data.items
  })
 },
 /**
  * 计算滑动角度
  * @param {Object} start 起点坐标
  * @param {Object} end 终点坐标
  */
 angle: function (start, end) {
  var _X = end.X - start.X,
   _Y = end.Y - start.Y
  //返回角度 /Math.atan()返回数字的反正切值
  return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
 },
 //删除事件
 del: function (e) {
  this.data.items.splice(e.currentTarget.dataset.index, 1)
  this.setData({
   items: this.data.items
  })
 }
})

计算元素的起始点(0,0)，根据`touchmove`事件中的`e.changedTouches[0].clientX,clientY`计算偏移，如果是向左偏移，设置属性`.touch-move-active`，
之后`translateX(0)`样式激活，让右侧隐藏的`del`按钮显示。
```js
var app = getApp()
Page({
 data: {
  items: [],
  startX: 0, //开始坐标
  startY: 0
 },
 onLoad: function () {
  for (var i = 0; i < 10; i++) {
   this.data.items.push({
    content: i + " 向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦",
    isTouchMove: false //默认全隐藏删除
   })
  }
  this.setData({
   items: this.data.items
  })
 },
 //手指触摸动作开始 记录起点X坐标
 touchstart: function (e) {
  //开始触摸时 重置所有删除
  this.data.items.forEach(function (v, i) {
   if (v.isTouchMove)//只操作为true的
    v.isTouchMove = false;
  })
  this.setData({
   startX: e.changedTouches[0].clientX,
   startY: e.changedTouches[0].clientY,
   items: this.data.items
  })
 },
 //滑动事件处理
 touchmove: function (e) {
  var that = this,
   index = e.currentTarget.dataset.index,//当前索引
   startX = that.data.startX,//开始X坐标
   startY = that.data.startY,//开始Y坐标
   touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
   touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
   //获取滑动角度
   angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
  that.data.items.forEach(function (v, i) {
   v.isTouchMove = false
   //滑动超过30度角 return
   if (Math.abs(angle) > 30) return;
   if (i == index) {
    if (touchMoveX > startX) //右滑
     v.isTouchMove = false
    else //左滑
     v.isTouchMove = true
   }
  })
  //更新数据
  that.setData({
   items: that.data.items
  })
 },
 /**
  * 计算滑动角度
  * @param {Object} start 起点坐标
  * @param {Object} end 终点坐标
  */
 angle: function (start, end) {
  var _X = end.X - start.X,
   _Y = end.Y - start.Y
  //返回角度 /Math.atan()返回数字的反正切值
  return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
 },
 //删除事件
 del: function (e) {
  this.data.items.splice(e.currentTarget.dataset.index, 1)
  this.setData({
   items: this.data.items
  })
 }
})

登录验证功能

  • 登陆流程
    使用微信的API(wx.login)获取到code变量，然后发往后台，后台再使用code+appid+appsecret发送微信的http服务器进行登陆验证，如果登陆成功，会获得唯一的编号openid．
    在业务逻辑中，可以使用openid关联用户账户，在数据库中查询到用户数据,　获取到用户需要的数据，如用户权限等．可以把关键字段包装到jwt token中自定义字段中．

这里写图片描述

  • 验证流程

验证逻辑，使用jwt.verify验证token的有效性; 然后获取token中保留的自定义字段．

这里写图片描述

  • 使用openid作为用户登录的唯一字符串
  • 如果有多个应用共享，需要使用unionid字符串

csdn

猜你喜欢

转载自blog.csdn.net/robin912/article/details/80815479
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022