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

2019年5月12日 108次阅读 来源: 前端开发

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、持续更新。。。

    原文作者：前端开发
    原文地址: https://www.jianshu.com/p/c76679d072b0
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