# wxCollection

**Repository Path**: lijinbode/wxCollection

## Basic Information

- **Project Name**: wxCollection
- **Description**: 微信小程序的常用组件收藏
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2020-05-23
- **Last Updated**: 2022-10-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 微信小程序

## README

## 海报生成

1. html里面放入组件

  ```html
  <!--index.wxml-->
  <poster id="poster" hide-loading="{{true}}" preload="{{false}}" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
      <button>生成海报</button>
  </poster>
  <button bindtap="onCreateOtherPoster">异步生成海报二</button>
  ```

2. js引入海报类

  ```js
  // 引入
  import Poster from '/utils/wxa-plugin-canvas/poster/poster';
  // 海报结构配置
  const posterConfig = {
    jdConfig: {
      width: 750,
      height: 1334,
      backgroundColor: '#fff',
      debug: false,
      pixelRatio: 1,
        // 块
      blocks: [{
          width: 690,
          height: 808,
          x: 30,
          y: 183,
          borderWidth: 2,
          borderColor: '#f0c2a0',
          borderRadius: 20,
        }
      ],
       	// 文本
      texts: [{
          x: 92,
          y: 810,
          fontSize: 38,
          baseLine: 'middle',
          text: '标题标题标题标题标题标题标题标题标题',
          width: 570,
          lineNum: 1,
          color: '#8d8d8d',
          zIndex: 200,
        }
      ],
      	// 图片
      images: [{
          width: 62,
          height: 62,
          x: 30,
          y: 30,
          borderRadius: 62,
          url: 'https://lc-I0j7ktVK.cn-n1.lcfile.com/02bb99132352b5b5dcea.jpg',
        }
      ]
    }
      
  // 生成
  onPosterSuccess(e) {
      const {
        detail
      } = e;
      // 图片预览
      wx.previewImage({
        current: detail,
        urls: [detail]
      })
    },
    onPosterFail(err) {
      console.error(err);
    },
  
    // 异步生成海报
    onCreateOtherPoster() {
      this.setData({
        posterConfig: posterConfig.jdConfig
      }, () => {
        Poster.create(true); // 入参：true为抹掉重新生成 
      });
    }
  ```

> // 需求和问题
>
> * 生成单独的canvas然后在点击查看，图片大小不能控制
> * 海报里面的多行文本换行问题，目前引用的外部js使用原生写法处理

## 富文本解析

> 微信自带的`rich-text`组件很难用，而且不能解析视频，表情等复杂元素，所以使用该组件代替

1. HTML引入模板

   ```html
   <import src="../../../utils/wxParse/wxParse.wxml"/> 
   <view class="wxParse">
       <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
   </view>
   ```

2. js引入配置

   ```js
   // 引入类
   var WxParse = require('../../../utils/wxParse/wxParse.js');
   // 初始化emoji设置 -- （可选）
       WxParse.emojisInit('[]', "../../../utils/wxParse/emojis/", {
         "00": "00.gif",
         "01": "01.gif",
         "02": "02.gif"
       });
   var article = '<p>html页面</p>'
   // 传入： 模板key，类型，类容，this，padding
   WxParse.wxParse('article', 'html', article, that, 5);
   ```

## 瀑布流加载

- 当前：修改图片数组直接展示即可

## commonJs常用js封装

- `canvasDrawTxt.js`canvas 绘制多行文本换行

## uni-ui转weixin组件
在`jin-uni-wexin`文件夹里面，将好用的uni-ui组件转换为微信可用的组件