在小程序中集成赞赏

阅读本文大概需要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'],
    });
  },

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

也可以扫码赞赏~

在这里插入图片描述