新余网站建设公司,昆明网站开发价格,上海公司牌照价格,咨询行业网站建设公司1. backdrop-filter样式的作用
backdrop-filter 是CSS中的一个属性#xff0c;用于为元素的背景区域添加图形效果#xff0c;如模糊或者颜色偏移。这个属性的使用需要满足一定的条件#xff0c;即元素本身或者其背景至少部分必须是透明的#xff0c;这样才能让附加的效果显…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的作用
小程序禁止屏幕滑动
小程序蒙层滚动禁止穿透,在元素上面添加一个空函数catchtouchmovepreventTouchMove即可
给滑动的元素绑定个catchtouchmove事件 作用解决滑动遮罩层遮罩层下面的元素会滑动 view catchtouchmoveforbidTouchMove/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 classpage 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
