开发中小程序遇到的问题总结

1. backdrop-filter样式的作用

backdrop-filter 是CSS中的一个属性，用于为元素的背景区域添加图形效果，如模糊或者颜色偏移。这个属性的使用需要满足一定的条件，即元素本身或者其背景至少部分必须是透明的，这样才能让附加的效果显现出来。

backdrop-filter 的语法包括一个以空格分隔的 filter-function-list，这可以是单个滤镜函数（<filter-function>），或者是用来应用到背景上的SVG滤镜。

2.rich-text 的使用

在微信小程序开发中，rich-text 标签可以用来显示富文本 html内容，可以渲染部分html标签，全局支持class和style属性，但不支持id属性。

微信小程序富文本rich-text使用详解

官方文档-rich-text

3.wx.getMenuButtonBoundingClientRect() 的作用

获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。

官方文档-wx.getMenuButtonBoundingClientRect()

4.小程序蒙层滚动禁止穿透的方式

4.1方法一、 catchtouchmove的作用

小程序禁止屏幕滑动

小程序蒙层滚动禁止穿透,在元素上面添加一个空函数catchtouchmove=preventTouchMove即可

给滑动的元素绑定个catchtouchmove事件

作用：解决滑动遮罩层，遮罩层下面的元素会滑动

<view catchtouchmove="forbidTouchMove"></view>

在js代码里把事件写出来

forbidTouchMove() {},

4.2方法二、 page-meta

page-meta
当小程序基础库最低版本在 2.9.0 以上时，即可使用 page-meta 组件动态修改页面样式

<!-- page-meta 只能是页面内的第一个节点 -->
<page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" /><van-popup show="{{ show }}" catch:touchstart />

vant_Popup 组件当中推荐的方案

5. onTabItemTap的使用

如果你想要 切换到某个tabbar页面时 都执行一些代码，，你可以使用 onTabItemTap 生命周期
不要用onShow

官方文档-onTabItemTap 生命周期

6.小程序分享功能

在app.js内 写一个方法 用wx.onAppRoute监听路由变化 每当路由变化时 给当前页面重新写入一个onShareAppMessage分享配置 再将该方法放在app.js内的onLaunch中去执行 这样就能全局分享啦 让每个页面分享的标题 内容 图片都一样了 如果你想个别页面不需要重写 你可以看看我注释的地方

