All Projects → jiaopianjun → vue-wechat-desktop

jiaopianjun / vue-wechat-desktop

Licence: other
🔥Vue 全家桶仿mac微信

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
HTML
75241 projects

Projects that are alternatives of or similar to vue-wechat-desktop

lessram
Pure PHP implementation of array data structures that use less memory.
Stars: ✭ 20 (-9.09%)
Mutual labels:  less
muleify
Muleify - Static Site Generator | Website Bundler | Asset Compiler | Templating | Preproccessor
Stars: ✭ 16 (-27.27%)
Mutual labels:  less
campus-leaflets
校园传单是一个使用 Node.js、MongoDB、Koa、EJS、MDL、Less、RequireJS 和 Gulp 开发的 Node 应用程序。
Stars: ✭ 16 (-27.27%)
Mutual labels:  less
weapp wechat miniapp sdk
一个封装了微信小程序服务端接口的SDK
Stars: ✭ 102 (+363.64%)
Mutual labels:  wechat-app
criteria-of-quality-frontend
Критерии качественной вёрстки (разметка, стилизация, картинки, шрифты, автоматизация и пр.)
Stars: ✭ 26 (+18.18%)
Mutual labels:  less
next-plugin-antd-less
🎩 Use Antd (Less) with Next.js v12, Zero Dependency on other Next-Plugins.
Stars: ✭ 338 (+1436.36%)
Mutual labels:  less
bit-css
用原子类赋予元素属性,减少甚至不写css
Stars: ✭ 19 (-13.64%)
Mutual labels:  less
sudoLite
一款轻巧、趣萌、界面精美,具备统计、排行(即将推出),开源、免费、无广告的数独小程序
Stars: ✭ 55 (+150%)
Mutual labels:  wechat-app
wxapp-hepan
清水河畔微信小程序
Stars: ✭ 19 (-13.64%)
Mutual labels:  wechat-app
WPKirk
A WP Bones skeleton Plugin
Stars: ✭ 28 (+27.27%)
Mutual labels:  less
2life-wechat
双生 微信小程序
Stars: ✭ 17 (-22.73%)
Mutual labels:  wechat-app
wechat-scroll-linkage
微信小程序列表左右联动效果
Stars: ✭ 26 (+18.18%)
Mutual labels:  wechat-app
node-less-chokidar
Watch and build CSS from LESS, compatible with Create React App
Stars: ✭ 21 (-4.55%)
Mutual labels:  less
barebones
A minimal CSS boilerplate - UNMAINTAINED
Stars: ✭ 37 (+68.18%)
Mutual labels:  less
less-plugin-functions
Write custom Less functions in Less itself
Stars: ✭ 111 (+404.55%)
Mutual labels:  less
react
react 项目骨架
Stars: ✭ 12 (-45.45%)
Mutual labels:  less
Better-Less
Cross-compatible syntax highlighting for Less
Stars: ✭ 13 (-40.91%)
Mutual labels:  less
leo-ui
UI组件库
Stars: ✭ 16 (-27.27%)
Mutual labels:  less
scrum-planning-poker
Please feel FREE to try it and give feedback by searching Scrum敏捷估算 in WeChat mini program.
Stars: ✭ 30 (+36.36%)
Mutual labels:  wechat-app
boilerplate-nextjs-antd-less
A boilerplate for Reactjs app using nextjs, redux, antd, less
Stars: ✭ 45 (+104.55%)
Mutual labels:  less

mac

🔥🔥一款高仿mac版微信的单页面应用

概述

👍👍 利用Vue2.0模仿微信app,努力做到以假乱真的效果。个人独立开发,本项目可以为初学者带来很好的入门经验,有兴趣的同学可以clone 下来自己完成。。项目目前进度==30%==,后期不断更新,直至整个项目完成。努力和mac微信能够达到 90%的相似度,让它更接近微信App的用户交互体验。

仿 mac 版 微信

图片预览

WX202003112216382x.png

项目步骤

npm install

npm run serve

npm run build

npm run lint

项目地址

🥺🥺项目地址在这里

预览地址

🥺🥺预览地址在这里

项目进度

个人信息
  • 用户头像资料展示
聊天列表
  • 主体页面
  • 聊天列表
  • 聊天对话框
  • 聊天资料
  • 发送图片
  • 群聊天
  • 公众号对话框
  • 切换用户聊天
  • 表情选择
  • 列表右击操作
  • 删除添加操作
通讯录列表
  • 通讯列表
  • 通讯录跳转聊天列表
  • 列表详情
收藏列表
  • 收藏列表
  • 列表详情
文件列表
  • 文件列表
  • 列表详情

部分代码

<div 
  class="messageList"
  :class="classList[list.megType]"
  v-for="(list, index) in messageList" :key="index">
  <span v-if="list.megType === 2">{{list.megTime}}</span>
  <img :src="list.avator" alt="" v-if="list.megType === 1" class="userAvator" />
  <pre class="messageText" v-if="list.megType !== 2 && list.textType === 0">
    {{list.megText}}
    <img v-if="list.megType !== 2 && list.textType === 1" :src="list.megText" alt="">
  </pre>
  <img :src="list.avator" alt="" v-if="list.megType === 0" class="userAvator" />
</div>
sendMes() {
  if(this.onInputValue !== '') {
    const onMesList = {
      avator: 'https://web.lieme.cn/stack/72.jpg',
      megType: 0, // 0 自己 1 对方 2 时间
      megText: this.onInputValue,
      megTime: dateUtil.formatDate(),
      textType: 0, // 0 文字 1 图片
    }
    this.messageList.push(onMesList)
  }
  this.onInputValue = ''
  this.scollDiv()
},

前端公众号和交流群

gg.gif

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].