## 基础使用步骤：
### 第一步：下载或者克隆
> （下载方式，不懂自行百度），下载好后，在项目中找到 components 目录中 wx\_poster 文件夹，进行拷贝放入到自己项目中。比如我放入在 components 文件夹下面。
### 第二步：引入组件
> 找到自己想要引入的页面 .json文件。然后将 usingComponents 里面进行添加上 wx\_poster 。比如如下（注意组件路径）：
~~~
{
"usingComponents": {
"wx_poster": "/components/wx_poster/wx_poster"
}
}
~~~
### 第三步：在 .wxss 文件中使用
~~~html
<wx_poster id="wx_poster" showPoster="{{true}}"></wx_poster>
<!-- 下面是渲染使用的 image -->
<image style="width: {{width}}rpx;height: {{height}}rpx" src="{{imgSrc}}"></image>
~~~
### 第四步：在 .js 中使用
> 此处是重点啊。咱们必须在 onReady 中调用初始化
~~~js
// pages/demo/index.js
Page({
/**
* 页面的初始数据
*/
data: {
imgUrl: '',
height: '',
width: '',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
var that = this;
// 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');
wx_poster.setFont('我是文本内容')
wx_poster.draw(function () { // 绘制成功
// 导出图片
wx_poster.generatePic(function (obj) {
if(obj.status) { // 导出成功
consle.log('导出成功')
that.setData({
// 设置视图宽度和高度。
width: obj.w,
height: obj.h
,
imgSrc: obj.tempFilePath
})
}else {
// 导出失败
consle.log('导出失败')
}
})
})
})
},
// ....代码块
})
~~~
