小程序(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文件太大.. 建 ...
随机推荐
- Shader的初步学习
Shader 着色器 .shader 仅仅是渲染流水线中的一个环节,要想让shader发挥出它的作用,我们就需要知道它在渲染流水线中扮演什么样的角色. 渲染流水线的工作任务在于由一个三维场景出发.生成 ...
- 【codeforces 805C】Find Amir
[题目链接]:http://codeforces.com/contest/805/problem/C [题意] 你能从任意一个位置i到达任意一个位置j; 花费为(i+j)%(n+1); 问你从任意一个 ...
- daning links 系列
1001 Easy Finding POJ-3740 1002 Power Stations HDOJ-3663 1003 Treasure Map ZOJ-3209 1004 Lamp HDOJ-2 ...
- Blade - 腾讯开源的构建系统 c/c++编译环境
,Blade是软件project的利器.有助于模块化,模块化的力度控制自如.对于提高系统的可维护性.复杂性的隔离.代码复用的最大化.都有非常大的优点. 2,Blade提供了单元測试的最佳使用方式. 假 ...
- Unity里包裹Debug,且不影响Debug的重定向
Debug.Log, Debug.LogWarning, Debug.LogError在project中常常须要再包裹一层.做些定制.也方便开关Log.但有一个问题时.当用一个类将Debug包裹起来后 ...
- 最全Pycharm教程(38)——Pycharm版本号控制之远程共享
1.主题 介绍怎样通过GitHub共享你的本地Git版本号库 2.准备工作 (1)Pycharm版本号为2.7或者更高 (2)Git以及GitHub可用 (3)有GitHub storage的读写权限 ...
- Android 运行 gson.toJson(object) 报java.lang.StackOverflowError异常
如以下的代码,运行后报java.lang.StackOverflowError错误: MusicSavedInfo musicSavedInfo=new MusicSavedInfo(currentS ...
- Bitcoin学习篇之---PPS和PPLNS挖矿模式介绍
PPS和PPLNS挖矿模式介绍 比特币每10分钟产生一个区块,会有千万人竞争.而这个区块终于仅仅归1个人全部.其他人都颗粒无收. 你或许要挖5年才干获得一个区块. 组队挖矿就是.一旦队伍里不论什么人获 ...
- 谷歌浏览器 —— 快捷键(vimium:像使用 vim 一样操作当前页面)
Chrome 键盘快捷键 拷贝当前页面内的某链接: 首先输入 y(进入 yank 模式),输入 f,为当前页面内的全部超链接编号,然后输入待拷贝的链接编号,即可将该链接复制到粘贴板: 1. 使用 vi ...
- Oracle SQL性能优化系列
1. 选用适合的ORACLE优化器 ORACLE的优化器共有3种: a. RULE (基于规则) b. COST (基于成本) c. CHOOSE (选择性) 设置缺省的优化器,可以通过对init.o ...