小さなディレクトリ構造
ディレクトリ構造のアプレットが最初に言うことができるについて、私たちは、自分の習慣や命名規則を策定する必要がありますが、プロジェクトは巨大複雑になったら、あなたは見つけるでしょうし、それがあれば、後のメンテナンスが非常に面倒になり、管理共同開発の場合は、なりやすい「クロスホール」の状況。
また、ピットの多くをスキップ年間のアプレット開発よりも、タンクの君主を考えて、（だけのためにあなたと共有するために、かなり良いを維持するためのディレクトリ構造を総括参照悪いコメントを歓迎感じ、それは良い感じとり、）以下は、実際のプロジェクトの構造の例です。
├─ app.js --- 小程序加载时优先加载的入口JS
├─ app.json ---入口文件和公共配置
├─ app.wxss ---公共样式表
├─ project.config.json ---小程序全局配置文件
├─ sitemap.json ---允许微信索引文件
│
├─cloud-functions ---云函数
│ └─setCrypto ---数据加密模块，用户加密一些数据
│ index.js
│ package.json
│ ...
│ ...
│
├─components ---小程序自定义组件
│ ├─plugins --- （重点）可独立运行的大型模块，可以打包成plugins
│ │ ├─comment ---评论模块
│ │ │ │ index.js
│ │ │ │ index.json
│ │ │ │ index.wxml
│ │ │ │ index.wxss
│ │ │ │ services.js ---（重点）用来处理和清洗数据的service.js，配套模板和插件
│ │ │ │
│ │ │ └─submit ---评论模块子模块：提交评论
│ │ │ index.js
│ │ │ index.json
│ │ │ index.wxml
│ │ │ index.wxss
│ │ │
│ │ └─canvasPoster ---canvas海报生成模块
│ │ index.js
│ │ index.json
│ │ index.wxml
│ │ index.wxss
│ │ services.js ---（重点）用来处理和清洗数据的service.js，配套模板和插件
│ │ ...
│ │ ...
│ │
│ └─templates ---（重点）模板，通过外部传参的容器，不做过多的数据处理
│ │
│ ├─slideshow ---滚屏切换模板
│ │ index.js
│ │ index.json
│ │ index.wxml
│ │ index.wxss
│ │ service.js ---（重点）用来处理和清洗数据的service.js，配套模板和插件
│ │
│ └─works ---作品模板
│ │ index.js
│ │ index.json
│ │ index.wxml
│ │ index.wxss
│ │ service.js
│ │
│ ├─articlePlugin ---作品模板中的文章类型
│ │ index.js
│ │ index.json
│ │ index.wxml
│ │ index.wxss
│ │
│ ├─galleryPlugin ---作品模板中的九宫格类型
│ │ index.js
│ │ index.json
│ │ index.wxml
│ │ index.wxss
│ │
│ └─videoPlugin ---作品模板中的视频类型
│ index.js
│ index.json
│ index.wxml
│ index.wxss
│ ...
│ ...
│
├─config ---自定义配置文件
│ config.js ---存放基础配置
│ constants.js ---存储常量
│ weui.wxss ---第三方文件wxss，js等
│ ...
│ ...
│
├─pages ---小程序页面
│ ├─user ---用户页面
│ │ index.js
│ │ index.json
│ │ index.wxml
│ │ index.wxss
│ ├─news ---新闻页面
│ │ index.js
│ │ index.json
│ │ index.wxml
│ │ index.wxss
│ │
│ └─home ---首页
│ index.js
│ index.json
│ index.wxml
│ index.wxss
│ ...
│ ...
│
├─request ---https请求管理（根据switch tab分类会比较好）
│ common.js ---一些公共请求获取，如兑换openId,unionId 等
│ news.js
│ uri.js --- （重点）总的URI请求管理，方便切换和配置DEV,QA,PROD环境
│ user.js
│ ...
│ ...
│
└─utils ---功能组件
logger.js ---日志管理
util.js ---公共小组件库
...
...
复制代码マイクロ手紙が自身の公式文書をwepyなど、今もディレクトリ構造を追加します。
あなたが過去に高齢者との共同開発プロジェクトの転送は、他の誰か、変数の命名不正確な情報または欠陥によって書かれた脆弱モジュールは、ダースの方法は、/、直接コンポーネント間お互いを呼び出すことに気づいた場合、私は知りませんアクセス（ディスク）、それは独立した開発、または共同開発であるかどうか、タンクが王だと思うと思いますが、完全なカタログのマニュアルを残しする必要があり、全体の無知な人々の手を強制的に 戦わないでください 他の人や、将来の自己〜 〜
コンポーネントのレビュー
私はあなたが開発プロセス公式文書に表示されます確信しているが、全体を読み取ることができないコードを書くようになった、彼らは再び大多数の場合に使用されている、と私はので、いくつかの主要な用語の開発で遭遇下にポンプで注入しました。
カスタムコンポーネントテンプレートページへまず、参照
同じページテンプレートとコンポーネントのテンプレートを書きます。コンポーネントデータconjoinノードツリーアセンブリと組立て後に生成されたテンプレートは、基準位置に挿入されます。コンポーネントテンプレートは、基準キャリアアセンブリを提供するために、ノードに子ノードを提供することができます。
<!-- 组件模板 -->
<view class="wrapper">
<view>这里是组件的内部节点</view>
<slot></slot>
</view>
复制代码<!-- page页/父页面引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
<view>这里是插入到组件slot中的内容</view>
<view>在加载组件的页面里自定义内容，将没有复用性的内容写在这里</view>
</component-tag-name>
</view>
复制代码カスタム部分的デフォルトページは、コンポーネントをロードされている上記の。
なぜあなたは、コンポーネントへのページ参照にコンテンツを追加したいですか？
部品一つの重要な特徴であるため、再利用性、時にはあなたは、に応じて、何か別のシナリオを行うことをお勧めしますカスタムあなたがアセンブリ/ロジックでシーンの多くを書いた場合、冗長コンポーネントが増加し、これらの方法はあります多重一度、それはアセンブリで記述することはできません。
第二に、「肌への鍵は、」コンポーネントの外部スタイル別のシーンに導入され、
<!-- 外部引用组件的页面传入样式 -->
<WorkComponent extra-class="style1" j-data="{{workData}}"></WorkComponent>
复制代码//组件中js
Component({
/**
* 引入外部样式，可传多个class
*/
externalClasses: ['extra-class','extra-class2'],
})
复制代码余分なクラスの親CSS外部から導入、異なるスタイル可能なコンフィギュレーション手法などのカスタムコンポーネントが強く、異なるシナリオによります。
第三に、データクリーニングとフォールトトレランス
//service.js 思路示例
module.exports = {
/**
* 功能：处理作者列表
* @param list
* @returns {Array}
*/
authorList: function (list = []) {
let result = [];
list.forEach(item => {
result.push({
guid: item.recommend_obj_id || '',
type: item.recommend_type || '',
logo: (item.theme_pic || '').trim() || '',
title: item.title || ''
});
});
return result;
}
};
复制代码入ってくる外部のデータは、それぞれ対応するservice.jsアセンブリ内に確立することができる複数のコンポーネントをインポートする場合は、2つの効果があります。
- setData（）を避けて、データをクリーニングすると、過剰なダーティなデータであります
- 互換性のある誤ったデータは、デフォルト値にデータを追加し、コードの堅牢性を高めます
四、コンポーネントアセンブリでキャンバスを選択することができない問題
//这里只需要在后面 添加this对象
let ctx = wx.createCanvasContext('myCanvas', this);
复制代码他のデフォルトのコンポーネントは、一般的にこのオブジェクトを基準限り解消することができる渡し、同様の問題に遭遇しました。
第五に、コンポーネント間の通信
本番環境では、我々は多くの場合、さまざまなコンポーネント/伝送パラメータを制御するために相互に通信する必要があり、以下では、特定の使用について説明します。
- WXMLバインディング：のみ対応JSONデータを配置された指定された属性のサブアセンブリにデータを設定するための親要素（最初から基本的なライブラリのバージョン2.0.9を、あなたはデータの関数をさらに含んでいてもよいです）。アセンブリのセクションで導入された特定のテンプレートとスタイル。
- イベント：親コンポーネントにデータを渡すためのサブアセンブリは、任意のデータを渡すことができます。
- 上記2つの方法が必要性を満たすには不十分である場合、任意のデータに直接アクセスして組立方法することができるように、親コンポーネントはまた、this.selectComponentサブアセンブリインスタンスオブジェクト方法によって得ることができます。
設定しモニタイベント：
<!-- wxml 中 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<component-tag-name bindmyevent="setMyEvent" />
<!-- 或者可以写成 -->
<component-tag-name bind:myevent="setMyEvent" />
复制代码// index.js 父页面中
Page({
setMyEvent: function(e){
let self = this;
if (e.detail) { // 自定义组件触发事件时提供的detail对象
switch (e.detail) {
case "hidden": //隐藏 悬浮框上的评论
this.setData({
isFixCommentShow: false
});
break;
case "fixRefresh": //刷新悬浮框
this.setData({
fixRefresh: true
});
break;
case "commentRefresh": //刷新评论
this.setData({
commentRefresh: Math.random()
});
break;
case "createPoster": //生成海报组件
self.setPosterSave();
break;
}
}
}
})
复制代码親ページ参照サブアセンブリは、サブアセンブリの情報が送信され、値を取得し、特定の送信パラメータに結合する方法によってモニターすることができます。
トリガ・イベント
カスタムコンポーネントイベントをトリガする、のTriggereventはメソッド指定されたイベント名は、詳細オブジェクトとイベントのオプションを使用する必要があります。
<!-- 页面 page.wxml -->
<another-component bindcustomevent="pageEventListener1">
<my-component bindcustomevent="pageEventListener2"></my-component>
</another-component>
<!-- 组件 another-component.wxml -->
<view bindcustomevent="anotherEventListener">
<slot />
</view>
<!-- 组件 my-component.wxml -->
<view bindcustomevent="myEventListener">
<slot />
</view>
复制代码//组件中js
Component({
properties: {},
methods: {
onTap: function(){
var myEventDetail = {} // detail对象，提供给事件监听函数
var myEventOption = {} // 触发事件的选项
this.triggerEvent('myevent', myEventDetail, myEventOption)
//myEventOption的一些配置：
this.triggerEvent('customevent', {}, { bubbles: true }) // 会依次触发 pageEventListener2 、 pageEventListener1
this.triggerEvent('customevent', {}, { bubbles: true, composed: true }) // 会依次触发 pageEventListener2 、 anotherEventListener 、 pageEventListener1
}
}
});
复制代码myEventOption構成：
- 泡（ブール値）：イベントがバブリングするかどうか
- 構成（ブール値）：コンポーネントの境界を越えることができたイベントが、偽であるかどうか、イベントが唯一のツリーノードコンポーネント参照にトリガされます、その他の内部コンポーネントを入力しないでください
- capturePhase（ブール値）：イベントは、ステージをキャプチャしたかどうかを
ことを強調しなければならないあなたがカトンの方法をレンダリングデータを引き起こす可能性があまりにも多くを呼び出す場合は、ロードするために初めての一方で、今後の経営は多くのトラブルになり、一方では、コンポーネント上であまりにも多くのリスナーを結合しないことをお勧めします。
コンポーネントの公式文書：developers.weixin.qq.com/miniprogram ...
過去のイベント：
[充填ピット手動]キャンバスアプレットがポスター（A）を生成します
[爆弾時間】複数のアプレットは、キャンバス（II）を生成します
ます。https：//juejin.im/post/5d09e02ce51d454fbf540a09で再現