微信小程序踩坑指南

781 阅读2分钟

前言

9102马上结束,工作做完了吗?年终奖发多少?有女朋友了吗?...

真是让人头大啊

2019的目标还没实现,2020年的目标又开始了,头痛...

想想这些脑壳好痛,还是回到代码的快乐世界吧

似乎...也不是那么快乐

1.new Date跨平台兼容性问题

在Andriod使用new Date(“2019-12-27 00:00:00”)木有问题,但是在ios下面识别不出来。

因为IOS下面不能识别这种格式,需要用2018/12/27 00:00:00格式。可以使用正则表达式对做字符串替换,将短横替换为斜杠。

let newT = t.replace(/-/g, '/');
let date = new Date(newT );
console.log(date);   // Fri Dec 27 2019 16:11:19 GMT+0800

2.分享至朋友圈

微信官方没有提供开放接口,所以我们通过canva画布,生成一张图片,图片自带小程序码,用户通过识别二维码,达到分享小程序到朋友圈目的

wx.getSystemInfo: 获取设备信息,为canvas做大小适配;

wx.downloadFile({}): 下载图片,存在变量中,详情查看小程序官方api

在canvas上添加文字和图片

图片:`context.drawImage(img,x,y,width,height)`

文字:`fillText(text,x,y [,maxWidth])`

wx.canvasToTempFilePath: canvas转成图片

3.分享至好友(onShareAppMessage)

  1. 监听转发按钮(button open-type="share")或小程序右上角“转发”按钮的点击行为;
  2. 自定义转发分享内容;
  3. 还可以监听这些信息。

wx.hideShareMenu(Object object):隐藏转发按钮,关闭转发功能

onLoad: function() {
    wx.hideShareMenu()
},
onShow: function() {
    wx.hideShareMenu()
}

获取更多转发信息,通常开发者希望转发出去的小程序被二次打开的时候能够获取到一些信息,例如群的标识。

onLoad: function() {
    wx.showShareMenu({
        withShareTicket: true
    })
},
onShow: function() {
    wx.showShareMenu({
        withShareTicket: true
    })
}

当用户将小程序转发到任一群聊之后,此转发卡片在群聊中被其他用户打开时,可以在 App.onLaunchApp.onShow 获取到一个 shareTicket。通过调用 wx.getShareInfo 接口传入此 shareTicket 可以获取到转发信息encryptedData。 后端去解密,其中 openGId 为当前群的唯一标识,作用就是区分是好友还是群聊:

{
    "openGId": "OPENGID"    
}

4. cover-view

  • cover-view中设置单独方向的border貌似并不管用。例如设置border-bottom或者border-top作为分割线,真机上是全部border都生效
  • cover-viewbackground的渐变不生效
  • cover-view作为父容器时,不能使用其他控件嵌套作为子元素,只能使用cover类的控件,例如:cover-viewcover-image

5. data数组或对象中的某一个值赋值

data数据如下:

Page({
    data: {
        userInfo: {
            userName: 'lisa'
        },
    }
})

修改userInfouserName的值:

this.setData({
    'userInfo.userName': 'lily'
}, () => {
    console.log(this.data.userInfo) // {userName: "lily"}
})

好短....