微信小程序编程小结（不定期更新）

行内文字超出宽度后，显示省略符(…)
在文字所在的view中，增加如下CSS

      overflow: hidden;text-overflow: ellipsis;white-space: nowrap;/* 此处区域如果固定显示则用width，如果随文字宽度自动缩减，使用max-width */max-width: 280rpx;

解决苹果手机（IPHONE X等型号）下方有功能条遮挡内容问题
IPHONE X 的下方有一条横条，在其它型号的手机中并没有，如果统一提升下边距，在没有横条的手机上看就会很不友好。
所以苹果出了一个只有苹果手机才会识别的样式，而且只有有横条的型号手机，才会解析出对应高度的样式

 padding-bottom: env(safe-area-inset-bottom);

在页面的下方工具栏或者整体区块中加入该样式，在没有横条的手机中是不认这个样式的，或者解析结果为0
在有横条（IPHONE X等）手机中，会解析出横条对应高度的样式，以解决遮挡问题

在小程序中使用定时器(Interval)时，一定要在离开页面后清理掉不使用的定时器，微信页面跳转后，定时器是不会被清理掉，只有杀小程序进程才可以，所以必须在使用后立即清理掉，不然会积累过多，导致页面异常
文字滚动显示
微信小程序中没有提供相关的组件和功能函数，想显示动画，只能使用animation配合定时器显示
因业务需要循环显示文本内容，效果为停顿3秒，滚动0.5秒，头尾相接显示
相关代码如下：
WXML代码(样式不影响效果显示，就不贴出来了)

<view animation="{{animationData1}}"><view wx:for="{{list}}" wx:for-index="index" wx:for-item="item" wx:key="id"><view class="bottom-item"><image class="bottom-item-image" src="{{item.header}}"></image><view class="bottom-item-name">{{item.username}}</view><view class="bottom-item-time">{{item.time}}</view><view class="bottom-item-date">{{item.date}}</view></view></view><!-- 复制一遍动态列表，以达到循环展示的效果 ifcopy如果显示内容条数少于页面当前显示条数，则不复制也不滚动 --><block wx:if="{{iscopy}}"><view wx:for="{{list}}" wx:for-index="index" wx:for-item="item" wx:key="id"><view class="bottom-item"><image class="bottom-item-image" src="{{item.header}}"></image><view class="bottom-item-name">{{item.username}}</view><view class="bottom-item-time">{{item.time}}</view><view class="bottom-item-date">{{item.date}}</view></view></view></block>

JS代码

itemcount = 0;//这个是全局变量，以下没有定义类型的变量均为全局变量if (this.data.list.length > 3) {this.setData({iscopy: true,})//单条滚动的时间var continueTime = 500;//等待时间var waitTime = 3000;var animation = wx.createAnimation({duration: continueTime, //动画时长timingFunction: "linear", //线性});this.animation = animation;intervalid = setInterval(() => {itemcount++;animation.translateY(-54 * itemcount).step();//54单位是像素，这里可以使用获取节点高度，然后用高度变量替换//滚动一圈后重置滚动状态if (itemcount >= this.data.list.length) {itemcount = 0;animation.translateY(0).step({duration: 50,timingFunction: 'step-start',})}this.setData({animationData: animation.export()})}, waitTime)}

