在小程序中集成赞赏

2,527 阅读3分钟

阅读本文大概需要3分钟。

好吧,我承认我标题党了,如果你是进来找如何搭建小程序中的支付流程的,请你下车吧~

这篇文章是介绍个人小程序如何集成赞赏功能的,利用微信小程序提供的支付接口必须具有公司资质才可以。或者你也可以集成有赞,不过会抽取一定的手续费。

言归正传,让我们一步一步来集成赞赏吧,让那些喜欢你的用户也可以打赏你一下。

生成一个赞赏码。

打开微信,点击右上角加号->收付款->赞赏码,这里你可以进行一些赞赏设置,然后点击保存赞赏码。这样你就拥有了你专属的赞赏码了。

获取一个图片地址

  • 如果你有服务器或者其他的存储空间,你可以把你的赞赏码上传到你的存储空间,然后拿到图片的htts地址,后面会用到。
  • 如果你没有,那么还可以利用小程序给我们提供的免费的云开发。下面先来说一下如何将图片上传到云存储中。
    1. 打开小程序开发工具,找到云开发后点击,如果你没有开通,则会提示你开通,需要在控制台中开通,路径是:开发->开发者设置->腾讯云
      在这里插入图片描述
    2. 开通后再点击云开发,打开控制台,找到存储管理->上传文件,上传上一步你的专属赞赏码图片。上传完成后,就能看到文件了,将fileid字段复制下来,后面会用到。
      在这里插入图片描述

图片预览

这一步需要根据实际情况分开来处理了,下面针对上一步说的两种形式一一讲解。

1. 使用其他云存储

拿到图片的https链接后,在你的小程序wxml添加一个打赏的按钮,然后给按钮添加如下点击事件:

wx.previewImage({
     urls: ['https://xxxxx/admire-qrcode.jpg'],
});

写到这里相信大家应该就很清楚了,不错,我们就是利用微信的图片预览功能来加载网络图片。当加载出预览大图二维码后,用户就可以长按识别二维码,弹出微信的识别图中二维码功能,最终跳转到微信自带的赞赏页面,是不是很赞呢~

2. 使用云开发存储

使用云开发存储的思路是一致的,只不过需要在代码中初始化一些云开发环境。

  • 初始化云开发 在app.js中加入如下代码进行初始化:
onLaunch: function() {
    wx.cloud.init({
      traceUser: true
    });
}
  • 添加按钮点击事件 点击事件中传入的url就是第二步获取到的fileid
previewImage: function() {
    wx.previewImage({
        urls: ['cloud://carutil-007.6361-carutil-007/admire-qrcode.jpg'],
    });
  },

大功告成,最终效果如下图所示。

在这里插入图片描述

你可以扫描下方的小程序码来体验该功能,在首页最底部有个打赏按钮~

在这里插入图片描述

如果喜欢我的文章,可以扫码关注我的微信公众号~

在这里插入图片描述

也可以扫码赞赏~

在这里插入图片描述