vue wechat

vue-wechat

Develop WeChat app with vue.js

The main original intention is that I can practice new technologies through personal projects, discover problems in business, and accumulate experience. And we can communicate with you to find out the shortcomings.

Online address: vue-wechat.github.io

Project address: useryangtao/vue-wechat

github.io loads a little slowly. It is recommended to clone the local debugging preview.

Install

 # install dependencies
cnpm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

technology stack

vue-wechat mainly uses Vue.js * to implement the WeChat app and many details.

This demo uses the following technologies in implementation

• vue
• vuex
• vue-cli
• vue-router
• vue-touch
• vue-animated-list
• weui
• zepto
• fastclick

some highlights

The transition animation for new page jumps refers to the page switching style of the iOS system and is implemented through the combination of router-view and transition features.

The left swipe operation of the item on the message list page is processed, and vuex (getters, actions) is used to realize real-time processing and calculation of data.

Animation switching between (voice/text) dialog components, and event registration tap to achieve press and hold effect;

There are also some interactive behavior details and animations:

• Such as scanning using css3 animation;
• Delete the message list item and implement animated removal through vue-animated-list;
• The + in the upper right corner of the message page shows no animation and hides animation;

Drag and drop in Moments to display the complete cover

The listview part also uses the structure of weui.

All small icons use iconfont to reduce image requests.

###Mobile preview (QR)

If the WeChat scan code is blank, please click on the upper right corner -> The browser will load very slowly for the first time, so please wait patiently.

Basic operations

Home page

Page switching, animation transition (imitating the iOS system switching style: when the next page is opened, the left offset of the current page is -30%; when the current page is closed, the left offset of the previous page transitions from -30% to 0%)

Message list (unread/read) operation and deletion

Press to speak, release to end the effect

Discover - Moments

Discover-Scan

icon-iconfont

In order to reduce image loading, the icon uses iconfont

Add to home screen

Development Agreement

所有组件.vue名 都统一 《短横线》 命名
css内下划线( _ )开始的为通用类
js中内下划线( _ )开头的为私有属性
所有events均使用短横线 命名
所有组件(.vue)里template标签包含的元素必须是component-xx 开头
所有state统一下划线 命名
所有 action统一下划线命名

refer to

Vue-cnodejs

vue-zhihu-daily

vue-mobile-qq

vue-shopping

About the author

Weibo:Water Yang Tao

 // TODO

####《用vue2开发微信app界面》

开发完善的功能，如实现注册账号，加好友，实现聊天功能，等。