微信小程序日常踩坑后的总结（猜测你也会遇到，持续更新。。。）

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改成mw1024https://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、持续更新。。。

作者：Ewall_
链接：https://www.jianshu.com/p/c76679d072b0