ワードプレスのウェブサイト開発「WeChatアプレット」実戦（3）

この記事は、一連の「WordPress開発WeChatミニプログラム」の3番目であり、「DeveWork +」ミニプログラムのバージョン1.2の開発プロセスを記録しています。この記事を読む前に、最初の記事と2番目の記事を読むことをお勧めします。

このアプレットをまだ読んでいない場合は、以下のアプレットコードからエクスペリエンスを入力できます。記事を読んだとき、スキャンしたバージョンがバージョン1.2ではない場合があることに注意してください。

devework + WeChatアプレット

「DeveWork +」アプレットv1.2の更新内容は、ユーザーエクスペリエンスを改善し、残りのバグを修正するための最適化ポイントに主に焦点を当てています。前の記事と同様に、この記事の最後の章を除いて、各章は変更点であり、WeChatアプレットの開発者ツールの更新履歴を使用して、サブタイトルとしてA（追加）、F（修正）、U（更新）を採用しています始めます。

A：「概要とフィードバック」ページを追加しました

「DeveWork +」アプレットv1.2の新しいコンテンツは、基本的にはこの「バージョン情報とフィードバック」ページです。現時点では、記事コンテンツフッターと読書記録ページフッターの2つのエントリからアクセスできます。ページのコンテンツは主にアプレットを紹介し、フィードバックエントリと連絡先情報を提供することです。フィードバックの入り口には、小さなプログラム「サポートセッション」コンポーネントを求めていましたが、デフォルトのスタイルは読み本当に難しい、とアセンブリ設定することにより、ボタンの最後に使用されopen-type="contact"た顧客サービスの対話を。カスタマーサービスセッションへの接続を歓迎しますが、一般的に私は母に会いに行きません。電子メールなどの連絡方法を使用することをお勧めします。

「概要とフィードバック」ページのスクリーンショット

A：記事のURL関数をコピーして、外部ブラウザーが読むようにガイドします

一部の読者は、「DeveWork +」アプレットの記事の内容について混乱する可能性があり、関係するすべてのリンクは無意味ではありません。このポットは小さなプログラムで記憶する必要があります。WeChatの小さなプログラムは自然なクローズドシステムです。また、個人アプレットの制約により、コメント内容は表示されません。このバージョンでは、記事のURLをコピーする機能が追加され、ユーザーが元のテキストとそのコメントを外部ブラウザーで読むことができるようになっています。

URLページのスクリーンショットをコピー

それは使用することですwx.getClipboardDataコードはショーの技術的な内容を訴えるために多くはないので、このインタフェースを。

A：一部のページでPullDownRefreshを有効にします

PullDownRefreshつまり、プルアップしてリロードします。このバージョンは一部のページで有効になってPullDownRefreshおり、次の2つのピットがあります。

背景が白のプルダウンである場合は1）、あなたがする必要があるオブジェクトへの、またはロードアニメーションを表示することはできません。app.jsonwindowbackgroundTextStyledark

2）scroll-viewコンポーネントとアプレットでonPullDownRefresh同時に使用することはできません。

F：wxParseのいくつかのバグを修正

このバージョンでは、主にスタイルレベルでwxParseのバグが修正されており、一部のコンテンツはPRのためにwxParse開発者に提出されています。

1）一部のインライン要素には、対応するインラインスタイルがありません。以下のようなdelラベル。

2）preラベルの最適化。このサイトのほとんどの記事にはコードの大きなセクションがあり、小さなプログラムバージョンで表示するにはあまり適していません。その理由は、wxParseがデフォルトでコードの改行を削除するためです。

3）liラベルの円のスタイルと行の高さのスタイルが統合されました。

U：ユーザーエクスペリエンスを改善するためのいくつかの最適化ポイント

このバージョンは主にユーザーエクスペリエンスを向上させるためのものであり、次の点で最適化されています。

1）ドロップダウンローディング記事のローディングスタイルが変更されました。デフォルトの読み込みコンポーネントを破棄し、CSS3で直接記述されたWebサイトと同じ読み込み効果を使用します。

2）データの読み込みに失敗した場合のポップアッププロンプトが追加されました。wx.request()このようなネットワーク要求イベントでは読み込みエラーが発生する可能性があるため、この時点でユーザーにプロンプトを表示する必要があります。Jeffの処理メソッドはポップアップウィンドウを追加し、失敗イベントで呼び出されます。

データの読み込みに失敗した場合のポップアッププロンプト

// https://devework.com/wordpress-weapp-3.html
// 网络加载失败提示
function netWorkErrorAlert(){
    wx.showModal({
        title: '文章加载失败',
        content: '请求失败，可能是网络故障，请稍后再试。',
        showCancel: false,
        success: function (res) {
            if (res.confirm) {
                console.log('netWorkErrorAlert 用户点击确定')
            }
        }
    })
}

