微信小程序日常踩坑后的总结(猜测你也会遇到,持续更新。。。)
时间:2022-06-09
本文章向大家介绍微信小程序日常踩坑后的总结(猜测你也会遇到,持续更新。。。),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、scroll-view组件横向滚动为什么没效果?
要加一个white-space:nowrap;
.scroll-view-item_H {
display: inline-block;
}
<scroll-view class="scroll-view_H" scroll-x style="width: 100%; white-space: nowrap;">
<view class="scroll-view-item_H bc_green"></view>
<view class="scroll-view-item_H bc_red"></view>
<view class="scroll-view-item_H bc_yellow"></view>
<view class="scroll-view-item_H bc_blue"></view>
</scroll-view>
2、canvas实现绘图功能的同时并在页面中隐藏?
// wxss
.container {
width: 375px;
height: 667px;
overflow: hidden;
}
<!--wxml-->
<view class="container">
<view>....</view>
<canvas canvas-id="myCanvas"></canvas>
</view>
3、canvas中使用drawImage?
(1)图片需是本地图片或者是路径为https的网络图片; (2)使用网络图片要用wx.downloadFile( )下载,否则真机上无法显示图片; (3)wx.downloadFile()是异步的;
wx.downloadFile({
url: "https://api.strange.lha116.cn/static/strange/background/origin/origin_1.png",
success: function(res) {
if (res.statusCode === 200) {
// canvas绘图
const ctx = wx.createCanvasContext('myCanvas');
ctx.drawImage(res.tempFilePath, 0, 0, canvasWidth, canvasHigth);
ctx.draw();
wx.canvasToTempFilePath({
x: 0,
y: 0,
canvasId: 'myCanvas',
success: function(res) {
let pic = res.tempFilePath;
// 保存到本地
wx.saveImageToPhotosAlbum({
filePath: pic,
success(res) {
wx.hideLoading();
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
});
}
});
}
});
}
}
});
4、本地图片怎样用作背景?
小程序不支持本地图片,只支持base46或网络图片; 所以采用迂回的方法打开微博上传一张图片,调出开发者工具选择这张图片后选出图片url链接; (原理就是借用微博的服务器生成的链接供己使用)
获取图片url
https://wx1.sinaimg.cn/square/006pIwwKgy1fpja6ehcssj300e00eq2q.jpg
// 将square改成mw1024
https://wx1.sinaimg.cn/mw1024/006pIwwKgy1fpja6ehcssj300e00eq2q.jpg
5、如何在页面中使用按钮进行跳转以及清空button样式?
button默认样式
根据上图对button进行相关属性覆盖,但是边框的清除要在button的伪元素中:
button::after {
border: none;
}
6、为什么设置image图片底部有一部分小白边去不了?
把image图片设置display:block;
image {
display:block;
}
7、高度自适应
高度自适应
思路:底部高度自适应 = (获取systemInfo里的窗口可使用高度 - 顶部固定的高度)
wx.getSystemInfo({
success: function(res) {
console.log(res.windowHeight);
}
})
8、设置当前页面的标题
标题设置
wx.setNavigationBarTitle({
title: '当前页面'
})
9、持续更新。。。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- TKE之初识容器探测器
- 2.3.2 JDK动态代理 -《SSM深入解析与项目实战》
- mac设备安装nginx注意事项
- 《研发运营安全白皮书(2020年)》深度解读:全生命周期安全体系将是未来趋势
- 深度学习故障诊断:残差收缩网络 Residual Shrinkage Networks
- Java基于SSM的个人博客系统(源码 包含前后台)
- 聊聊RespServer
- Spring Boot系列之读取配置
- Flutter中State深入分析理解
- Xenomai3.1+ubuntu 18.04/16.04
- 聊聊RespCommand
- Python爬取网站图片
- PHP实现码云Gitee的WebHook密钥验证算法
- 带你用 Python 实现自动化群控设备
- Pyhon制作脚本提取日志数据