为了账号安全,请及时绑定邮箱和手机立即绑定

小程序开发遇坑指南(一)

标签:
WebApp

PS:关于小程序的文章想写很久了,但是由于小程序一直在开发的原因,一拖再拖,趁现在有点时间起个头先。

本遇坑指南不会过多介绍小程序内的一些功能怎么用,因为如果想知道功能的话可以去隔壁小程序官方文档(https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html),里面的文档写的非常完整易懂。这里主要是一些文档没有告诉你的东西,我在实际开发中遇到的坑,以及对应的解决方案,希望能帮助到正在踩坑的人。

一、Button样式问题
有时候我们需要用到表单组件来收集formID,跳转到客服页面,但是button原生的组件会比较不符合设计的需求,所以需要替换掉button自带的样式,然后再进行样式的更改,代码如下

wxml:  <form bindsubmit="subForm" report-submit="{{true}}">
    <button type="primary" hover-class="none" class="out-btn" formType="submit">
      <view class="sub-btn">提交</view>
    </button>
  </form>
  wxss:

button{
  background-color:transparent;
  padding:0;
  margin:0;
  display:block;
  border:0;
  border-radius:0;
  z-index: 10;
}
button::after{  content:'';
  width:0;
  height:0;
  -webkit-transform:scale(1);
  transform:scale(1);
  display:none;
  background-color:transparent;
}

二、canvas画图的坑
在有些场景下可能会有前端小程序画图的需要,比如说要生成如下订制版分享的二维码图片并保存到相册


https://img1.sycdn.imooc.com//5d58a8c600017b4310001449.jpg

案例图片


这是我在轻芒上找的一个例子,这种生成分享图的需求还是很常见的。红线画出来的区域是是一些图片的资源,这样要画上去的话就需要用到一个canvas的API,
ctx.drawImage(注意:ctx就是官方文档中的canvasContext,canvas上下文),这个API接受的第一个参数就是图片的资源。
划重点了,这个图片的资源一定得是本地图片才能画在画布上,例如('../../static/images/qrcode.png'),如果是网络图片链接就会在画布上出现黑色的一块什么都没有,所以在调用这个API之前得对网络图片进行一步下载处理

  getDrawImage: function (picUrl) {    return new Promise(resolve=>{
      wx.downloadFile({        url: picUrl,        success: (res) => {          let picLocal = res.tempFilePath;
          resolve(picLocal);     
        }
      })
    })
  },

我在这里封装了一个函数专门来在调用网络图片前使用,因为下载是异步的,所以用到了promise。

在画图,画文字都画完后就是转换canvas画布成图片了,在这一步也遇到了一个坑,是API调用的问题,话不多说贴代码:

  saveImg() {
    wx.showToast({      title: '生成中...',      icon: 'loading',      duration: 10000
    })
    wx.canvasToTempFilePath({      x: 0,      y: 0,      width: 375,    //这里必填
      height: 543,    //这里必填
      destWidth: 750,      destHeight: 1086,      canvasId: 'myCanvas',      success: (res) => {
        wx.saveImageToPhotosAlbum({          filePath: res.tempFilePath,          success: () => {
            wx.hideToast();
            wx.showToast({              title: '保存成功!',              icon: 'success',              duration: 1500,              mask: true
            })
          }
        })
      }
    })
  }

代码中注释的地方在官方文档中是不需要必填的选项,但是如果真的不填的画,画出来的也会出问题(附文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/canvas/temp-file.html)。

未完待续。。。



作者:黑白饼干
链接:https://www.jianshu.com/p/b328e546b840



点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消