问题是这样的，同一个云函数，手机上调用，跟电脑上调用，返回的日期居然相差一天。 直接上图，各位看看是怎么回事。。。。 这个是代码 [图片] 这个是电脑上调用结果 1650394920461 [图片] 这个是手机测试 日志结果 1650394552861 [图片] [图片] 我希望有大佬可以给我解惑，看是我什么地方理解错了。。。

- 当前 Bug 的表现（可附上截图） new Date 报错 Date(时间戳)  报错 我需要在wxml 里面触发函数把时间戳转换时间 。一直解决不了。哪位老师帮忙指点一下。

我们通常在写页面样式的时候想要实现一串文字超出我们指定的宽度就将他隐藏并且呢，加上省略号，这个呢非常简单直接看代码 单行文本溢出隐藏显示省略号：white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 但是有些时候呢我们就想要他显示3行在隐藏，那么使用上面的样式就不能够实现当下的问题了，这边我也同样贴出代码供使用 text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; tips:多行文本溢出隐藏时，-webkit-line-clamp: 2; 把2改成几就显示几行。灵活多变。

一、前言 开发中，我们经常会遇需要让组件在屏幕范围内时，按照正常布局排列，而组件滚出屏幕范围时，让其始终固定在屏幕顶部的情况，也就是常说的粘性布局。今天我们就一起用小程序来实现一个适用于不同场景下的粘性布局组件。 二、demo演示 如图，实现的组件主要适用于以下几种场景： 吸顶页面最上方； 吸顶与页面有固定距离的位置； 在指定容器内吸顶； 嵌套在scroll-view中吸顶。 [图片] 三、代码演示 其中，粘性组件通过<weimob-sticky></weimob-sticky>调用，参数信息用法如下： 参数 说明 类型 默认值 offset-top 吸顶时与顶部的距离，单位px number 0 z-index 吸顶时的 z-index number 99 container 一个函数，返回容器对应的 NodesRef 节点 function - scroll-top 当前滚动区域的滚动位置，非 null 时会禁用页面滚动事件的监听 number - 滚动时触发scroll函数，其中isFixed为是否吸顶，scrollTop为距离顶部的位置。详细代码如下。 3.1 页面代码 3.1.1 基础用法 [代码]<view class="weimob-block"> <view class="weimob-title">基础用法</view> <view class="weimob-body"> <weimob-sticky> <!-- 需要粘性的部分 --> <button class="margin-left-base" size="mini"> 基础用法 </button> </weimob-sticky> </view> </view> [代码] 3.1.2 吸顶距离 [代码]<view class="weimob-block"> <view class="weimob-title">吸顶距离</view> <view class="weimob-body"> <!-- 吸顶时与顶部的距离，单位px --> <weimob-sticky offset-top="{{ 50 }}"> <!-- 需要粘性的部分 --> <button class="margin-left-top" type="primary" size="mini"> 吸顶距离 </button> </weimob-sticky> </view> </view> [代码] 3.1.3 指定容器 [代码]<view class="weimob-block"> <view class="weimob-title">指定容器</view> <view class="weimob-body"> <!-- 这里需要固定高度 --> <view id="container" style="height: 300rpx;background-color: #fff"> <weimob-sticky container="{{ container }}"> <button size="mini" class="margin-left-special"> 指定容器 </button> </weimob-sticky> </view> </view> </view> [代码] 3.1.4 嵌套在scroll-view使用 [代码]<view class="weimob-block"> <view class="weimob-title">嵌套在 scroll-view 内使用</view> <!-- 这里需要固定高度，scroll-view里的元素高度需要大于其高度 --> <scroll-view bind:scroll="onScroll" scroll-y id="scroller" style="height: 400rpx; background-color: #fff;margin-top: 40rpx;" > <view style="height: 800rpx"> <weimob-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}" > <button size="mini" class="margin-left-scoll"> 嵌套在 scroll-view 内 </button> </weimob-sticky> </view> </scroll-view> </view> [代码] 页面js [代码]Page({ data: { container: null, //一个函数，返回容器对应的 NodesRef 节点 scrollTop: 60, // 当前滚动区域的滚动位置，非null时会禁用页面滚动事件的监听 offsetTop: 0 // 吸顶时与顶部的距离，单位px }, onReady() { // 页面渲染完，获取节点信息 this.setData({ container: () => wx.createSelectorQuery().select('#container'), }); }, onScroll(event) { // 容器滚动时获取节点信息 wx.createSelectorQuery() .select('#scroller') .boundingClientRect((res) => { this.setData({ scrollTop: event.detail.scrollTop, offsetTop: res.top, }); }) .exec(); } }); [代码] 3.2 组件代码 组件wxml [代码]<wxs src="./index.wxs" module="computed" /> <view class="weimob-sticky" style="{{ computed.containerStyle({ fixed, height, zIndex }) }}" > <view class="{{ fixed ? 'weimob-sticky-wrap--fixed' : ''}}" style="{{ computed.wrapStyle({ fixed, offsetTop, transform, zIndex }) }}" > <slot /> </view> </view> [代码] 组件wxs 这里使用使用小程序的wxs对吸顶元素的transform,top,height,z-index元素进行实时渲染，ios设备在滚动监听时性能会优于在js 2-20倍，androd设备效率暂无差异。 [代码]function wrapStyle(data) { var style = ""; if (data.transform) { style += 'transform: translate3d(0, ' + data.transform + 'px, 0);' } if (data.fixed) { style += 'top: ' + data.offsetTop + 'px;' } if (data.zIndex) { style += 'z-index: ' + data.zIndex + ';' } return style; } function containerStyle(data) { var style = ""; if (data.fixed) { style += 'height: ' + data.height + 'px;' } if (data.zIndex) { style += 'z-index: ' + data.zIndex + ';' } return style; } module.exports = { wrapStyle: wrapStyle, containerStyle: containerStyle } [代码] 组件js [代码]import pageScrollMixin from "./page-scroll"; const ROOT_ELEMENT = ".weimob-sticky"; Component({ options: { multipleSlots: true }, properties: { zIndex: { type: Number, value: 99 }, offsetTop: { type: Number, value: 0, observer: "onScroll" }, disabled: { type: Boolean, observer: "onScroll" }, container: { type: null, observer: "onScroll" }, scrollTop: { type: null, observer(val) { this.onScroll({ scrollTop: val }); } } }, data: { height: 0, fixed: false, transform: 0 }, behaviors: [pageScrollMixin(function pageScrollMixinCallback(event) { // 非null时会禁用页面滚动事件的监听 if (this.data.scrollTop != null) { return; } this.onScroll(event); })], lifetimes: { attached() { this.onScroll(); } }, methods: { onScroll({ scrollTop } = {}) { const { container, offsetTop, disabled } = this.data; if (disabled) { this.setDataAfterDiff({ fixed: false, transform: 0 }); return; } this.scrollTop = scrollTop || this.scrollTop; if (typeof container === "function") { // 情况一：指定容器下时，吸顶距离+吸顶元素高度>容器高度+容器距顶部距离,随页面滚动； // 情况二：指定容器下时，吸顶距离>吸顶元素高度,元素固定； // 情况三：元素初始化。 // this.getRect获取节点ROOT_ELEMENT相对于显示区域的top,height等信息，通过root获取 // this.getContainerRect获取父容器相对于显示区域的top,height等信息，通过container获取 Promise.all([this.getRect(ROOT_ELEMENT), this.getContainerRect()]).then( ([root, container]) => { if (offsetTop + root.height > container.height + container.top) { this.setDataAfterDiff({ fixed: false, transform: container.height - root.height }); } else if (offsetTop >= root.top) { this.setDataAfterDiff({ fixed: true, height: root.height, transform: 0 }); } else { this.setDataAfterDiff({ fixed: false, transform: 0 }); } }); return; }else{ this.getRect(ROOT_ELEMENT).then(root => { // 吸顶时与顶部的距离小于可视区域的top距离时，随着滚动条滚动，否则吸顶 if (offsetTop >= root.top) { this.setDataAfterDiff({ fixed: true, height: root.height }); this.transform = 0; } else { this.setDataAfterDiff({ fixed: false }); } return Promise.resolve(); }); } }, setDataAfterDiff(data) { // 比较数据是否与上次相同，不同则触发父组件scroll事件更新isFixed，scrollTop。 wx.nextTick(() => { const diff = Object.keys(data).reduce((prev, key) => { const prevCopy = prev; if (data[key] !== this.data[key]) { prevCopy[key] = data[key]; } return prevCopy; }, {}); this.setData(diff); this.triggerEvent("scroll", { scrollTop: this.scrollTop, isFixed: data.fixed || this.data.fixed }); }); }, getContainerRect() { const nodesRef = this.data.container(); return new Promise(resolve => nodesRef.boundingClientRect(resolve).exec()); }, getRect(selector) { return new Promise(resolve => { wx.createSelectorQuery().in(this).select(selector).boundingClientRect(rect => { resolve(rect); }).exec(); }); } } }); [代码] page-scroll.js 滚动事件在页面进入和离开时共享的pageScrollMixin函数。 [代码]function getCurrentPage() { const pages = getCurrentPages(); return pages[pages.length - 1] || {}; } function onPageScroll(event) { const { weimobPageScroller = [] } = getCurrentPage(); weimobPageScroller.forEach(scroller => { if (typeof scroller === "function" && event) { // @ts-ignore scroller(event); } }); } const pageScrollMixin = scroller => Behavior({ attached() { const page = getCurrentPage(); if (Array.isArray(page.weimobPageScroller)) { page.weimobPageScroller.push(scroller.bind(this)); } else { page.weimobPageScroller = typeof page.onPageScroll === "function" ? [page.onPageScroll.bind(page), scroller.bind(this)] : [scroller.bind(this)]; } page.onPageScroll = onPageScroll; }, detached() { const page = getCurrentPage(); page.weimobPageScroller = (page.weimobPageScroller || []).filter(item => item !== scroller); } }); export default pageScrollMixin; [代码] 总结 最后，我将上述代码放在了代码片段中供大家使用了解，https://developers.weixin.qq.com/s/qiym3wmr7znx ，希望能够帮到小伙伴们，欢迎评论区建议或指教哦~

