wx_poster

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #typescript #golang #machine-learning #rust #macos #java #awesome #kubernetes #awesome-list #pytorch #mcp

(★ 10)

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

wx_poster Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## wx_poster 介绍

### 介绍

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

### 优势

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

# 第大一步：

## 基础使用步骤：

### 第一步：下载或者克隆

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

### 第二步：引入组件

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

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

### 第三步：在 .wxss 文件中使用

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

### 第四步：在 .js 中使用

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

```js
// 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')

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

### 更多详细

> [点击我](https://www.kancloud.cn/my_love1/wx_poster/1688453)

## 问答

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

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

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

**为什么加载的那么慢**

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

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

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

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

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

**为什么有小程序码这个方法了（）**

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

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

> 答：最终合成图片的好处：

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

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

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

**图片加载错误处理？**

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

```html
<wx_poster  id="wx_poster" bind:img_err="img_err" showPoster="{{true}}"></wx_poster>
```

```js
// 在页面js中添加接受的方法。
Page({

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

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

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

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

## 【demo】如下：

## 夏天图片

> 需要合成一张图片

wx_poster

wx_poster Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

wx_poster

wx_poster Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README