/**生命周期函数--监听页面隐藏*/onUnload: function() {//清空页面定时器clearInterval(intervalid);},

获取节点高宽

     var query = wx.createSelectorQuery();query.select('.bottom-item').boundingClientRect();query.exec((res) => {//这里会获取到一个符合条件的数组，然后根据实际情况进行处理itemheight = res[0].height;itemwidth = res[0].width;});

图片截取
最近的项目中需要用户对上传的图片进行自定义截取操作，原本是打算去网上找找现成的，但是弄了几个后，发现并不是很好用（可能是没找到好用的）
项目中需求图片缩放比是0.5-20、可以在用户选择图片后自动居中、可以根据不同的功能传入的尺寸，设置截取框的大小
“自动居中”这个需求并不难，“参数设置截取大小”这个需求也并不难，就是计算多一些，也还好，最头疼的就是放大倍数要到20（也不知道为什么，咱也不敢问），试过好几个现成的组件和方法，当放到到超过5倍之后，一般的手机就会因内存不足，小程序会自动关闭。。。一张手机拍出来的照片，放大到20倍之后，iPhoneX也照样崩，额(⊙o⊙)…
之后从头开始开发、研究，经历了一周的开发和测试后完成了相关组件，下载地址如下，内附说明文档
https://download.csdn.net/download/zxc84265137/11270725
canvas画图
这部分内容比较多，就单独开了一章
https://blog.csdn.net/zxc84265137/article/details/96996031

暂时就想到这些，之后想到了之前的或者之后遇到的问题，会在来更新

微信小程序编程小结（不定期更新）相关推荐

微信小程序开发实战2 微信小程序编程基础
2.微信小程序编程基础 2.1小程序目录结构小程序包含一个描述整体程序的主体部分和多个小程序页面.一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 文件作用 app.js 小程序的入 ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
微信小程序使用echarts实时更新数据以及常见bug
** 微信小程序使用echarts实时更新数据以及常见bug ** 参考echarts官方文档:https://echarts.apache.org/zh/tutorial.html 下载小程序ech ...
最实用的微信小程序大全，持续更新中...
最全的小程序开发教程,点击下载掘金App. 小程序上线 1月9日,张小龙没有食言,微信小程序如约而至.凌晨刚过,我们便在微信发现页看到了小程序的入口. 微信发现页之后的一个小时里,每个微信群都在疯狂 ...
【微信小程序】：重磅更新，搞事情啊
21日,微信小程序进行框架重大升级,新增&更新&修复了共108项. 其中不乏一些令人欣喜的功能~ 新增可以扫码API: 新增选择显示遮罩功能: 新增自定义分享功能: 新增滚动选择器组件 ...
微信小程序获取用户信息更新解决方案
微信小程序获取用户头像和昵称更新了,以下代码是兼容旧版本微信和新版本微信的解决方案,仅供参考直接上代码 <template><view ...
c语言微信小程序编程,微信小程序实现类似微信点击语音播放效果
本文实例为大家分享了微信小程序类似平常微信语音聊天的效果,不会互相干扰播放状态,供大家参考,具体内容如下根据开发的需求,先理清一下思路,点击语音播放与暂停/停止,切换下一个语音等: 小程序对于aud ...
微信小程序编程（1）——使用百度API编写文字识别小程序
编写思路要使用百度等第三方API,我们得使用微信小程序提供的wx.request来向第三方平台发起请求,我们看到wx.request的参数属性里面url是必填项,接着我们打开和百度AI平台里面的通用 ...
【web】微信小程序笔记小结（模板与配置）
来源:黑马程序员前端微信小程序开发教程目录 I. WXML 模板语法 ① 数据绑定 ※※ 基本原则 ※※ 在 data 中定义数据 ※※ 在 WXML 中使用数据 ※※※※ Mustache 语法的 ...
云开发口袋工具箱微信小程序源码(已更新)
介绍: 这是一款云开发口袋工具箱微信小程序源码,,该版本的口袋工具箱涵盖了13个功能分别为圣诞帽头像生成.二维码生成.日语50音图.汉字拼音查询.计算器.程序员黄历.娱乐摇骰子. 身材计算.所在地天 ...

微信小程序编程小结（不定期更新）

微信小程序编程小结（不定期更新）相关推荐

最新文章

热门文章

微信小程序 编程小结（不定期更新）

微信小程序 编程小结（不定期更新）相关推荐

最新文章

热门文章

微信小程序编程小结（不定期更新）

微信小程序编程小结（不定期更新）相关推荐