// 实际过程本人是用promise 的catch 状态，这里仅演示原生语法
wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  success: function(res) {
    console.log(res.data)
  }
  fail: function(res) {
      // netWorkErrorAlert 函数我是放到了util 里面
    util.netWorkErrorAlert();
  }
})

3）「これ以上の記事がない」シナリオの最適化。「これ以上の記事」シナリオでリクエストを送信できないようになりました。

4）閲覧履歴ページが空の場合の表示。アイコンの状態を追加しました。

F：スクロールビューコンポーネントのbindscrolltolowerイベントが複数回実行される

これはWeChatミニプログラムのピットでもあります。アプレットのホームページのスクロールビューコンポーネントはbindscrolltolower、loadMore()関数にバインドされています。開発ツールでは、各プルダウン負荷は正常ですが、実際のマシンでは、プルダウンのたびにloadMore()関数が2〜3回繰り返されることがわかります。最初は一度に6つの記事が読み込まれましたが、実際には24の記事が読み込まれました。

ジェフの解決策はタイマーを使用することです。loadMore()関数関数では、loadMore()関数が最後に実行された時刻と現在の時刻との時間差が300ms以内であれば、繰り返し実行される小さなプログラムが原因のバグであることがわかります。機能。

// https://devework.com/wordpress-weapp-3.html
// 需要在page 的data 对象中设置默认值
data: {
        lastLoadTime: 0 //上一次load的时间
},
    
// 下拉加载绑定的函数
loadMore: function (e) {
    // 300ms 内多次下拉的话仅算一次
    //获取点击当前时间
    var curTime = e.timeStamp;
    //上一次加载的时间
    var lastTime = this.data.lastLoadTime;
    console.log(lastTime, curTime, curTime - lastTime);
    if (curTime - lastTime < 300) {
        console.log("不正常的加载间隔时间");
        return;
    }
    ... //其他代码略
    this.setData({
            lastLoadTime: curTime
      });
      ... //其他代码略
 }

このようにして、スクロールビューコンポーネントのscrollscrolltolowerイベントは、毎回1回しか実行できません。

もう1つの言及は、ページがプルダウンされて読み込まれるときに、ページが時々揺れることがあることがスクロールビューコンポーネントによって検出されたことです。これに対する一時的な解決策はありません。

U：特集記事ページのレイアウトスタイルが新しくなりました

ホームページの記事リストスタイルと区別するために、特集記事ページで新しいレイアウトスタイルが有効になっています：左の画像、右のタイトル+リリース時間、およびその他の情報コレクション。サンLiangxiaはフレックスを使用してレイアウト得るが、代わりにCSS上の問題が発生した- 一般的な原因の質問を。以下に示すように：text-align:justify;webkit-line-clamp

記事リストページの新しいレイアウトスタイル

互換性を考慮した通常の開発では使用していませんtext-align:justify;（アプレット自体が正当化をサポートしています）この属性が複数行の切り捨てとwebkit-line-clamp共有されている場合、上記の問題が発生します。解決策は変更することtext-align:left;です。

文末结题

上記はバージョン1.2の主なアップデート内容です。バージョン1.2のレビューは迅速で、翌日の夜に合格します。

1.2バージョンのレビュー

ちなみにここにも2つあります。

1）多くの人々は彼らの連絡先情報を通してソースコードを要求しました。統一された説明では、この段階ではオープンソースコードは計画されていません。ジェフはあらゆる種類のリーチアウトパーティー、特に「コードを送る」メールに似たタイトルの空白のテキストを直接送信するパーティーを嫌っています。この種のメールはすぐに削除しました。率直で正直に：小さなプログラムコードについては、能力のある方は、この一連の記事またはその他の資料を参照して独自に作成してください。能力のない方は、有料の協力を検討してください。

2）最近このシリーズの最初の部分を見つけた["REST APIに基づいたWordPress Webサイトを開発する" WeChatアプレット "combat
"]（https：//devework.com/wordpres ...）が批判された。。盗作はこのように結論付けることはできないが、記事のタイトルと全文のアイデアでさえ、大きな段落と大きな段落であり、文がわずかに変更されたと言えるでしょう。こういう「xiをコピーする」という方法は、ブログを書き始めてからは珍しくありませんが、とりあえず2つの単語を送ります。治安判事がその記事を見るのに十分幸運である場合、私の記事が他の人によってコピーされたとは思わないでください〜

このサイトの「WeChat Mini Program」シリーズの記事：https : //devework.com/tag/weapp