WeChat 開発プロセスの例を要約する-WeChatの開発-php.cn

WeChat 開発プロセスの例を要約する

零下一度

リリース： 2017-05-31 16:05:59

オリジナル

2262 人が閲覧しました

エディター

私は 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 ファイルを同じフォルダーに配置します

WeChat 開発プロセスの例を要約する

テンプレートは直接 < include/> または required 値渡し +
スタイルを使用して、require を使用して
js をインポートします次に、次の mergePage を使用してページオブジェクトの中央を読み込みます。

mergePage

コンポーネントのロード

const ErrorMsg = require(&#39;../../../components/error-msg/error-msg&#39;);
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 と名前だけでなく、変数としても使用できます

テンプレート文字列

アプレット内で 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(&#39;https://weapp.juanpi.com&#39;);

ログイン後にコピー

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

define("pages/index/index.js", function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket ){ &#39;use strict&#39;;
var app = getApp();
var util = require(&#39;../../../utils/util&#39;);
var ErrorMsg = require(&#39;../../../components/error-msg/error-msg&#39;);
var AddressPicker = require(&#39;../../../components/address-picker/address-picker&#39;);
Page(util.mergePage({
  // 页面代码省略
}, AddressPicker, ErrorMsg));
//# sourceMappingURL=data:application/json;...
});require("pages/index/index.js")

ログイン後にコピー

【関連する推奨事項】

1. WeChat パブリックアカウントプラットフォームのソースコードのダウンロード

WeChat アプレット開発 UI レイアウトテクニックの概要

3. WeChat 開発の支払い

WeChat ミニプログラム開発経験の価値ある概要

以上がWeChat 開発プロセスの例を要約するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。