Skip to content

LaoCheng-cjs/wx_poster

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f640d14 · May 31, 2020

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

wx_poster 介绍

介绍

用于微信小程序海报生成,希望能帮助您并且能帮助更多的人问题。

优势

  • 能够快速开发进入教程,也能减少开发时间
  • 做了图片自动适配页面功能,在返回画布的适配器
  • 只要分两步分走就很轻松的将合成做好,第一步在项目中引入,第二步在使用一些方法就好了。
  • 我们提供很好的开发文档。

第大一步:

基础使用步骤:

第一步:下载或者克隆

(下载方式,不懂自行百度),下载好后,在项目中找到 components 目录中 wx_poster 文件夹,进行拷贝放入到自己项目中。比如我放入在 components 文件夹下面。

第二步:引入组件

找到自己想要引入的页面 .json文件。然后将 usingComponents 里面进行添加上 wx_poster 。比如如下(注意组件路径):

{
  "usingComponents": {
    "wx_poster": "/components/wx_poster/wx_poster"
  }
}

第三步:在 .wxss 文件中使用

<wx_poster id="wx_poster"  showPoster="{{true}}"></wx_poster>

第四步:在 .js 中使用

此处是重点啊。咱们必须在 onReady 中调用初始化

// pages/demo/index.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        // 1、获取到页面中的dom对象
        var wx_poster = this.selectComponent('#wx_poster')
        // 2、调用inits 初始化
        wx_poster.inits(function (){ 
            console.log('初始化完成')
            // 3、添加海报宽度高度、图片、文字等方法在此处添加
            wx_poster.addImg('https://uploadfile.bizhizu.cn/2015/0723/20150723061023750.jpg')

        })
    },
    // ....代码块
})

更多详细

点击我

问答

在问答这里为何还要将微信基础说一遍了。我只能告诉你,你都不知道用户是怎么操作的,肯定有不按你想法操作。

为什么微信开发者预览或者体验版,使用手机看不到图片,而在微信开发者工具内能看见

答:请在小程序内开启调试模式,不懂得自行百度。也请将所有确认的域名添加微信白名单内,毕竟一个月5次机会,请珍惜

为什么加载的那么慢

答:一般优化是,请将大点的图片进行压缩,尤其是跟运营同学那么说下,很容易入坑的。

我的图片到底怎么量取尺寸了

按照微信给的适配单位 rpx 是以750设计图来制作的。

为什么没有二维码功能及一维码。

答:这个问题在于我们这个是合成海报功能,不是生成二维码和一维码工具。完全可以使用第三方的生成二维码或者一维码。

为什么有小程序码这个方法了()

答:我们工具在于帮助那么接触少的小程序开发者少走弯路(希望大家读读源码,大佬请绕路)。原因在于后台传给我们的无法做圆形的大小,那么我这里进行帮你绘制好了。

为什么不直接使用 canvas画布画好的了,还要设置showPoster为true了?

答:最终合成图片的好处:

  1. 如果你是想设置rpx单位的话,那么可以拿着图片,将 view标签设置背景图,这样可以进行缩放比例
  2. 如果你拿着图片,在保存那块,能够快速进行保存下来。
  3. 如果你设置长按进行保存,也是能做到的。
  4. 可以很轻松的做适配(微信小程序都是750的,直接使用rpx单位,也就是说,你的设计图是750 的话,可以很方便的。)。

如果没有设置海报的宽度和高度。默认取第一张图片(就是第一个addImag()方法拿到的图片)宽度和高度

答:这个怕是用于后台上传后的,海报不知道是多大的,有可能小点,你没在现场不知道用户是怎么操作的。后期新增缩放率,大家都知道微信的缩放值不准确,哎。可怜的娃啊。

图片加载错误处理?

答:如果图片加载错误,我们会使用 img_err 这个事件来通知,返回第几个 addImg 加载错误了。

<wx_poster  id="wx_poster" bind:img_err="img_err" showPoster="{{true}}"></wx_poster>
// 在页面js中添加接受的方法。
Page({

    /**
     * 页面的初始数据
     */
    data: {

    },
    // ....代码块省略
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
    },
    // 1、加载错误事件
    img_err(msg) {
        console.log(msg.detail); // 获取第几个 addImg加载错误了。
    }
})

如果第一张图片加载错误,并且我还没设置大小怎么处理的

答:如果第一个 addImg 图片加载失败的话,并且未设置图片宽度高度,进行 img_err 事件以外,以第二个图片加载完成的作为海报的宽度和高度,以此类推。

【demo】如下:

夏天图片

需要合成一张图片

About

欢迎使用wx_poster。用于微信海报生成,亲测

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published