vue wechat

vue-wechat

vue.js を使用して WeChat アプリを開発する

本来の主な目的は、個人プロジェクトを通じて新しい技術を実践し、ビジネス上の課題を発見し、経験を蓄積することです。そして、私たちはあなたとコミュニケーションをとり、欠点を見つけることができます。

オンラインアドレス: vue-wechat.github.io

プロジェクトアドレス: useryangtao/vue-wechat

github.io の読み込みが少し遅いので、ローカル デバッグ プレビューを複製することをお勧めします。

インストール

 # install dependencies
cnpm install

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

# build for production with minification
npm run build

テクノロジースタック

vue-wechat は主に Vue.js * を使用して WeChat アプリと多くの詳細を実装します。

このデモでは実装に次のテクノロジを使用します。

• ビュー
• ビュークス
• vue-cli
• vueルーター
• vueタッチ
• vue-アニメーション化されたリスト
• ウィウイ
• ゼプト
• 速いクリック

いくつかのハイライト

新しいページ ジャンプの遷移アニメーションは、iOS システムのページ切り替えスタイルを参照し、ルーター ビューと遷移機能の組み合わせによって実装されます。

メッセージ一覧ページ上の項目の左スワイプ操作を処理し、vuex(ゲッター、アクション)を利用して計算データのリアルタイム処理を実現します。

(音声/テキスト) ダイアログ コンポーネント間のアニメーション切り替え、およびプレス アンド トーク効果を実現するイベント登録タップ。

インタラクティブな動作の詳細とアニメーションもいくつかあります。

• css3アニメーションを使用したスキャンなど。
• メッセージ リスト項目を削除し、vue-animated-list を通じてアニメーションによる削除を実装します。
• メッセージ ページの右上隅にある + はアニメーションを表示せず、アニメーションを非表示にします。

Moments をドラッグ アンド ドロップして完全なカバーを表示します

listview部分もweuiの構造を利用しています。

すべての小さなアイコンは、画像リクエストを減らすために iconfont を使用します。

###モバイル プレビュー (QR)

WeChat スキャン コードが空白の場合は、右上隅をクリックしてください -> ブラウザの初回読み込みは非常に遅いので、しばらくお待ちください。

基本操作

ホームページ

ページ切り替え、アニメーション遷移 (iOS システム切り替えスタイルを模倣: 次のページが開かれるとき、現在のページの左オフセットは -30%、現在のページが閉じるとき、前のページの左オフセットは -30 から遷移します) % ～ 0%)

メッセージリスト（未読・既読）の操作と削除

押すと話します。放すと効果が終了します

発見 - 瞬間

ディスカバースキャン

アイコン-アイコンフォント

画像の読み込みを減らすために、アイコンは iconfont を使用します

ホーム画面に追加

開発契約

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

参照

Vue-cnodejs

vue-zhihu-daily

vue-モバイル-qq

vueショッピング

著者について

Weibo:水陽涛

 // TODO

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

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