onLaunch(){this.onShareAppMessage()
},
onShareAppMessage(){wx.onAppRoute(() =>{console.log('当前页面路由发生变化 触发该事件onShareAppMessage')const pages = getCurrentPages() //获取加载的页面const view = pages[pages.length - 1] //获取当前页面的对象if(!view) return false //如果不存在页面对象 则返回// 若想给个别页面做特殊处理 可以给特殊页面加isOverShare为true 就不会重写了// const data = view.data// if (!data.isOverShare) {// data.isOverShare = trueview.onShareAppMessage = () => { //重写分享配置return {title: '微信小程序全局分享',path: "/pages/home/index", //若无path 默认跳转分享页imageUrl:'/image/onshowMessage.png' //若无imageUrl 截图当前页面}}// }})
}

掘金文章——小程序全局分享onShareAppMessage

7.wx.reLaunch的使用和作用

作用： 关闭所有页面，打开到应用内的某个页面

	wx.reLaunch({url: "/pages/my/my"})

官方文档——wx.reLaunch

8.小程序什么时候会被销毁

直入主题，小程序一般有三种情况会被销毁

1、小程序切到后台看不到后，一般 5 分钟内就会被微信客户端主动销毁；
2、iOS 下如果 5 秒内连续大于等于 2 次的内存告警，会被销毁；
3、在微信客户端下拉最近访问的小程序里删除，也会从内存里销毁。

9. 小程序token过期后， 实现无感知的刷新token

import {loginApi} from "@/api/index"
function request ({url,method = 'GET',data,header = {},timeout = 30000,callback=""   //通过callback的形式实现失效接口的调用
}) {const app = getApp()const baseUrl = app.globalData.baseUrl;// wx.showLoading({ title: '加载中' }); // 显示loadingheader = {'content-type':'application/json',...header}// 携带tokenlet token = wx.getStorageSync("token");if (token) {header.authorization = 'bearer ' + token}return new Promise((resolve, reject) => {wx.request({url: baseUrl + url, // 请求的urlmethod, // 请求方式data, // 携带数据header, // 请求头timeout, // 超时时间dataType: 'json', // 数据类型是jsonresponseType: 'text', // 响应类型是文本success: (response) => { // 请求成功之后会执行success回调let res = response.data // 拿到响应体(也就是后端返回的数据,包含code、data、message)if (res && (res.code == 200 || res.code == 0)) {if(callback){  //有的话 调用callback(res.data)return}resolve(res.data)} else if (res.code == 401) { // 未登录的处理,只要返回code是xxx都去登录页wx.removeStorageSync('token')    //删除原来的tokenwx.login({   //重新登录 成功之后 再发起接口自调用success: (resLogin) => { loginApi({code:resLogin.code}).then(resLoginData=>{console.log('401resLoginData: ', resLoginData);wx.setStorageSync('token', resLoginData.token)request({url,method ,data,header,timeout,callback:resolve})})},})} else {// 弹出提示框wx.showToast({ // 给用户提示title: `${res.message || res.msg}`,icon: 'none', // none success error// image: '/static/images/1.png',duration: 1500});console.error("errRes",res) // 给程序员看的reject(res.msg || '请求失败')}},fail: (err) => { // 请求失败执行的回调(断网的时候会走到fail中,超时也会只有fail,url错误(指url不是字符串)也会走fail)wx.showToast({ // 给用户提示title: '请求失败',icon: 'error',duration: 1500});console.error(err) // 给程序员看的reject(err)},complete: () => { // 不管成功失败都会执行的回调// wx.hideLoading(); // 隐藏loading}});})}export default request

通过这篇文字 自己封装的上边的request——小程序token过期后， 实现用户无感知的刷新token

10.wx.downloadFile 和 wx.showShareImageMenu

打开分享图片弹窗，可以将图片发送给朋友、收藏或下载

 wx.downloadFile({url: 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg',success: (res) => {wx.showShareImageMenu({path: res.tempFilePath})}})

官网——wx.downloadFile文档
官网——showShareImageMenu文档

11.小程序将本地图片转变为base64

搜索到的文章——小程序图片转base64方案（多种解决方案）

const GetBase64 = (path)=> {return 'data:image/jpg;base64,' + wx.getFileSystemManager().readFileSync(path, 'base64');
}let base64Url = GetBase64('/images/wode/triangleBg.png')

12.【微信小程序】fail url not in domain list 解决方法

由于在开发环境下图片能显示出来，但是在正式环境图片没有显示出来 发现的问题 ，于是解决

搜索到的文章——fail url not in domain list 解决方法

13.微信小程序警告 Component is not found in path “custom-tab-bar/index”

自定义导航时报的警告，解决方法

搜索到的文章——微信小程序警告 Component is not found in path “custom-tab-bar/index”

14.wx.chooseMedia的使用

作用： 拍摄或从手机相册中选择图片或视频。(发起上传相册的功能)

官网——wx.chooseMedia文档

15.小程序页面间传参的五种方式

15.1、使用globalData

15.2、使用storage

15.3、使用url

15.4、使用通信通道

15.5、使用页面栈

搜索到的文章——小程序页面间传参的五种方式

16. 微信小程序复制功能 wx.setClipboardData

设置系统剪贴板的内容。调用成功后，会弹出 toast 提示"内容已复制"，持续 1.5s

官网——wx.setClipboardData

17.web-view的使用

作用： 承载网页的容器。会自动铺满整个小程序页面

<web-view src="{{url}}"/>

官网——web-view

18.小程序 weui 暗夜模式

可以通过api wx.getSystemInfoSync().theme 获取当前系统主题，并存到data中

在wxml模版的根dom上，添加属性data-weui-theme

<view class="page" data-weui-theme="{{theme}}">

在对应的js中读取theme

同时监听theme的变化，当移动端设备切换暗夜模式的时候，进行动态的适配

onLoad: function() {wx.onThemeChange(({ theme }) => this.setData({ theme }));
},

19.微信小程序-底部元素margin-bottom失效解决办法

19.1、解决办法1

外层元素加1rpx padding

.wrapper{height: auto;padding-bottom:1rpx;
}

19.2、解决办法2

用padding代替margin

20.微信小程序自定义生成二维码海报并分享

20.1、 Painter生成海报（已验证）

搜索到的文章——如何实现快速生成朋友圈海报分享图

Painter 一款轻量级的小程序海报生成组件

Painter——github 地址

20.2、插件wxa-plugin-canvas（没有验证尝试）

搜索到的文章——微信小程序生成二维码海报并分享

21. wx.openDocument

作用： 新开页面打开文档。


wx.downloadFile({// 示例 url，并非真实存在url: 'http://example.com/somefile.pdf',success: function (res) {const filePath = res.tempFilePathwx.openDocument({filePath: filePath,success: function (res) {console.log('打开文档成功')}})}
})

22. 微信小程序的console.log在正式环境关闭

//一键开启、关闭log，在正式版关闭打印
console.log = __wxConfig.envVersion === "release" ? () => {} : console.log;

23.wx.getSystemInfo 获取手机系统信息

作用： 获取手机系统信息。

官网——wx.getSystemInfo

在开发过程中 需要根据不同的手机像素动态的展示2倍和3倍图

// 获取手机像素比getPixelRati() {let pixelRatio = 0;wx.getSystemInfo({success: function(res) {pixelRatio = res.pixelRatio},fail: function() {pixelRatio = 0}})return pixelRatio;}

24.wx.getUpdateManager 对象 小程序自动更新

const updateManager = wx.getUpdateManager();updateManager.onCheckForUpdate(function (res) {// 请求完新版本信息的回调console.log("版本信息", res);});updateManager.onUpdateReady(function () {wx.showModal({title: "更新提示",content: "新版本已经准备好，是否重启应用？",success(res) {if (res.confirm) {// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启updateManager.applyUpdate();}},});});updateManager.onUpdateFailed(function () {wx.showModal({title: "温馨提示",content: "新版本已经上线，请您删除当前小程序，重新搜索打开",});});

官网——wx.getUpdateManager

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/666291.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Unity 通过配置文件生成代码

Unity 通过配置文件生成代码

文章目录 示例1&#xff1a;基于ScriptableObject的配置生成类示例2&#xff1a;预制体路径列表生成加载代码示例3&#xff1a;动画剪辑生成动画控制器片段示例4&#xff1a;Excel配置表生成序列化类示例5&#xff1a;UI元素及其事件绑定生成代码 在Unity编辑器模式下&#xff…
阅读更多...
【BBF系列协议】TR181-2 TR369的设备数据模型

【BBF系列协议】TR181-2 TR369的设备数据模型

针对CWMP端点和USP代理的TR-181设备数据模型 执行摘要 TR-181问题2定义了设备数据模型的版本2（设备：2）。设备：2数据模型适用于所有类型的TR-069或USP启用的设备，包括终端设备、住宅网关和其他网络基础设施设备。 本技术报告中定义的设备：2数据模型由一组数据对象组成，…
阅读更多...
电商实战练习部署

电商实战练习部署

基于阿里云ECS服务器实战部署 1 单架构部署方案 1.1 部署流程 传统方案 基于docker 2 持续集成&持续部署方案 随着软件开发复杂度的不断提高&#xff0c;团队开发成员间如何更好地协同工作以确保软件 开发的质量已经慢慢成为开发过程中不可回避的问题。互联网软件的开发…
阅读更多...
护眼台灯有aaa级吗为什么？一文揭晓护眼台灯照度等级分类

护眼台灯有aaa级吗为什么？一文揭晓护眼台灯照度等级分类

尽管台灯是一个很成熟的行业&#xff0c;但却时不时也会冒出一些新的概念和名词。比如近些年的”AAA级”台灯&#xff0c;很频繁地出现在我们视野中。给人感觉似乎带”AAA级”的台灯&#xff0c;要比其他的强上一头。那到底是真是假呢&#xff1f; 一、护眼台灯有AAA级吗&…
阅读更多...
字节跳动推出MagicVideo-V2超高清文生视频模型

字节跳动推出MagicVideo-V2超高清文生视频模型

&#x1f989; AI新闻 &#x1f680; 字节跳动推出MagicVideo-V2超高清文生视频模型 摘要&#xff1a;MagicVideo-V2是由字节跳动的研究人员开发的一种超高清文生视频模型。该模型在视频的高清度、润滑度、连贯性、文本语义还原等方面表现出色&#xff0c;比目前主流的文生视…
阅读更多...
leetcode 1.两数之和（C++）DAY1（待补充哈希表法）

leetcode 1.两数之和（C++）DAY1（待补充哈希表法）

文章目录 1.题目描述示例提示 2.解答思路3.实现代码结果4.总结 1.题目描述 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&…
阅读更多...
ffmpeg操作实战001：视频+音频文件融合

ffmpeg操作实战001：视频+音频文件融合

一、功能需求 把视频文件video.mp4 和音频文件audio.wav融合在一起&#xff0c;输出视频文件output.mp4 二、操作指令 ffmpeg -i video.mp4 -i audio.wav -c:v copy -map 0:v:0 -map 1:a:0 output.mp4 三、参数说明 ffmpeg: 这是用于执行FFmpeg命令行工具的命令。-i video…
阅读更多...
04. 【Linux教程】安装 Linux 操作系统

04. 【Linux教程】安装 Linux 操作系统

通过前面的小节学习&#xff0c;我们已经对 Linux 操作系统有了简单的了解&#xff0c;同时也在 Windows 下安装了虚拟机软件 VMware &#xff0c;那么本节课我们就介绍下如何使用虚拟机软件安装 Linux 操作系统。 通过第一小节的学习我们知道 Linux 有很多的发行版本&#xf…
阅读更多...
Spring Data JpaRepository数据库增、删、改、查接口快速实现

Spring Data JpaRepository数据库增、删、改、查接口快速实现

1. Controller&#xff08;EventController.java&#xff09; RestController RequestMapping("/Event") public class EventController {// 案件信息AutowiredEventRepository eventRepository;// 添加、编辑PostMapping("/addEvent")public ResponseObj…
阅读更多...
工信部颁发的《计算机视觉处理设计开发工程师》中级证书

工信部颁发的《计算机视觉处理设计开发工程师》中级证书

计算机视觉&#xff08;Computer Vision&#xff09;是一门研究如何让计算机能够理解和分析数字图像或视频的学科。简单来说&#xff0c;计算机视觉的目标是让计算机能够像人类一样对视觉信息进行处理和理解。为实现这个目标&#xff0c;计算机视觉结合了图像处理、机器学习、模…
阅读更多...
主从不一致解决方案

主从不一致解决方案

此方案重新实现主从，数据完全同步 1）进入主库数据库 mysql -uroot -proot 2) 在主库加锁，开启只读服务（保证没有新数据写入） flush tables with read lock; 3)在主库进行数据备份,把数据备份为.sql的文件 mysqldump -u登陆用户 -p登陆密码 --all-databases > my…
阅读更多...
11.3 Web开发_JavaScript入门(❤❤❤)

11.3 Web开发_JavaScript入门(❤❤❤)

11.3 Web开发_JavaScript入门 1. 简介1.1 JavaScript简介1.2 浏览器执行js1.3 js组成1.4 js书写位置2. 基础语法2.1 变量2.2 数据类型2.3 数据类型检测_typeof ❤❤2.4 NaN 和 isNaN2.5 数据类型相互转换3. 运算符及流程控制3.1 运算符3.2 流程控制1. 分支结构 if..
阅读更多...
Python 连接 mysql 详解（mysql-connector-python）

Python 连接 mysql 详解（mysql-connector-python）

文章目录 1 概述1.1 第三方库&#xff1a;mysql-connector-python1.2 可视化工具&#xff1a;navicat1.3 创建测试数据库 2 连接 mysql 数据库2.1 创建一个连接2.2 捕获连接异常2.3 从配置文件中获取连接信息 3 执行 sql 语句3.1 插入、更新、删除3.2 查询 1 概述 1.1 第三方库…
阅读更多...
深度学习系列56：使用whisper进行语音转文字

深度学习系列56：使用whisper进行语音转文字

1. openai-whisper 这应该是最快的使用方式了。安装pip install -U openai-whisper&#xff0c;接着安装ffmpeg&#xff0c;随后就可以使用了。模型清单如下&#xff1a; 第一种方式&#xff0c;使用命令行&#xff1a; whisper japanese.wav --language Japanese --model…
阅读更多...
前端Vue every() 方法

前端Vue every() 方法

every() 方法用于检测数组所有元素是否都符合指定条件&#xff08;通过函数提供&#xff09;。 every() 方法使用指定函数检测数组中的所有元素&#xff1a; 如果数组中检测到有一个元素不满足&#xff0c;则整个表达式返回 false &#xff0c;且剩余的元素不会再进行检测。如…
阅读更多...
网易和腾讯面试题精选---性能和优化面试问题

网易和腾讯面试题精选---性能和优化面试问题

介绍 在当今快节奏的数字环境中，优化性能对于确保软件系统的效率、可靠性和可扩展性至关重要。随着组织努力提供无缝的用户体验、满足不断增长的需求并保持竞争力，性能调整和优化成为关键学科。本文深入探讨了跨不同领域、技术和应用场景优化系统性能的关键策略、技术和最佳…
阅读更多...
Relation-graph关系图/流程图，VUE项目基础使用

Relation-graph关系图/流程图，VUE项目基础使用

一、Relation-graph 是支持Vue2、Vue3、React的关系数据展示组件&#xff0c;支持通过【插槽】让使用者使用"普通HTML元素、Vue组件、React组件"来完全自定义图形元素&#xff0c;并提供实用的API接口让使用者轻松构建可交互的图形应用。 二、网站&#xff1a; Re…
阅读更多...
MySQL运维实战(5.3) MySQL数据乱码的一些情况

MySQL运维实战(5.3) MySQL数据乱码的一些情况

作者&#xff1a;俊达 表数据乱码 表数据出现乱码的情况通常是由于数据的真实编码与相关参数不一致引起的&#xff0c;其中包括常见的参数如character_set_client、character_set_results、字段编码以及终端编码等。确保这些参数保持一致&#xff0c;可以有效预防和解决乱码问…
阅读更多...
歌声悠扬如往昔

歌声悠扬如往昔

有一首歌 - 朱晓琳&#xff08;网易云单曲&#xff09; 作词 : 陈彼得作曲 : 陈彼得有一首歌我想起你那时候微风轻轻有一首歌我想起你你的感觉温馨有多少的欢笑就有多少的忧伤 愿时光在这里停住(好景不常在)歌声悠扬如往昔哦哦哦咿咿咿有一首歌我和你词意朦胧旋律依稀唱一首歌…
阅读更多...
【数据结构 09】哈希

【数据结构 09】哈希

哈希算法&#xff1a;哈希也叫散列、映射&#xff0c;将任意长度的输入通过散列运算转化为固定长度的输出&#xff0c;该输出就是哈希值&#xff08;散列值&#xff09;。 哈希映射是一种压缩映射&#xff0c;通常情况下&#xff0c;散列值的空间远小于输入值的空间。 哈希运…
阅读更多...
最新文章

Copyright @ 2022~2023