![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
小程序
文章平均质量分 67
liu__software
这个作者很懒,什么都没留下…
展开
-
小程序怎么用canvas绘制video?
【代码】小程序怎么用canvas绘制video?转载 2023-02-28 10:17:38 · 628 阅读 · 0 评论 -
微信小程序下载文件,保存文件功能总结
总是有需求想在微信小程序里面做下载文件并保存的功能,所以自己整理了一下小程序涉及到下载api,大致理了下在小程序里面下载的流程和解决方案。以上三个api都不能实现真正意义的下载保存,因为微信小程序提供的存储服务是以小程序和用户维度隔离的存储服务,所以下载下来之后用户并不能访问到自己下载的文件。做不到用户下载文件之后可以快捷的找到下载的文件。只是下载到微信app的缓存里面。且微信也不建议开发人员或用户去查询本地文件存储的路径。转载 2023-02-27 12:06:55 · 8738 阅读 · 2 评论 -
小程序动画创建及动画结束的监听事件
注意:bindanimationstart bindanimationiteration bindanimationend无法监听到wx.createAnimation创建的动画。注意:bindtransitionend监听的是wx.createAnimation 结束一个阶段而不是整个动画的结束(也就是一个step()结束)bindtransitionend:监听CSS 渐变结束或 wx.createAnimation 结束一个阶段。bindanimationend:CSS 动画结束。转载 2023-02-27 11:33:23 · 913 阅读 · 0 评论 -
微信小程序 SCROLL-VIEW的滚动条设置
小程序的scroll-view用的比较多了,列表页一般也没管它的滚动条,最近突然发现在android与ios中横向滑动的时候表现不一样。上图位置:-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)。上图位置:-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。上图位置:-webkit-scrollbar-corner 边角,即两个滚动条的交汇处。转载 2023-02-27 11:27:15 · 5200 阅读 · 0 评论 -
uniapp scroll-view滚动条不显示及IOS中问题
最近在对小程序进行一些优化,发现 scroll-view 的两处问题1、IOS手机下scroll-view会存在上拉加载时卡顿情况2、IOS手机下scroll-view会存在点击不触发 navigator-hover 里的css没有找到什么好的解决办法,故只有用view替代了scroll-view。转载 2023-02-27 11:20:15 · 3675 阅读 · 1 评论 -
uniapp 微信小程序开发 随记 --关于background-color颜色 渐变色不生效 的解决方案
版权声明:本文为CSDN博主「SeaCassie」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。在小程序的开发过程中 发现 linear-gradient 不生效 背景颜色没有渐变色。转载 2023-02-27 11:14:39 · 391 阅读 · 0 评论 -
Uni-App - uniapp事件处理、事件绑定、事件传参
uni-app 事件事件映射表,左侧为 WEB 事件,右侧为 ``uni-app`` 对应事件在 input 和 textarea 中 change 事件会被转为 blur 事件。转载 2023-02-27 11:13:46 · 2044 阅读 · 0 评论 -
微信小程序开发笔记4—— IntersectionObserver 用法详解
首先,我的理解是,这是一个观察器(废话),它用来监测目标对象与某个参照物的相交情况。什么是相交情况?通俗的说,就是两个区域有重叠(公共区域)了,类似与数学中的交集,不过这个是平面上的。,点击最后的在开发者工具中预览即可。演示图:可以大致的看到,当小球出现/消失的时候,顶部的文字会跟着改变,右边的控制台也在打印着一些东西。下面我们就根据代码,来一谈究竟。转载 2023-02-27 10:59:40 · 580 阅读 · 0 评论 -
微信小程序中使用uChart更新数据时,图表抖动严重的问题。
事件类似(至少名称类似,一看就知道应该就是我所需要的function,并且这个function里面就有说调用的就是updateData事件)的地方可以发现:有一个判断语句,这个语句中就表明以下情况才会触发此事件(1、option得有;翻看源码也是一种习惯,很多你在文档中不了解的或不能实现的功能,你都可以通过源码或改变源码来实现。放在component中使用,所以我看了下源码中,发现了其实在qiun-wx-ucharts。在开发微信小程序charts有需求需要不断请求后端数据,然后更新界面,但是调用。转载 2023-02-27 10:55:16 · 1615 阅读 · 1 评论 -
ucharts图表tooltip自定义换行
3.组件调用的时候有一个opts属性 :opts="{ extra: { tooltip: { tooltipArr: [ [ { text:"不显示左侧颜色块",color:null }, { text:"自定义内容1",color:null } ] , [ { text:"不显示左侧颜色块",color:null }, { text:"自定义内容2",color:null } ] ] } } }"5.解释,ucharts接收的属性增加一个数组属性,判断值后改变textList项的显示,转载 2023-02-27 10:51:01 · 700 阅读 · 0 评论 -
微信小程序Canvas隐藏问题
当前微信小程序的还存在不足,使用Canvas画图制作图片时,Canvas无法进行隐藏,会显示在界面上。转载 2022-11-08 23:21:12 · 2727 阅读 · 0 评论 -
如何判断微信/小程序/浏览器环境 - 微信sdk坑
如果你的网页需要在微信公众号/普通浏览器/微信小程序中运行,如何判断环境,这种小问题也有暗坑哦。这里的需求是在不通的环境,需要跳转到指定url网页,但是小程序内嵌web-view跳转方式需要使用特定api。if (/MicroMessenger/i.test(window.navigator.userAgent)) { //微信环境 window.wx.miniProgram.getEnv(function (res) { if (res.miniprogram) {转载 2022-02-18 15:24:40 · 2072 阅读 · 0 评论 -
小程序 本地临时文件tempFilePaths和base64互转
小程序base64转本地临时图片/*code是指图片base64格式数据*///声明文件系统const fs = wx.getFileSystemManager();//随机定义路径名称var times = new Date().getTime();var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png'; //将base64图片写入var that = this;fs.writeFile({ filePath: co转载 2021-12-22 10:10:59 · 17946 阅读 · 3 评论 -
uni-app黑魔法:小程序自定义组件运行到H5平台(含生命周期)
引言移动互联网的初期,囿于设备硬件性能限制,流量以原生App为主,iOS、Android是当时两大平台。随着硬件及OS的更新换代,H5可承载的体验逐步完善,为提高开发效率、节约资源(复用代码)以及热更新等目的,Hybrid模式成为主流;以及轻应用、服务号等平台的助推,H5网页流量暴涨,成为第三大平台。2017年1月9日,微信发布小程序,历经3年发展,在今年主题为”未完成 Always Beta“的微信公开课 PRO上,微信团队披露,2019年小程序日活跃用户超过 3 亿,全年累计成交额达8000转载 2021-09-07 09:56:45 · 1002 阅读 · 0 评论 -
原生微信小程序国际化-i18n国际化
微信小程序国际化,看了看网上有i18n或者自己写个json等方法。于是用自己写json方法试了一下。感觉非常适合小白型的人理解和使用1.新建一个js文件,写入jsonlet localList = { 'zh': { 'language': '简体中文', 'login': '登录', 'logout': '登出', 'pay': '支付', 'changeLanguage': '切换语言', 'search': '搜索', 'addre转载 2021-09-07 09:47:42 · 1340 阅读 · 0 评论 -
wx.getSystemInfoSync 拿到的信息中 language 字段的取值问题?用于小程序国际化
小程序官方能否在文档中补充一个 language 在各端的各个语言(常用的也行)的取值表?比如,类似这种表: 开发工具 安卓 ios 简体中文 zh zh_CN zh_CN 繁体 (台湾) zh_TW zh_TW zh_TW 繁体 (香港) zh_HK zh_HK zh_HK 英文 en en en 在各端,language的取值在同一语言是否一致?? 目前发现 “简体中文” 在开发...转载 2021-09-07 09:38:52 · 330 阅读 · 0 评论 -
关于uni-app的ui库、ui框架、ui组件
组件的概念组件是现代开发的重要里程碑。组件重构了分工模型,让大量的轮子出现,让开发者可以拿来轮子直接用,大幅提升了整个产业的效率。uni-app是有内置组件的。这和web开发不一样。web开发基本上不用基础组件,都是找一个三方ui库,全套组件都包含。那是因为html的基础组件默认样式不适配手机风格。但uni-app体系不是这样,内置组件就是为手机优化的。但内置组件只能满足基础需求,更多场景,需要扩展组件。扩展组件是基于内置组件的二次封装,从性能上来讲,扩展组件的性能略低于内置组件,所以开发转载 2021-09-07 09:34:01 · 12717 阅读 · 3 评论 -
阿里云OSS上传请求403问题的完美解决方案及uni.uploadFile h5上传文件失败完美解决方案
在使用阿里云OSS服务时,会用到跨域AJAX上传,上传时报403错误,之前遇到过此类问题并成功解决了,但时间长了遗忘,因此记录下来以备后续学习了解ajax跨域上传OSS。ajax跨域上传首先会发送options请求,成功后再进行上传,那么,如何解决阿里云OSS跨域AJAX上传OPTIONS请求403问题?只需简单设置,流程如下:进入存储空间(Bucket) ——> 基础设置 ——> 跨域设置 ——> 添加规则,进入下图所示设置以上规则后,就成功解决了阿...转载 2021-09-06 09:26:21 · 5629 阅读 · 0 评论 -
小程序中解决图片旋转问题
在一些相机设备中因手持方向的原因导致图片会有一个旋转角度,在图片加载后旋转角度被忽略了,导致图片看过去是旋转的,小程序中不需要借助任何工具获取图片信息,通过wx.getImageInfo()获取orientationorientation值有四个up 不需要旋转 down 旋转180度 left 旋转270度 right 旋转90度小程序中处理图片旋转条件需要在wxml中添加canvas组件 设置canvas-id属性 为了让这个canvas不显示,设置绝对定位并定位在显示区外转载 2021-04-22 15:32:37 · 4238 阅读 · 1 评论 -
微信小程序、微信公众号、H5之间相互跳转
转自慕课网一、小程序和公众号答案是:可以相互关联。在微信公众号里可以添加小程序。图片有点小,我把文字打出来吧:可关联已有的小程序或快速创建小程序。已关联的小程序可被使用在自定义菜单和模版消息等场景中。公众号可关联同主体的10个小程序及不同主体的3个小程序。同一个小程序可关联最多50个公众号。1、公众号跳小程序比如说 “丰巢快递柜” 公众号关联的小程序:丰巢寄快递。2、小程序跳公众号打开“丰巢寄快递”,点击右上角的菜单选项,然后点击”关于丰巢寄快递“,就可以看.转载 2021-04-21 14:35:17 · 584 阅读 · 0 评论 -
微信小程序是否支持highcharts或者echarts图表呢
微信小程序是否支持highcharts或者echarts图表,最近在做一个显示图标的BI平台想用小程序来实现,不知道小程序是否支持这两种图表形式呢?现在echart 已经支持小程序,https://github.com/ecomfe/echarts-for-weixin/还有蚂蚁金服的数据可视化也有一个项目:https://github.com/antvis/wx-f2这些都是“传统的(基于 DOM 的)”图表组件,小程序里不能用。建议看看这个 https://github.co..转载 2021-04-21 14:10:28 · 514 阅读 · 0 评论 -
微信小程序音频IOS无法播放问题总结
【问题】微信小程序,将文字转换为语音后,使用音频进行播放。在安卓手机下可以正常播放,在IOS下不行。【环境】微信小程序库版本2.3.0百度语音合成服务【解决方法】正确代码://创建一个音频实例const myaudio = wx.createInnerAudioContext(); //设置obeyMuteSwitch: false(不遵循系统静音开关,即使用户打开了静音开关,也能继续发出声音)//设置autoplay: true(自动开始播放)if (wx.setIn转载 2021-04-20 10:08:20 · 4709 阅读 · 0 评论 -
【微信小程序】性能优化
为什么要做性能优化?一切性能优化都是为了体验优化1. 使用小程序时,是否会经常遇到如下问题? 打开是一直白屏 打开是loading态,转好几圈 我的页面点了怎么跳转这么慢? 我的列表怎么越滑越卡? 2. 我们优化的方向有哪些? 启动加载性能 渲染性能 3. 启动加载性能1. 首次加载你是否见过小程序首次加载时是这样的图?这张图中的三种状态对应的都是什么呢?小程序启动时,微信会为小程序展示一个固定的启动界面,界面内包含小程转载 2021-04-20 09:56:00 · 209 阅读 · 0 评论 -
微信小程序之提高应用速度小技巧-附WXPage
WeTest 导读小程序科普类的文章已经很多了,今天这里讲的是针对小程序的优化方法,可以有效提高小程序的响应速度和用户体验。当然,开发体验也提高不少。1.提高页面加载速度在小程序这个环境下,怎样提高页面加载速度呢? 这个问题很大,我把问题具体一下,如何缩短从用户点击某个链接,到打开新页面的这段时间?这里抛一个核心关键点:从页面响应用户点击行为,开始跳转,到新页面onload事件触发,存在一个延迟,这个延迟大概在100-300ms之间(安卓响应比ios慢些)。这个延迟说短不短,我们..转载 2021-04-20 09:52:49 · 2044 阅读 · 0 评论 -
小程序touchmove事件中setData优化过程
出现场景:在做一个小球跟随手指移动的效果时候,由于在touchmove事件中频繁调用setData改变小球的位移实现,在开发工具和IOS平台还算流畅,但在安卓机下手机预览出现极其卡顿的交互,简直是不堪入目。可微信web开发者工具打开 片段代码https://developers.weixin.qq.com/s/B9UHyvmo7t6t问题根源:setData每秒调用高达50左右造成的。 引用官方的话就是:a、touchmove 事件从视图层(Webview)抛到逻辑层(App Se转载 2021-04-20 09:48:55 · 718 阅读 · 0 评论 -
微信小程序之触控事件(四)
》》》什么是事件 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息,如id, dataset, touches。 》》》事件分类 touchstart 手指触摸 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如弹窗和来电提醒 touchend 手指触摸动作结束转载 2021-04-20 09:45:23 · 2025 阅读 · 0 评论 -
小程序实现拖拽功能
<view class='collectBox' bindtap='addCollect' wx:if="{{write[0]+write[1] > 0}}" bindtouchmove="touchmove" catch:touchmove style="left:{{write[0]}}px;top:{{write[1]}}px;"> <image src='../../images/icon/addcollect....转载 2021-04-19 09:39:52 · 1142 阅读 · 0 评论 -
小程序web-view覆盖原生组件
小程序web-view覆盖原生组件web-view一、web-view的使用官方文档<web-view class="map-box" src="https://www.forguo.com"> </web-view>** 官方指出,小程序默认会覆盖其它所有的组件**二、解决需求需要在web-view页面上面加一个按钮,用来跳转到小程序的页面,1....转载 2020-04-23 10:06:33 · 1903 阅读 · 0 评论 -
小程序与H5如何互相跳转
由于小程序官方没有提供外部H5网页直接跳转到小程序的api,所以目前只支持小程序内嵌H5,并且只有内嵌的H5才能跳回小程序小程序跳转H5需要用到小程序的web-view,官方文档链接web-view是承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用。写法如下:<view class="page-body"> <web-vi...转载 2020-04-23 09:58:04 · 1165 阅读 · 0 评论 -
微信小程序setData()方法的详解以及对数组/json操作
此篇文章是本人对setData方法的一些理解,是查阅文档和查找一些其他资料综述的,有所不足希望指正!直接进入正题!一、setData()方法:1、参数接受一个对象,以key,value的形式表示;2、参数和变量名称一致,可用一个值代替(es6新语法特性)如上图所示,在this.data中设置ceshi这条数据,在方法中,我们定义ceshi变量让其等于that.data.ces...转载 2019-08-14 17:38:33 · 1275 阅读 · 0 评论 -
微信小程序之swiper组件高度自适应
要求:(顶部广告栏) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后的宽高,如果是适应屏幕宽度的话,就用到 wx.getSystemInfo() 方法设备的信息,并保存到一个数组中,(因为加载的原因不能用push,只能根据索引),切换时监听当前显示的图片,根据其索引找到对应的高度,并赋值...转载 2019-08-14 17:31:53 · 314 阅读 · 0 评论 -
6个最优秀的微信小程序UI组件库
开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果。自从微信小程序面世以来,不断有一些开源组件库出来,下面6款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库。还没用到它们的你,可以关注和了解一下哦!WeUI WXSSWeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验。GitHub地址:https://github...转载 2019-07-19 10:13:20 · 333 阅读 · 0 评论 -
小程序自定义单页面、全局导航栏
需求产品说小程序返回到首页不太方便,想添加返回首页按钮,UI说导航栏能不能设置背景图片,因为那样设计挺好看的。需求分析并制定方案这产品和UI都提需求了,咱也不能反驳哈,所以开始调研,分析可行性方案;1、可以添加悬浮按钮。2、自定义导航栏。添加悬浮按钮,是看起来是比较简单哈,但是感觉不太优雅,会占据页面的空间,体验也不太好。所以想了下第二种方案,自定义导航栏既可以实现产品的需求还可...转载 2019-07-19 10:12:07 · 231 阅读 · 0 评论 -
小程序( rpx、px、rem )
rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度,拿iPhone6来讲,屏幕宽度为375px,把它分为750rpx后, 1rpx = 0.5px。微信小程序同时也支持rem尺寸单位, rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37....转载 2019-04-22 17:18:24 · 1233 阅读 · 0 评论