对于小程序的分享, 除了分享给朋友, 好友群,是可以直接做到的, 但是要想扩大推广范围, 通过生成海报图片, 将自己小程序码带进去,应该是目前我所知的好办法了.

但是海报也不是那么好搞.之前自己手写出来的, 效果可以是可以,但问题还是百出,只能怪自己的技术还不到家......(加油).

昨天在逛小程序社区时,发现了一个海报插件.就动手试了试,效果还是让我比较满意的.

Wxml2Canvas  https://github.com/wg-front/wxml2canvas(感谢大神的插件) 

插件的文档说的很详细了, npm安装的话, 在我这里会出问题, 所以我去github上将源码下载了下来, 将所需的JS文件放在了项目的canvasJS文件夹下.

因为公司的项目使用的wepy框架, 所以我这里写了两份demo, 一份是原生的, 一份是wepy的,  最后的效果都是一样的.

插入代码有点多, 所以就上传到了博客园文件里了, 需要的道友可以去下载.

原生项目(是小程序代码片段) https://files.cnblogs.com/files/yk95/posterTemp.zip

wepy项目()https://files.cnblogs.com/files/yk95/wepy-poster-test.zip

wepy项目,需要本地装好环境,这里就不多说了, 参考链接 https://tencent.github.io/wepy/document.html#/

下面是生成的效果图

小程序(Wepy)--生成海报图片的更多相关文章

  1. 小程序canvas生成海报保存至手机相册

    小程序canvas画图保存至手机相册 (1)可直接展示生成的海报 .因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报 (2 ...

  2. 微信小程序canvas生成并保存图片

    ---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图     实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图 ...

  3. 微信小程序动态生成保存二维码

    起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ...

  4. 微信小程序之生成二维码

    最近项目中涉及到小程序的生成二维码,很是头疼,经过多次摸索,整理出了自己的一些思想方法,如有不足,欢迎指正. 首先完全按照小程序的结构依次填坑. pages--index.wxml <view ...

  5. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  6. 微信小程序wepy开发循环wx:for需要注意

    微信小程序wepy开发循环wx:for需要注意 item index值必须在wx:for之后使用 <view wx:for="{{tablist}}" class=" ...

  7. 微信小程序：本地资源图片无法通过 WXSS 获取，可以使用网络图片或者 base64或者使用image标签

    微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签 一.问题 报错信息: VM696:2 pages/user/user.wxss 中的本地资源 ...

  8. 微信小程序一键生成源码 在线制作定制功能强大的微信小程序

    微信小程序发展到现在,短短的一年不到的时间(很快就要迎来微信小程序周年庆),在快迎来周年庆之际,百牛信息技术bainiu.ltd特记录一下这个发展的历程,用于将来见证小程序发展的辉煌时刻,我们还能知道 ...

  9. 小程序--wepy省市区三级联动选择

    产品老哥对项目再一次进行关爱, 新增页面, 新增需求, 很完美........ 不多说, 记录一下新增东西中的省市区联动选择, (这里全国地区信息是在本地, 但不建议这么做, 因为js文件太大.. 建 ...

随机推荐

  1. 实验二：编写输出"Hello World!"

    1.首先打开eclipse这个软件,新建Java项目,执行“文件→ 新建→Java项目 ”菜单命令,打开新建Java对话框,在项目名的编辑框中输入项目名编写输出"Hello World!”, ...

  2. nyoj314-斐波那契数列四吧

    斐波那契数列四吧 时间限制:3000 ms  |  内存限制:65535 KB 难度:2 描述 斐波那契数列为:0,1,1,2,3,5,8,13....,常规递推公式为f(n)=f(n-1)+f(n- ...

  3. [洛谷P4887]第十四分块(前体)

    题目大意: 给定一个长度为\(n\)的序列\(a\),\(k\),和\(m\)次询问. 每次询问给定区间\([l,r]\),求满足\(l\leqslant i< j\leqslant r\)且\ ...

  4. [bzoj 2726] 任务安排 （斜率优化 线性dp）

    3月14日第三题!!!(虽然是15号发的qwq) Description 机器上有N个需要处理的任务,它们构成了一个序列.这些任务被标号为1到N,因此序列的排列为1,2,3-N.这N个任务被分成若干批 ...

  5. django与mysql实现简单的增删查改

    模型定义 from django.db import models class Grades(models.Model): g_name = models.CharField(max_length=2 ...

  6. 使用maven创建springMVC时返回页面报错

    这是由于你的 Maven 编译级别是 jdk1.5 或以下,而你导入了 jdk1.6 以上的依赖包 解决办法: <build> <finalName></finalNam ...

  7. SSM知识巩固2

    数据回显 1.springmvc默认对pojo数据进行回显. pojo数据传入controller方法后,springmvc自动将pojo数据放到request域,key等于pojo类型(首字母小写) ...

  8. Ubuntu12.04 下 GTK3.xx 的安装、编译和測试

    用此方法成功在UBUNTU 12.04下安装GTK 3.xxx. 一.安装 1.安装gcc/g++/gdb/make 等基本编程工具 $sudo apt-get install build-essen ...

  9. 一点一点学架构(四)—Spring.NET错误Cannot Resolve Type……

    背景 在搭建完项目框架之后,当我利用单元測试来測一条线时.出现了下面错误: Cannot resolve type[--]for object with name 'ButtonBll' define ...

  10. Manarcher 求 字符串 的最长回文子串 【记录】

    声明:这里仅仅写出了实现过程.想学习Manacher的能够看下这里给出的实现过程,算法涉及的一些原理推荐个博客. 给个链接 感觉讲的非常细 引子:给定一个字符串s,让你求出最长的回文子串的长度. 算法 ...