微信公众号新人欢迎语消息推送

问题记录

1.使用的vue2 对象新增属性不具备响应性

 this.$set(item, 'miniTitle', item.title)
this.$set(item, 'miniPagepath', item.pagepath)

2.使用wangeidtor4.6.0富文本组件，富文本组件更改后，值不会马上双绑到自己的值上面

使用onchange进行绑定

<template><div class="hy-editor"><!-- 富文本编辑框 --><div :id="id"></div></div>
</template>
<script>
import E from 'wangeditor'
export default {name: 'MessageEditor',data() {return {wEditor: '',}},props: {content: {type: String},id: {type: String,required: true,},isDisabled: {type: Boolean,required: false,},},methods: {//获取编辑器中内容getContent() {return this.wEditor.txt.html()},setContent(content) {this.wEditor.txt.html(content)},clearContent() {this.wEditor.txt.clear()},},mounted() {this.wEditor = new E('#' + this.id);this.wEditor.config.showFullScreen = false;this.wEditor.config.emotions = [{// tab 的标题title: '表情',type: 'emoji',// content -> 数组content: '❤️ ☀️ ✊'.split(/\s/),},]this.wEditor.config.menus = ['emoticon', // 表情]this.wEditor.config.fontNames = ['宋体', '微软雅黑', '黑体', '楷体', '仿宋', '华文行楷', '华文楷体', '方正兰亭黑体'];this.wEditor.config.maxLength = 500;// 创建一个富文本编辑器this.wEditor.create()// 富文本内容this.wEditor.txt.html(this.content)this.wEditor.config.onchange = (html) => {this.$emit('changeEditor', html);}// 设置富文本内容不可编辑let That = this;if (this.isDisabled) {this.$nextTick(() => {That.wEditor.disable();});}}
}
</script>

 <MessageEditor v-if="msg.msgTypeStr === '文本消息'":class="['message-editor', action === 'view' ? 'disabled' : '']":ref="'messageEditor' + msg.id" :id="id + msg.id" :isDisabled="action === 'view'":content="msg.content" @changeEditor="changeEditor(arguments, msg.id)" />...changeEditor(html, id) {if (html.length > 0) this.tabsData.forEach(item => {let messageEditor = this.$refs['messageEditor' + item.id] && this.$refs['messageEditor' + item.id][0];if (messageEditor && id === item.id) {item.content = html[0];}});},

3.图片上传后，接口返回了url但是图片没有回显

如果是循环的多个el-upload，所有子元素一定要绑定id并记录，上传后才能进行对应回显

                        <el-upload v-loading="isLoading" ref="mediaidUploader" :disabled="action === 'view'"v-if="msg.msgTypeStr === '图片消息'":class="['image-msg-uploader', action === 'view' ? 'disabled' : '']" :auto-upload="false"action="#" :show-file-list="false" :limit="1" :http-request="submitUpload"accept=".jpg,.jpeg,.png" :on-change="handleChange" :on-exceed="handleExceed":before-upload="beforeImageMsgUpload"><img v-if="msg.mediaUrl" :src="msg.mediaUrl" class="image-url" @click="setUploadId(msg.id)"><i v-if="!msg.mediaUrl" class="el-icon-plus image-msg-uploader-icon"@click="setUploadId(msg.id)"></i><div v-if="!msg.mediaUrl" @click="setUploadId(msg.id)">点击上传图片</div><div v-if="!msg.mediaUrl" class="el-upload__tip" slot="tip" @click="setUploadId(msg.id)">大小不超过10M，支持JPG、PNG格式</div></el-upload>

因为是循环的多个组件上传，所以找到对应id进行设置url，但是需要记录id，且给el-upload下面所有元素绑定点击事件进行记录（否则可能点击的元素没有记录id上传方法里面就不会重新给imageUrl赋值）

        /*** 记录当前上传图片的id*/setUploadId(id) {this.currentId = id;},/*** 上传素材*/async submitUpload({ file }) {let formData = new FormData();formData.append("file", file);formData.append("type", "image");formData.append("appid", this.appId);this.isLoading = true;const { code, msg, result } = await uploadMedia(formData);if (code === 0) {this.tabsData.map((item => {if (item.id === this.currentId) {item.mediaId = result.mediaId;item.mediaUrl = result.mediaUrl;}}));this.isLoading = false;this.$message.success('上传成功');} else {this.isLoading = false;this.$message.error(msg)}},

4.elementUI的日期时间组件(开始时间/结束时间)，当天之前不可点击，精确到时分秒

使用el-date-picker的数组形式没有实现，只能分开写

                                    <el-form-item label='时间范围' style="display: inline-block"><el-form-item prop="taskStartTime" style="display: inline-block"><el-date-picker :disabled="isPermanentDisabled"v-model="messageHandleForm.taskStartTime" type="datetime"placeholder="开始时间" default-time="00:00:00" @blur="endTimeBlur":picker-options="pickerOptions" value-format="timestamp"></el-date-picker></el-form-item><el-form-item style="display: inline-block">~</el-form-item><el-form-item prop="taskEndTime" style="display: inline-block"><el-date-picker :disabled="isPermanentDisabled" @blur="endTimeBlur"v-model="messageHandleForm.taskEndTime" type="datetime"placeholder="结束时间" default-time="23:59:59":picker-options="pickerOptions" value-format="timestamp"></el-date-picker></el-form-item></el-form-item>

        var validateTaskStartTime = (rule, value, callback) => {if(this.messageHandleForm.permanent === 1){if(value === ''){return callback(new Error('请选择开始时间'));}else{callback();}}else{callback();}};var validateTaskEndTime = (rule, value, callback) => {if(this.messageHandleForm.permanent === 1){if(value === ''){return callback(new Error('请选择结束时间'));}else{callback();}}else{callback();}};

 validateTaskStartTime, //时间范围校验方法validateTaskEndTime, //时间范围校验方法rules: {taskStartTime: [{ required: true, type: 'date', validator: validateTaskStartTime, trigger: 'change' }],taskEndTime: [{ required: true, type: 'date', validator: validateTaskEndTime, trigger: 'change' }],
}

        endTimeBlur() {console.log(this.messageHandleForm.taskEndTime,this.messageHandleForm.taskStartTime,"endTimeBlur");if (this.messageHandleForm.taskEndTime !== '' && this.messageHandleForm.taskStartTime !== '' && this.messageHandleForm.taskEndTime <= this.messageHandleForm.taskStartTime) {this.$message.warning("结束时间必须大于开始时间");}},

