wechat h5 boilerplate
v0.3.6
「H5 制作を PPT 制作と同じくらい簡単にしましょう!」
Wechat-H5-Boilerplate (以下、WHB) は、WeChat 用に特別に最適化された H5 動的テンプレートで、全画面スクロールの H5 プロモーション ページを迅速に構築するのに適しています。
たとえば、テキストをアニメーション化するのに必要なコードは 1 行だけです。
<p class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>
携帯電話で下記のアドレスにアクセスするか、下記のQRコードをスキャンしてください。
https://panteng.github.io/wechat-h5-boilerplate/
/app
/dist --> 项目文件的分发版本，所有的文件均由Gulp任务生成，请勿手动修改
/audios --> 从app/src/audios复制而来
/fonts --> 从app/src/fonts和在config/vendors.js中指定的第三方字体复制而来
/images --> 由app/src/images下的图片经Imagemin压缩优化生成
/javascripts --> 由app/src/javascripts下的文件经Browserify打包生成
/stylesheets --> 由app/src/scss下的文件编译生成
index.html --> 由app/src/index.html经Gulp-inject插入bundle.(min.).css和bundle.(min.).js后生成
/src --> 项目的源码，所有文件都可编辑
/audios --> 存放音频、视频文件
/fonts --> 存放字体文件
/images --> 存放图片文件
/javascripts --> JS源文件，经Browserify打包后生成app/dist/javascripts/bundle.js
/scss --> SCSS文件，经过编译后生成app/dist/stylesheets/bundle.css
index.html --> 页面HTML，经过Gulp-inject处理后生成app/dist/index.html
/config
vendors.js --> 第三方CSS、JS、Fonts列表，详见vendors.js说明
.gitignore
gulpfile.js --> Gulp任务
package.json
このプロジェクトをローカルにクローン作成します
コンソールで実行します。
git clone --depth=1 https://github.com/panteng/wechat-h5-boilerplate.git <your-project-name>
cd <your-project-name>
または、WHB ソース コード圧縮パッケージをリリース ページから直接ダウンロードすることもできます。
サードパーティのパッケージをインストールする
WHB は NPM を使用してサードパーティのパッケージを管理します
コンソールで実行します。
npm install
注 1: 中国のネットワーク環境が劣悪なため、NPM でのパッケージのダウンロードは非常に遅いため、Taobao NPM ミラー CNPM を使用することをお勧めします。 CNPMのインストール方法は公式サイトの手順をご参照ください。 CNPM v4.2.0 には Windows システムにバグがあります (#97 を参照)。公式は修正済みだと述べていますが、Windows で CNPM を使用して必要なパッケージをインストールすると、依然としてエラーが発生します。ノード-GYPのコンパイル。また、組み込みの NPM バージョンが古すぎるため、CNPM v3.4.1 の使用はお勧めしません。ミラー ウェアハウスを使用して、 npm install --registry=https://registry.npm.taobao.org -dを直接インストールすることをお勧めします。 (-d は、インストール プロセス中に詳細情報を表示するために追加されます。私は個人的に、ネットワークやその他の問題によってインストール プロセスが停止しているかどうかを判断するために、この方法をよく使用します)。
注 2: WHB に必要な一部のサードパーティ パッケージは、node-gyp に依存します。これらのパッケージをインストールする前に、node-gyp がマシンに正しくインストールされていることを確認してください。インストールについては、node-gyp 公式ドキュメントを参照してください。 Windowsユーザーは、Windowsにnode-gypをインストールするのが面倒なので、問題が発生する可能性があります。
注 3: Windows ユーザーは、WHB をパスの深すぎるディレクトリに配置しないでください。 Windows は 255 文字未満の長さのパスのみをサポートするため、このプロジェクトを深いパスを持つディレクトリに配置すると、node-gyp のコンパイルに失敗する可能性が非常に高くなります。
注 4: Windows ユーザーの場合、node-gyp を正しくインストールしているにもかかわらず、 npm install -d実行するとエラーが発生し、そのエラー メッセージが「EPERM、操作は許可されていません」である場合は、 npm install -d --forceを試してください。
開発を開始する
コンソールで実行します。
gulp dev
しばらくすると、ブラウザ ウィンドウが自動的に開き、アドレスlocalhost:3000をポイントします。 app/src の下にあるファイルを変更すると、ブラウザ ページが自動的に更新されます。
gulp prodタスクを実行する
コンソールで実行します。
gulp prod
このタスクでは、app/dist フォルダーに 2 つの新しいファイル Bundle.min.css と Bundle.min.js が生成され、元の Bundle.css と Bundle.js が削除されます。
公開するときは、app/dist フォルダー内のファイルをサーバーにアップロードするだけでよく、他のファイルは必要ありません。 app/dist 内の CSS、JS、画像ファイルは圧縮され、最適化されます。
読み込みアニメーション
通常、H5 ページには多くの画像と BGM が含まれるため、見栄えの良い読み込みアニメーションが必要です。
CSS3 アニメーションを自分で作成し、アニメーション関連の HTML コードを app/src/index.html の<div class="loading-overlay"></div>に挿入し、関連する CSS3 アニメーション コードを app/ に統合することができます。 src/scss。
手間を省きたい場合は、Web サイト「loading.io」を使用すると、既製の読み込みアニメーションを生成できます (開けない場合は、壁を通過してください)。 SVG 形式でアニメーション画像ファイルを生成し、そのファイルをloading.svgに変更し、app/src/images/にあるファイルを同じ名前で置き換えることをお勧めします。
また、いくつかの優れた CSS3 読み込みアニメーション ライブラリも共有します。
ページ切り替え効果
現在、ページ切り替えは、スワイパーに付属する 4 つのタイプ (スライド、フェード、フリップ、カバーフロー) のみをサポートしています (キューブはこのシナリオを満たしていないため、サポートしていません)。詳細については、Swiper ドキュメントのエフェクトに関するセクションを参照してください。
WHB はまだページごとに異なる切り替え方法を指定できません。今後のバージョンでこの機能と、より優れた切り替え方法を追加することを検討します。
ページ内の要素（画像、テキスト）のアニメーション
WHB で写真やテキストにアニメーションを追加するのは非常に簡単です。
たとえば、最初のページにアニメーションで表示する必要があるテキストの段落があるとします。コードは次のとおりです。
<div class="swiper-slide slide-1">
<p class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>
</div>
このテキストに、 animatedクラス名を追加し、 data-ani-name (アニメーション名)、 data-ani-duration (アニメーション実行時間)、 data-ani-delay (アニメーション遅延時間) の 3 つの属性を指定するだけです。
WHB のアニメーションは Animate.css によって提供されており、サポートされているアニメーション名は Animate.css 公式 Web サイトで確認できます。
フォントアイコン
WHB に付属のフォント アイコン ファイルには 2 つのアイコンしかありません。つまり、右上隅の音楽記号と、画面下部の上向きストロークのプロンプト記号です。さらに多くのアイコンが必要な場合は、Icomoon.io を使用してカスタマイズし、必要なアイコンを選択し (自分でデザインしてアップロードすることもできます)、それらをフォント ファイルにパッケージ化することをお勧めします。
Font-Awesome などの一般的なフォント パッケージの使用が推奨されない理由は、Font-Awesome にはアイコンが多数あるため、フォント ファイルが比較的大きくなり、アイコンのほとんどが使用されないためです。フォント ファイルが大きいと、ユーザー デバイスでの Web ページの読み込みが遅くなる可能性があります。
画像の最適化
WHB には、app/src/images の下に画像を非可逆圧縮する機能が付属していますが、画像を app/src/images フォルダーに投入する前に、適切なサイズに調整したり統合したりするなど、画像に対して必要な手動最適化を実行することをお勧めします。いくつかの小さな画像をスプライトに変換するなど。
画像の最適化と処理に役立つ Web サイトをいくつか共有します。
バックグラウンドミュージック
BGM のファイル形式は mp3 で、サイズは 1MB を超えないようにすることをお勧めします。 Adobe Audition などのプロ仕様のオーディオ編集ソフトウェアを使用して、BGM を傍受して圧縮できます。
必要がない場合は、ユーザーの邪魔になるような BGM を設定しないでください。
モバイル端末のデバッグ
まず、 gulp devタスクを実行し、コンソール出力で次の段落を見つけます。
[BS] Access URLs:
----------------------------------------
Local: http://localhost:3000
External: http://192.168.187.101:3000
----------------------------------------
UI: http://localhost:3001
UI External: http://192.168.187.101:3001
----------------------------------------
次に、モバイル デバイス (携帯電話、タブレットなど) とコンピュータが同じ LAN 上にあることを確認します (最も簡単な方法は、コンピュータ、携帯電話、タブレットを同じ WIFI に接続するか、コンピュータがルーターに接続されていることです)ネットワークケーブルを使用し、携帯電話とタブレットはルーターによって発行された同じWIFIに接続されます。
最後に、モバイル デバイスでブラウザを開き、上の 3 行目の「外部」に対応する URL にアクセスします (URL は上で書いたものと異なる場合があることに注意してください。ご自身のコンソールに表示される外部 URL を参照してください)。
これで、app/src の下のファイルを変更する限り、この URL にアクセスするすべてのモバイル デバイスとコンピューターはブラウザ ページを自動的に更新します。 1 つのデバイスで実行した操作 (ページを指で上にスワイプするなど) は、他のデバイスにもリアルタイムで同期されます。
レスポンシブデザイン
要素のサイズ、マージン、フォント サイズを設定するには、px の代わりに rem を使用することをお勧めします。
WHBでは、1remに相当するpx値がデバイスの画面サイズに応じて変化します。
画面幅が 400 ピクセル未満のデバイスでは、1rem = 16 ピクセル。
画面幅が 400px を超え 600px 未満のデバイスでは、1rem = 22px。
画面幅が 600 ピクセルを超えるデバイスでは、1rem = 32 ピクセル。
app/src/scss/base/_base.scss のメディア クエリに関するコードを参照してください。
config/vendors.js の説明
Vends.js ファイルは、サードパーティの CSS、JS、およびフォント情報を登録するために使用されます。vendors.js に登録されているすべてのサードパーティ ファイルは、何らかの形式でプロジェクトに追加されます。たとえば、vendors.js が次のようになったとします。
module.exports = {
stylesheets: [
'node_modules/normalize.css/normalize.css',
'node_modules/swiper/dist/css/swiper.css',
'node_modules/animate.css/animate.css',
'node_modules/font-awesome/css/font-awesome.css'
],
javascripts: [
'node_modules/jquery/dist/jquery.js'，
'node_modules/swiper/dist/js/swiper.jquery.js'
],
fonts: [
'node_modules/font-awesome/fonts/*'
]
};
Vends.js のスタイルシート内のすべての CSS ファイルは、プロジェクトによって最終的に生成される Bundle.css に追加されます。
vendors.js の JavaScript 内のすべての js ファイルは、プロジェクトによって最終的に生成される Bundle.js に追加されます。
venders.js のフォント内のすべてのファイルが app/dist/fonts フォルダーにコピーされます。
Vends.js に登録されたファイルは最初に Bundle.css と Bundle.js に追加されることに注意してください。そのため、作成した SCSS 内のスタイルが上書きされたり、サードパーティ ライブラリのオブジェクトが見つかったりすることを心配する必要はありません。 main.js で定義された状況が見つかりません。 Vends.js に登録されたファイルは、登録順に Bundle.css および Bundle.js に追加されるため、登録順序が正しいことを確認する必要があります。たとえば、jquery.js は swiper.jquery.js の前に登録する必要があります。 swiper.jquery .js は jquery.js に依存しているためです。
注 1: ファイル パスは、vendors.js ではなく、gulpfile.js に対する相対パスです。
注 2: この方法でサードパーティの JS ファイルをインポートしたくない場合、CommonJS の require 書き込みメソッドを使用してインポートすることも可能です。たとえば、次の方法で app/src/javascripts/main.js に jQuery を導入します。
var $ = require('jquery');
タスクを飲み込む
開発プロセス中に、app/src ファイル内の画像、オーディオ、フォント、その他のファイルを変更または置換したにもかかわらず、ブラウザーのページがそれに応じて変更されていない場合は、コンソールでgulp dev再度実行してみてください。 gulp devタスク。
マサチューセッツ工科大学
