写点什么

uniapp- 如何在邀请页面生成海报

  • 2022-11-06
    广东
  • 本文字数:1982 字

    阅读完需:约 7 分钟

uniapp-如何在邀请页面生成海报

准备工作

在开发中经常会遇到邀请或者分享页面需要生成海报分享,生成海报需要用到 html2canvas 插件,页面里一般都带有二维码,所以还需要一个生成二维码的插件,和一个弹出层组件,html2canvas 插件通过npm install html2canvas --save命令下载,二维码和弹出层可以在 uniapp 的插件市场搜索直接下载



生成二维码

二维码的生成需要一个 canvas,设置 canvas 的 id 和宽高


<view class="qr_code">        <canvas canvas-id="qrcode" v-show="qrShow" style="width: 110rpx;height: 110rpx;"/></view>
复制代码


我们需要进入邀请页面的时候就生成好了二维码,首先引入 uqrcode.js 文件,在 created 生命周期函数里调用 uqrcode.js 的方法,传入 id,内容,大小,边距等等


import uQRCode from '../../../common/js/uqrcode.js'
created() { this.qrcode('https://www.baidu.com/')//传入你要传入二维码的内容},methods:{ qrcode(text){ this.qrShow=true uQRCode.make({ canvasId: 'qrcode',//canvas-id componentInstance: this, text: text,//二维码内容 size: 55,//二维码大小 margin: 0,//间距 backgroundColor: '#ffffff',//背景颜色 foregroundColor: '#000000',//二维码颜色 fileType: 'jpg',//文件类型 errorCorrectLevel: uQRCode.errorCorrectLevel.H, success: res => { console.log(res); } }) },}
复制代码


ok,这样我们的二维码就出来了


复制链接

一般除了二维码还有邀请码,点击按钮实现复制邀请码,这个可以用 uniapp 内置的 api,uni.setClipboardData()


<view class="contents">        <view class="text">                邀请码        </view>        <view class="code">                {{code}}        </view></view><button class="poster-btn" @click="copy(code)">复制邀请码</button>
//复制copy(data){ uni.setClipboardData({ data, success() { console.log('success'); } })},
复制代码


当我们点击复制的时候就会弹出弹窗提示


生成海报

一个简陋的页面大概就完成了



当我们点击生成海报按钮的时候就会将整个页面生成一张海报图片,先将下载好的 html2canvas 插件导入,然后传入相应的信息即可生成一张图片,但是这个插件需要传入 id,但是在 app 端的话是操作不了 dom 的,对此,uniapp 为我们提供了一个解决办法,让我们可以在 app 端操作 dom:



renderjs 可以在视图层操作 dom,那么如何去使用 renderjs 呢?只需要新建一个script节点,设置 lang 为 renderjs,在这个 renderjs 里操作 dom 生成海报


//service层<script>     export default {          }</script>
//renderjs<script module="canvas" lang="renderjs"> export default { }</script>
复制代码


导入 html2canvas 插件,在生成海报的方法里使用 document.getElementById()获取要生成海报区域的 id 传入 html2canvas 方法里生成 canvas,在 canvas 对象里设置海报的一些属性,如:背景颜色,宽高等等,再使用 canvas 的 toDataURL()转为 base64 格式的图片


<script module="canvas" lang="renderjs"> import html2canvas from "html2canvas" export default {  methods:{   async toImage(event,ownerInstance){    try{     const timeout=setTimeout(async ()=> {      const htmlCanvas=document.getElementById('htmlCanvas')      const canvas=await html2canvas(htmlCanvas,{       backgroundColor: null,       useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题      })      const url = canvas.toDataURL('image/png')      this.$ownerInstance.callMethod('creates',{//可以调用service层的方法       url      })      clearTimeout(timeout)     }, 500);    }catch(e){     //TODO handle the exception     console.log(e);    }   },  } }</script>
复制代码


通过this.$ownerInstance.callMethod()将生成好的 base64 格式的图片传给 service 层的方法


//生成海报creates(options){    console.log(options);     this.imgUrl = options.url//用于展示海报},
复制代码



为了让海报显示出来,我们使用下载好弹出层组件,图片生成完成的时候弹出弹出层将图片展示出来,且可以分享到微信,朋友圈,qq 等等选项,下面是我的生成海报的一个效果,具体的展示的样式和内容可以自行设置



关于分享的操作可以看看之前写的https://xie.infoq.cn/article/1dd874855ab0293ffc63bfa9a这篇文章,不过海报生成只能在 h5 和 app,小程序是不能生成的,因为 renderjs 不支持小程序端

发布于: 刚刚阅读数: 3
用户头像

还未添加个人签名 2022-11-01 加入

还未添加个人简介

评论

发布
暂无评论
uniapp-如何在邀请页面生成海报_vue.js_格斗家不爱在外太空沉思_InfoQ写作社区