1. backdrop-filter样式的作用
backdrop-filter 是CSS中的一个属性，用于为元素的背景区域添加图形效果，如模糊或者颜色偏移。这个属性的使用需要满足一定的条件，即元素本身或者其背景至少部分必须是透明的，这样才能让附加的效果显现出来。
backdrop-filter 的语法包括一个以空格分隔的 filter-function-list，这可以是单个滤镜函数（<filter-function>），或者是用来应用到背景上的SVG滤镜。
效果如下： 是一个蒙层
2.rich-text 的使用
在微信小程序开发中，rich-text 标签可以用来显示富文本 html内容，可以渲染部分html标签，全局支持class和style属性，但不支持id属性。
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 />
5. onTabItemTap的使用
如果你想要 切换到某个tabbar页面时 都执行一些代码，，你可以使用 onTabItemTap 生命周期
不要用onShow
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 = true
view.onShareAppMessage = () => { //重写分享配置
return {
title: '微信小程序全局分享',
path: "/pages/home/index", //若无path 默认跳转分享页
imageUrl:'/image/onshowMessage.png' //若无imageUrl 截图当前页面
}
}
// }
})
}
掘金文章——小程序全局分享onShareAppMessage
效果图： 
7.wx.reLaunch的使用和作用
作用： 关闭所有页面，打开到应用内的某个页面
wx.reLaunch({
url: "/pages/my/my"
})
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: '加载中' }); // 显示loading
header = {
'content-type':'application/json',
...header
}
// 携带token
let token = wx.getStorageSync("token");
if (token) {
header.authorization = 'bearer ' + token
}
return new Promise((resolve, reject) => {
wx.request({
url: baseUrl + url, // 请求的url
method, // 请求方式
data, // 携带数据
header, // 请求头
timeout, // 超时时间
dataType: 'json', // 数据类型是json
responseType: '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') //删除原来的token
wx.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的使用
作用： 拍摄或从手机相册中选择图片或视频。(发起上传相册的功能)
15.小程序页面间传参的五种方式
15.1、使用globalData
15.2、使用storage
15.3、使用url
15.4、使用通信通道
15.5、使用页面栈
16. 微信小程序复制功能 wx.setClipboardData
设置系统剪贴板的内容。调用成功后，会弹出 toast 提示"内容已复制"，持续 1.5s
17.web-view的使用
作用： 承载网页的容器。会自动铺满整个小程序页面
<web-view src="{{url}}"/>
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生成海报（已验证）
20.2、插件wxa-plugin-canvas（没有验证尝试）
21. wx.openDocument
作用： 新开页面打开文档。
wx.downloadFile({
// 示例 url，并非真实存在
url: 'http://example.com/somefile.pdf',
success: function (res) {
const filePath = res.tempFilePath
wx.openDocument({
filePath: filePath,
success: function (res) {
console.log('打开文档成功')
}
})
}
})
22. 微信小程序的console.log在正式环境关闭
//一键开启、关闭log，在正式版关闭打印
console.log = __wxConfig.envVersion === "release" ? () => {} : console.log;
23.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: "新版本已经上线，请您删除当前小程序，重新搜索打开",
});
});
25. css样式：mix-blend-mode: multiply; //正片叠底
问题： 在开发过程中
此处的图片会在ios上展示有问题，开发和安卓手机显示正常，ios下图片显示在文字的上边 用z-index也不行
解决方法： 给对应的图片添加mix-blend-mode: multiply; 样式属性
.cardImg{
width: 132rpx;
height:90rpx;
position: absolute;
top: 0rpx;
right: 0rpx;
border-top-right-radius: 16rpx;
mix-blend-mode: multiply; //正片叠底
}
26. 微信小程序1rpx border ios真机显示不全问题分析及解决方案
解决方法：
方案一：如果知道宽度可以 设置固定的宽度为奇数的值 这样border 就展示出来了
方案二：如果不知道宽度 添加transform:rotateZ(360deg) 有时也可以解决
.floor-card{
padding: 8rpx 18rpx;
background: #F7F7F8;
border-radius: 8rpx;
border: 1rpx solid #888888;
font-family: PingFang SC;
font-weight: 400;
font-size: 26rpx;
color: #888888;
transform:rotateZ(360deg)
}
4188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
