ホームページ > 記事 > WeChat アプレット > WeChat 開発プロセスの例を要約する
WeChat 開発プロセスの例を要約する
- 零下一度オリジナル
- 2017-05-31 16:05:592251ブラウズ
エディター
私は 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 ファイルを同じフォルダーに配置します
テンプレートは直接 d3b3ddc11781b045e4b0a9664d2aaf56 または required 値渡し de3db5173ba162146856f74f89e5f81e + d477f9ce7bf77f53fbcf36bec1b69b7a21c97d3a051048b8e55e3c8f199a54b2
スタイルを使用して、require を使用して
-
js をインポートします次に、次の mergePage を使用してページ オブジェクトの中央を読み込みます。
fc430c7db1eecf4621f4fc8a5479f894
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 と名前だけでなく、変数としても使用できます
テンプレート文字列
アプレット内で 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 の後に配置する必要があります。 以下は からのものです。デバッグ ソース ロードされたコードへ:
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")【関連する推奨事項】
1. WeChat パブリック アカウント プラットフォームのソース コードのダウンロード
2.WeChat アプレット開発 UI レイアウト テクニックの概要
3. WeChat 開発の支払いWeChat ミニプログラム開発経験の価値ある概要以上がWeChat 開発プロセスの例を要約するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。