vue wechat

vue-wechat

Développer l'application WeChat avec vue.js

L'intention initiale principale est que je puisse pratiquer les nouvelles technologies à travers des projets personnels, découvrir des problèmes en entreprise et accumuler de l'expérience. Et nous pouvons communiquer avec vous pour connaître les lacunes.

Adresse en ligne : vue-wechat.github.io

Adresse du projet : useryangtao/vue-wechat

github.io se charge un peu lentement. Il est recommandé de cloner l'aperçu du débogage local.

Installer

 # install dependencies
cnpm install

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

# build for production with minification
npm run build

pile technologique

vue-wechat utilise principalement Vue.js * pour implémenter l'application WeChat et de nombreux détails.

Cette démo utilise les technologies suivantes dans la mise en œuvre

• vue
• vuex
• vue-cli
• vue-routeur
• vue-touch
• vue-liste-animée
• weui
• zepto
• clic rapide

quelques faits saillants

L'animation de transition pour les nouveaux sauts de page fait référence au style de changement de page du système iOS et est implémentée grâce à la combinaison de fonctionnalités d'affichage du routeur et de transition.

L'opération de balayage vers la gauche de l'élément sur la page de liste de messages est traitée et vuex (getters, actions) est utilisé pour réaliser le traitement et le calcul des données en temps réel.

Commutation d'animation entre les composants de dialogue (voix/texte) et enregistrement d'événement en appuyant pour obtenir un effet d'appui prolongé ;

Il existe également des détails et des animations interactives sur le comportement :

• Comme la numérisation à l'aide d'une animation CSS3 ;
• Supprimez l'élément de la liste de messages et implémentez la suppression animée via vue-animated-list ;
• Le + dans le coin supérieur droit de la page du message n'affiche aucune animation et masque l'animation ;

Glissez-déposez dans Moments pour afficher la couverture complète

La partie listview utilise également la structure de weui.

Toutes les petites icônes utilisent iconfont pour réduire les demandes d'images.

###Aperçu mobile (QR)

Si le code de numérisation WeChat est vide, veuillez cliquer sur le coin supérieur droit -> Le navigateur se chargera très lentement pour la première fois, alors attendez patiemment.

Opérations de base

Page d'accueil

Changement de page, transition d'animation (imitant le style de changement du système iOS : lorsque la page suivante est ouverte, le décalage gauche de la page actuelle est de -30 % ; lorsque la page actuelle est fermée, le décalage gauche de la page précédente passe de -30 % à 0 %)

Fonctionnement et suppression de la liste des messages (non lus/lus)

Appuyez pour parler, relâchez pour mettre fin à l'effet

Découvrir - Instants

Découverte-Scan

icône-iconfont

Afin de réduire le chargement de l'image, l'icône utilise iconfont

Ajouter à l'écran d'accueil

Accord de développement

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

se référer à

Vue-cnodejs

vue-zhihu-quotidiennement

vue-mobile-qq

vue-shopping

À propos de l'auteur

Weibo : Eau Yang Tao

 // TODO

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

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