小程序(Wepy)--生成海报图片
对于小程序的分享, 除了分享给朋友, 好友群,是可以直接做到的, 但是要想扩大推广范围, 通过生成海报图片, 将自己小程序码带进去,应该是目前我所知的好办法了.
但是海报也不是那么好搞.之前自己手写出来的, 效果可以是可以,但问题还是百出,只能怪自己的技术还不到家......(加油).
昨天在逛小程序社区时,发现了一个海报插件.就动手试了试,效果还是让我比较满意的.
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)--生成海报图片的更多相关文章
- 小程序canvas生成海报保存至手机相册
小程序canvas画图保存至手机相册 (1)可直接展示生成的海报 .因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报 (2 ...
- 微信小程序canvas生成并保存图片
---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图 实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图 ...
- 微信小程序动态生成保存二维码
起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ...
- 微信小程序之生成二维码
最近项目中涉及到小程序的生成二维码,很是头疼,经过多次摸索,整理出了自己的一些思想方法,如有不足,欢迎指正. 首先完全按照小程序的结构依次填坑. pages--index.wxml <view ...
- 微信小程序--canvas画布实现图片的编辑
技术:微信小程序 概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...
- 微信小程序wepy开发循环wx:for需要注意
微信小程序wepy开发循环wx:for需要注意 item index值必须在wx:for之后使用 <view wx:for="{{tablist}}" class=" ...
- 微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签
微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签 一.问题 报错信息: VM696:2 pages/user/user.wxss 中的本地资源 ...
- 微信小程序一键生成源码 在线制作定制功能强大的微信小程序
微信小程序发展到现在,短短的一年不到的时间(很快就要迎来微信小程序周年庆),在快迎来周年庆之际,百牛信息技术bainiu.ltd特记录一下这个发展的历程,用于将来见证小程序发展的辉煌时刻,我们还能知道 ...
- 小程序--wepy省市区三级联动选择
产品老哥对项目再一次进行关爱, 新增页面, 新增需求, 很完美........ 不多说, 记录一下新增东西中的省市区联动选择, (这里全国地区信息是在本地, 但不建议这么做, 因为js文件太大.. 建 ...
随机推荐
- Android开发人员必备的10 个开发工具
工欲善其事,必先利其器,Android SDK 本身包含很多帮助开发人员设计.开发.测试和发布 Android 应用的工具,在本文中,我们将讨论 10 个最常用的工具. 1.Eclipse ADT ...
- 以checked选中作为判断条件的各种写法
<input type="radio" name="choice" id="ipt1"> <label for=" ...
- 数据库优化一般思路(PLSQL、Navicat)
SQL执行过程: 1.执行SQL时,sql解析引擎会被启动 2.数据类型和数据库表定义的数据类型不一致,数据库引擎会自动转化 3.数据库表定义了多个索引,sql引擎会帮你选择最优的一个 4.数据库引擎 ...
- mybatis入门截图总结
原生态jdbc存在的问题 ------------------- ----------------------- ------- 环境的搭建 ----------------------------- ...
- MyBatis-Spring-SqlSessionFactoryBean(转)
SqlSessionFactoryBean 在基本的 MyBatis 中,session 工厂可以使用 SqlSessionFactoryBuilder 来创建.而在 MyBatis-Spring 中 ...
- HDU 4340
好题一道啦.做这题时,抓住两个问题:一.给某点染色时,其连通的点是否已有一点以全部代价染色.二.该点染什么颜色. 嗯.第二个问题很容易,但第一个问题不容易了.我一开始就考虑祖父子三层结点的关系,认为在 ...
- Spring-SpringJdbcTemlate配置介绍
使用spring的jdbcTemplate进一步操作JDBC 一.普通配置 SpringJdbcTemplate连接数据库并操作数据 1.applicationContext.xml 1.1 建立D ...
- 简单的Queue
不考虑好多东西,算法考试中用得到的Queue #include<iostream> using namespace std; const int MAX = 100; struct MyQ ...
- Project Euler:Problem 37 Truncatable primes
The number 3797 has an interesting property. Being prime itself, it is possible to continuously remo ...
- Gradle for Android 第三篇( 依赖管理 )
依赖管理 这会是一个系列,所以如果你还没有看我之前的几篇文章,请先查看以下文章: Gradle for Android 第一篇( 从 Gradle 和 AS 开始 ) Gradle for Andro ...