[图片] 我现在有30个数据，它只竖向，我设置了宽高和水平排列都不改变其样式

wx.cloud.deleteFile({ fileList: ['a7xzcb'] }).then(res => { // handle success console.log(res.fileList) }).catch(error => { // handle error }) 看官方文档应该是用这个api，但是不确定fileList那里应该填什么

先上效果图： [图片] 实现过程： 在html网页中先定义一个表单以后，再定义一个Login标题，两个输入框，最后一个登录按键，主要功夫为css配置。 先定义页面主体，标准的消内外边距 [代码]body { margin:0; padding:0; font-family:sans-serif; background-color: #ecf0f1; } [代码] 定义表单整体样式 [代码] .box { width:300px; padding:40px; top:50%; left:50%; transform: translate(-50%,-50%); position:absolute; background-color: #34495e; text-align: center; } [代码] 定义该表单中两个文本输入框的样式，可以根据喜好调整transition的动画时间 [代码].box input[type="text"],.box input[type="password"] { background: none; display: block; text-align: center; border:0; margin:20px auto; border:2px solid #2980b9; padding:14px 10px; width:200px; outline:none; color:white; border-radius: 24px; transition: 0.5s; } [代码] 定义当光标放在两个输入框时的样式，这里我只是简单的变宽和蓝色变亮 [代码].box input[type="text"]:focus,.box input[type="password"]:focus { width:280px; border-color:#3498db; } [代码] 定义提交按钮的样式 [代码] .box input[type="submit"] { color:white; background: none; display: block; text-align: center; border:0; margin:20px auto; border:2px solid #2ecc71; padding:14px 10px; cursor:pointer; width:180px; outline:none; border-radius: 24px; transition: 0.25s; } [代码] 定义提交按钮的选中样式，这里我简单把背景调成对应绿色，就已经很好看了 [代码].box input[type="submit"]:hover{ background-color: #2ecc71; } [代码] 7.大概完成后，发现页面标题默认黑色与表单背景颜色不太符合，因此调成白色即可 [代码]h1 { color:#ecf0f1; } [代码] 本页面全部代码如下： html中： [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <form class="box" method="post"> <h1>Login</h1> <input type="text" name="firstName" placeholder="账户名称"> <input type="password" name="firstPassword" placeholder="密码"> <input type="submit" name="firstSubmit" value="登录"> </form> </body> </html> [代码] CSS中： [代码] body { margin:0; padding:0; font-family:sans-serif; background-color: #ecf0f1; } .box { width:300px; padding:40px; top:50%; left:50%; transform: translate(-50%,-50%); position:absolute; background-color: #34495e; text-align: center; } .box input[type="text"],.box input[type="password"] { background: none; display: block; text-align: center; border:0; margin:20px auto; border:2px solid #2980b9; padding:14px 10px; width:200px; outline:none; color:white; border-radius: 24px; transition: 0.5s; } .box input[type="text"]:focus,.box input[type="password"]:focus { width:280px; border-color:#3498db; } .box input[type="submit"] { color:white; background: none; display: block; text-align: center; border:0; margin:20px auto; border:2px solid #2ecc71; padding:14px 10px; cursor:pointer; width:180px; outline:none; border-radius: 24px; transition: 0.25s; } .box input[type="submit"]:hover{ background-color: #2ecc71; } h1 { color:#ecf0f1; } [代码] 如果你喜欢该篇文章，请不要忘记点击右下角的大拇指进行点赞噢~

javascript基础总结 小程序框架系统分为两部分： 逻辑层(App Service) 和视图层(View);其中微信小程序开发提供了自己的语言wxml和wxss来描述视图层，基于javascript(js)的逻辑层框架。在视图层和逻辑层之间提供了数据传输和事件的系统，js将数据处理后将数据发送给视图层，这样便于开发者专注于业务逻辑开发。 1.注释 /* 注释的语法和c++的注释语法一致 */ // 双斜杠 单行注释 /* 斜杠 + 🌟 多行注释 */ 2.变量 1: javascript声明变量都是使用var，和c++声明变量有区别，js声明变量都是使用var,变量类型通过赋值类型决定。javascript，python lua等都是弱类型语言。 var a; //声明变量 var name = "s"; //声明变量并赋值 a = 1; //赋值 2: 变量类型 数字类型：整型，浮点数； 数组： Array 下标从0开始 字符串变量："string"; 布尔类型： true/false; Date类型变量：dtm； Undefined : var name = null; 对象引用变量：object var person = { name : "s"; age : 10; id : 10000; } //访问对象成员可以使用中括号或者 . var name = person.name; var iAge = person["age"]; 3: javascript变量命名规范： 常量以及全局变量名必须全部使用大写字母，常数名中的多个单词使用下划线“_”分隔，例如： var CONST_ED_SFA = "系统错误"; 变量的命名采用匈牙利命名法，通过在变量名前面添加相应小写字母的符号标示作为前缀，标示出变量的作用域，类型等，前缀后面是一个或多个单词组合，单词描述了变量的用途，如o表示对象，i表示的是整数，s表示的是字符串。例如： var oData = new Data(); var sUserName = 'css8'; var iCount = 0; ​ //如果变量名过长可以使用单词缩写，推荐使用标准缩写以使名称保持在适当的长度内。使用缩写时，应确保在整个脚本中保持一致。 //所有使用单词所写的变量名必须在定义时给出注释,如： ​ var strAdminName; // 可以简单注释，Admin被广泛了解 3.运算符 1:运算符： 和数学中的运算符一致； [图片] 2：逻辑运算符： 比较逻辑,返回true 和 false； [图片] 4.条件语句if语句： if(/*condition_1*/) { /* 满足condition_1，执行... */ } else if(/* condition_2 */) { /* 满足condition_2，执行... */ } ... else { /* 上述条件都不满足时，执行... */ } 2.for语句： for(/*初始化语句；开始循环前执行，且只执行一次 */; /*循环退出条件判断；每次进入循环语句前执行，判断为true才会进入循环语句，否则跳出循环*/; /* 语句3，在循环代码执行后执行 */) {    /* 循环代码语句 */ } //example for(var i = 0; i < 10; ++i) {    x = x + i; } 3.while语句： while(/* 条件判断，为true时进入循环 */) { /* 循环语句 */ } //example: while(i > 0) { --i; } 5. js文件基本结构注册页面 page方法：page( //数据对象    data:{     msg : "hello world!",     flag : true,     } ,   //函数， 可重复被调用执行的代码块 /* 函数名: function(参数){ }, */ //生命周期函数 监听页面加载 //在页面加载时调用，一个页面只会调用一次 onLoad: function(options) {         },    //生命周期函数 监听页面初次渲染完成     //页面初次渲染完成时调用，一个页面只会调用一次，代表页面准备妥当，可以和视图层交互    onReady: function() {         }，    //生命周期函数 监听页面显示    //页面显示/切入前台时触发    onShow: function() {         },    ...   )