5.多个el-tab卡片维护一个对象的数据，且其中两个卡片数据字段使用的相同

数组传入到子组件前就对数据进行拆分；保存数据时对数据进行合并

                    if(this.messageHandleForm.replyInfoList.length>0){this.messageHandleForm.replyInfoList.forEach(item=>{if(item.msgType === 6){this.$set(item, 'miniTitle', item.title)this.$set(item, 'miniPagepath', item.pagepath)item.title = '';item.pagepath = '';}else if(item.msgType === 1){this.$set(item, 'miniTitle', '')this.$set(item, 'miniPagepath', '')}});}

                    item.title = item.miniTitle;item.pagepath = item.miniPagepath;

6.微信公众号平台规定

文本消息不能有图片，只能有文字，链接、表情包等。

文本消息的链接只能有一个；

这个表情包不能是gif这种，而且必须是微信那一套表情包；

Vue组件富文本组件的表情包和微信表情包的不通用，需要自己手动配置成微信的，且不同版本配置不一样；

图片消息和小程序卡片消息对图片的格式和大小都有不同限制

    this.wEditor.config.emotions = [{// tab 的标题title: '表情',type: 'emoji',// content -> 数组content: '❤️ ☀️ ✊'.split(/\s/),},]

7.一种复杂表单的校验写法

 :prop="'seedDropRules.' + index + '.taskGroupId'" :rules="rules['taskGroupId']"

8.微信小程序链接，后端推送使用的格式

后端必须通过？来截取H5页面还是小程序的中转地址，所以需要使用一些在线URLDecode转换工具将link后面的进行转义：

比如：pages/newHomeMain/transfer/index?link=https://www-test.heyejk.com/heye-h5/transfer?type=7&template=template3&pageId=340

就需要转成：

pages/newHomeMain/transfer/index?link=https%3A%2F%2Fwww.heyejk.com%2Fheye-h5%2Ftransfer%3Ftype%3D7%26template%3Dtemplate3%26pageId%3D59&toH5=1

9.vue项目实现滚动到顶部

如果没有层级因素，可以直接获取元素，然后滚动到元素的顶部

提示错误时，是否要跳到错误区域(跳到顶部)：这里主要是body设置了100%，导致app和app-main里面的高度100%是跟随body的，所以设置body里面的scrollTop不生效this.$nextTick(() => {document.documentElement.scrollTop = 0;document.body.scrollTop = 0;})

10.el-tabs传递多个参数

el-tabs传递多个参数：
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="(tab, event) => { handleClick(tab, event, 'bb') }"><el-tab-pane v-for="(item,index) in array" :label="item.label" :name="item.name" >{{item.label}}</el-tab-pane>
</el-tabs>

11.富文本框报错

bug:添加时富文本没有出来，报错初始化节点已存在编辑器实例，无法重复创建编辑器 ok 解决方案：给一个动态的ref值
富文本报错2：错误：初始化编辑器时候未传入任何参数，请查阅文档。miniappDialogForm数据的v-model有问题

解决：使用的一个富文本框实例，数据混乱，将富文本框抽成组件即可

12.校验图片尺寸

        // 图片格式校验(支持JPG格式)beforeImageMsgUpload(file) {// 解决图片上传不显示问题this.thumbMediaUrl = URL.createObjectURL(file);const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';if (!isJPG) {this.$message.error('上传失败，请上传jpg格式图片');}// 校验尺寸 fileconst isSize = new Promise(function (resolve, reject) {let _URL = window.URL || window.webkitURL;let image = new Image();image.onload = function () {let valid = image.width <= 520 && image.height <= 416;valid ? resolve() : reject();};image.onerror = function () {this.$message.error("无法加载图片");};image.src = _URL.createObjectURL(file);}).then(() => {Promise.resolve();return file;},() => {this.$message.error("上传图片尺寸不符合,尺寸必须为520*416以内");return Promise.reject();});return isJPG && isSize;},

13.校验图片大小

        beforeImageMsgUpload(file) {// 解决图片上传后不显示问题this.tabsData.map((item => {if (item.id === this.currentId) {item.mediaUrl = URL.createObjectURL(file);}}));const isJPGOrPNGorJPEG = file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png';const isLt10M = file.size / 1024 / 1024 < 10;if (!isJPGOrPNGorJPEG) {this.$message.error('上传失败，请上传jpg、png格式图片');}if (!isLt10M) {this.$message.error('上传失败，缩略图大小不能超过 10MB!');}return isJPGOrPNGorJPEG && isLt10M;},