微信小程序日常踩坑后的总结（猜测你也会遇到，持续更新。。。）
微信小程序日常踩坑后的总结（猜测你也会遇到，持续更新。。。）
Ewall
发布于 2018-09-04 15:41:56
发布于 2018-09-04 15:41:56
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.jpg5、如何在页面中使用按钮进行跳转以及清空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、持续更新。。。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.05.03 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读