vue wxChat
1.0.0
องค์ประกอบมุมมองส่วนหน้าของ WeChat
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run buildสำหรับคำอธิบายโดยละเอียดเกี่ยวกับวิธีการทำงานต่างๆ โปรดดูเอกสารสำหรับ vue-loader
ซอร์สโค้ด: https://github.com/doterlin/vue-wxChat ที่อยู่สาธิต: https://doterlin.github.io/vue-wxChat/
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build语音类ในอนาคต)滚动加载数据ซึ่งการโหลดแบบเลื่อนนั้นอาศัยองค์ประกอบอื่นของฉัน scrollLoader.vue ("องค์ประกอบการโหลดการเลื่อนขึ้นและลงของ Vue.js")v-emotion ทั่วโลก ฉันใช้มันใน main.js ; function toEmotion(text, isNoGif){
var list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '愉快', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极', '嘿哈', '捂脸', '奸笑', '机智', '皱眉', '耶', '红包', '鸡'];
if (!text) {
return text;
}
text = text.replace(/[[u4E00-u9FA5]{1,3}]/gi, function(word){
var newWord = word.replace(/[|]/gi,'');
var index = list.indexOf(newWord);
var backgroundPositionX = -index * 24
var imgHTML = '';
if(index<0){
return word;
}
if (isNoGif) {
if(index>104){
return word;
}
imgHTML = `<i class="static-emotion" style="background:url(https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/default218877.gif) ${backgroundPositionX}px 0;"></i>`
} else {
var path = index>104 ? '/img' : 'https://res.wx.qq.com/mpres/htmledition/images/icon';
imgHTML = ``
}
return imgHTML;
});
return text;
}
Vue.directive('emotion', {
bind: function (el, binding) {
el.innerHTML = toEmotion(binding.value)
}
});
##วิธีใช้ พารามิเตอร์ได้รับการอธิบายไว้ในส่วนประกอบและแสดงให้เห็นใน App.vue : พารามิเตอร์และคำอธิบาย: ส่วนประกอบภาพแชท WeChat ขึ้นอยู่กับส่วนประกอบ scrollLoader และคำสั่ง v-emotion (โปรดดู main.js สำหรับการใช้งาน)
พารามิเตอร์ : ความกว้างของส่วนประกอบ width เริ่มต้น 450 wrapBg สีพื้นหลังองค์ประกอบหลักด้านนอก ค่าเริ่มต้น #efefef maxHeight หน้าต่างแสดงความสูงสูงสุด ค่าเริ่มต้น 900 contactAvatarUrl เพื่อน avatar url ownerAvatarUrl เจ้าของ WeChat avatar url ownerNickname เจ้าของ WeChat ชื่อเล่น getUpperData (จำเป็น) โหลดแล้วเมื่อเลื่อนไปที่ด้านบน ข้อมูล วิธีการค่าที่ส่งคืนจะต้องเป็นวัตถุ Promise และโครงสร้างของการแก้ไขจะเหมือนกับข้อมูล getUnderData (จำเป็น) วิธีการโหลดข้อมูลเมื่อเลื่อนไปที่ด้านล่าง ค่าที่ส่งคืนจะเหมือนกับด้านบน data (จำเป็น) ผ่านในข้อมูลการเริ่มต้นเป็นดังนี้:
[{
direction: 2, //为2表示微信主人发出的消息，1表示联系人
id: 1, //根据这个来排序消息
type: 1, //1为文本，2为图片
content: '你好!![呲牙]', //当type为1时这里是文本消息，当type2为2时这里要存放图片地址；后续会支持语音的显示
ctime: new Date().toLocaleString() //显示当前消息的发送时间
},
{
direction: 1,
id: 2,
type: 1,
content: '你也好。[害羞]',
ctime: new Date().toLocaleString()
}]
เอฟเฟกต์: https://doterlin.github.io/vue-wxChat/ รหัส:
//主文件，对wxChat的用法做示例
<template>
<wxChat
:data="wxChatData"
:showShade="false"
contactNickname="简叔"
:getUpperData="getUpperData"
:getUnderData="getUnderData"
:ownerAvatarUrl="ownerAvatarUrl"
:contactAvatarUrl="contactAvatarUrl"
:width="420">
</wxChat>
</template>
<script>
import wxChat from './components/wxChat.vue'
export default {
name: 'app',
data () {
return {
upperTimes: 0,
underTimes: 0,
upperId: 0,
underId: 6,
ownerAvatarUrl: './src/assets/avatar1.png',
contactAvatarUrl: './src/assets/avatar2.png',
wxChatData: [{
direction: 2,
id: 1,
type: 1,
content: '你好!![呲牙]',
ctime: new Date().toLocaleString()
},
{
direction: 1,
id: 2,
type: 1,
content: '你也好。[害羞]',
ctime: new Date().toLocaleString()
},
{
direction: 2,
id: 3,
type: 1,
content: '这是我的简历头像：',
ctime: new Date().toLocaleString()
},
{
direction: 2,
id: 4,
type: 2,
content: './src/assets/wyz.jpg',
ctime: new Date().toLocaleString()
},
{
direction: 1,
id: 5,
type: 1,
content: '你开心就好。[微笑]',
ctime: new Date().toLocaleString()
}]
}
},
components:{wxChat},
methods:{
//向上滚动加载数据
getUpperData(){
var me = this;
// 这里为模拟异步加载数据
// 实际上你可能要这么写:
// return axios.get('xxx').then(function(result){
// return result; //result的格式需要类似下面resolve里面的数组
// })
return new Promise(function(resolve){
setTimeout(function(){
//模拟加载完毕
if(me.upperTimes>3){
return resolve([]);
}
//加载数据
resolve([{
direction: 2,
id: me.upperId-1,
type: 1,
content: '向上滚动加载第 ' + me.upperTimes +' 条！',
ctime: new Date().toLocaleString()
},
{
direction: 1,
id: me.upperId-2,
type: 1,
content: '向上滚动加载第 ' + me.upperTimes +' 条！',
ctime: new Date().toLocaleString()
}]
)
}, 1000);
me.upperId= me.upperId+2;
me.upperTimes++;
})
},
getUnderData(){
var me = this;
//意义同getUpperData()
return new Promise(function(resolve){
setTimeout(function(){
//模拟加载完毕
if(me.underTimes>3){
return resolve([]);
}
//加载数据
resolve(
[{
direction: 1,
id: me.underId+1,
type: 1,
content: '向下滚动加载第 ' + me.underTimes +' 条！',
ctime: new Date().toLocaleString()
},
{
direction: 2,
id: me.underId+2,
type: 1,
content: '向下滚动加载第 ' + me.underTimes +' 条！',
ctime: new Date().toLocaleString()
}]
)
}, 1000);
me.underId = me.underId+2;
me.underTimes++;
})
}
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
}
</style>
ยินดีต้อนรับสู่การเริ่มต้น: https://github.com/doterlin/vue-wxChat
