微信小程序开发笔记

超、凢脫俗 2022-05-21 00:15 440阅读 0赞

# 微信小程序开发笔记 #

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

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

在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`；

.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`按钮显示。

计算元素的起始点(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中自定义字段中．

![这里写图片描述][70]

*  验证流程

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

![这里写图片描述][70 1]

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

[csdn][]

[70]: /images/20220521/7bf65e93687b4284a60a58c9813ac93b.png
[70 1]: /images/20220521/7e8592a2457f4ad7afdff2e8c9ac81d9.png
[csdn]: https://blog.csdn.net/robin912/article/details/80815479