WeChat ミニプログラム開発の 1 週間の概要

以下は、WeChat アプレット開発の 1 週間の概要です。PHP 中国語 Web サイトの学生に役立つことを願っています。

エディター

私は vscode を直接使用しています (同じことが他のエディターにも当てはまり、プレビューには今でも WeChat 開発ツールを使用しています)。構文の強調表示には、wxml を html に設定し、wxss を css に設定します

"files.associations": {
  "*.wxss": "css",
  "*.wxml": "html"
}

。小さなプログラム関連のプラグインをインストールします

コードを書き始めます

• まず、WeChat アプレット ドキュメント (フレームワーク、コンポーネント、 API) をすべて読む必要があります。後で使用するときに。

• viewコンポーネントはhtmlのpに対応します

• textはspan

• wxssに対応します。セレクターは要素、#id、.className、::after、::beforeのみをサポートします

。 パブリックコンポーネント

プロジェクトディレクトリに新しいコンポーネントを作成し、ページと同様のディレクトリ構造に従い、各コンポーネントのテンプレート、スタイル、jsファイルを同じフォルダーに配置します

• テンプレートは次のことができます直接 または値を渡す必要がある場合は、 +

• を使用して @import を使用して

• js をインポートしますrequire を使用してページに導入し、次の mergePage を使用してページ オブジェクト に読み込みます。

mergePage

• コンポーネントのロード

const ErrorMsg = require('../../../components/error-msg/error-msg');
Page(util.mergePage({
  // 页面 Page 方法...
  onLoad() {
    // 可以直接在页面方法中调用 showErrorMsg 方法
  }
}, ErrorMsg/* 更多组件也可以*/));

mergePageメソッドを使用して、すべてのコンポーネントメソッドとページイベントを登録します

• コンポーネントの書き方

var errorTimer;

module.exports = {
  showErrorMsg(msg, cb) {
    clearTimeout(errorTimer);
    this.setData({
      errorMsg: msg
    });
    errorTimer = setTimeout( () => {
      this.setData({
        errorMsg: false
      });
      cb && cb();
    }, 2000);
  }
  // 可以在这里注册 `onLoad`，`onShow`等页面事件
}

コンポーネント内で this.setData を使用してページ データを更新したり、onLoad、onShow などのページ イベントを登録したりできます。mergePage の最後のパラメーターのイベントが最初に呼び出されます。

• mergePageのソースコード

/**
 * 合并 Page 对象所有的方法及事件
 * 子对象不能使用 data 属性，请在 onLoad 中使用 setData 方法设置
 */
function mergePage(dest, ...src) {
  let args = arguments;
  let eventsStack = {
    onLoad: [],
    onReady: [],
    onShow: [],
    onHide: [],
    onUnload: [],
    onPullDownRefresh: [],
    onReachBottom: [],
  };
  // 保存所有的事件，最后一个参数的事件会最先调用。
  for(let name in eventsStack) {
    for(let i = args.length - 1; i >= 0; i--) {
      args[i][name] && eventsStack[name].push(args[i][name])
    }
  }
  Object.assign(...args);
  for(let name in eventsStack) {
    dest[name] = function() {
      for(let i = 0; i < eventsStack[name].length; i++) {
        eventsStack[name][i].apply(this, arguments);
      }
    }
  }
  return dest;
}

es 6

アロー関数、関数パラメータデフォルト値と分析構造

wx.request({
  complete: ({data= {}}) => {
    // 1. 因为 wx.request 返回的接口数据是在 data 属性里，这里我们只要 data 属性就行了，所以直接参数解析构
    // 2. 如果 failed，无 data 时，data 将为默认值 {}
    if(data.code !== 0) {
      // do something if request failed
      return;
    }
    // 请求正常处理代码
    // 3. 因为用的箭头函数，回调里可以正常使用 this, 访问 Page 对象的方法
    // 比如 this.setData(...)
  }
})

一部の関数パラメータは、デフォルトパラメータを直接。

演算子とオブジェクト属性の省略形を展開します

データパラメータをテンプレートに渡すとき、

<template is="..." data="{{...obj, id: otherIdVariable, name}}"></template>

などのオブジェクト属性の省略形を使用できます。

このようにして、変数は次のようになります。 obj オブジェクト のすべての キー、および ID と名前になるようにテンプレートで使用されます

templatestring

アプレット内で直接かつ便利に es 6 テンプレート文字列を使用できます

let url = `${app.globalData.API_PREFIX}/cart/add`;

es 6 のその他の機能

その他の注意事項

• wx.showToast アイコンは「成功」と「読み込み中」のみをサポートしており、エラー プロンプトはカスタマイズする必要があります

• テンプレート内の変数に値がない場合は、データが渡されているかどうかを確認してください。

• 開発ツール(v0.10.102800)では以下の方法でドメイン名を要求するインターフェースを追加できますが、残念ながらWeChatでは使用できません。

// 放到 app.js 前面
 wxConfig.projectConfig.Network.RequestDomain.push('https://weapp.juanpi.com');

• すべてのページの JS は、ページを開いたときではなく、起動時にすぐに実行されるため、グローバルに記述された一部のコードは、可能な限り onLoad の後に配置する必要があります。 Debugソース ロードされたコードへ:

define("pages/index/index.js", function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket ){ 'use strict';

var app = getApp();

var util = require('../../../utils/util');
var ErrorMsg = require('../../../components/error-msg/error-msg');
var AddressPicker = require('../../../components/address-picker/address-picker');

Page(util.mergePage({
  // 页面代码省略
}, AddressPicker, ErrorMsg));
//# sourceMappingURL=data:application/json;...
});require("pages/index/index.js")

以上がWeChat ミニプログラム開発の 1 週間の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。