マイクロ手紙アプレットの記事] V.マイクロチャネル構成ファイルおよびアプレット(小規模およびページ)ライフサイクル

マイクロチャネル構成ファイルおよびアプレット(小規模およびページ)ライフサイクル

1. app.json設定

1.1ページの構成

{
  "pages": [
    "pages/index/index",	// 页面配置 第一行为首页
    "pages/logs/logs"
  ],
  ....
}

1.2ウィンドウ構成

{
  ...
  "window": {
    "backgroundTextStyle": "light",  //	下拉 loading 的样式,仅支持 dark / light
    "navigationBarBackgroundColor": "#fff",	// 背景颜色
    "navigationBarTitleText": "WeChat",	// 导航栏标题文字内容
    "navigationBarTextStyle": "black"	// 导航栏标题颜色,仅支持 black / white
  },
  ...
}

#### 1.2.1その他の設定

	{
		"backgroundColor": "#fff", // 窗口的背景色
		"backgroundColorTop":"#fff", // 顶部窗口的背景色,仅 iOS 支持  微信客户端 6.5.16
		"backgroundColorBottom":"#fff", // 底部窗口的背景色,仅 iOS 支持  微信客户端 6.5.16
		"enablePullDownRefresh" : false,// 是否开启当前页面下拉刷新
		"onReachBottomDistance": 50, // 页面上拉触底事件触发时距页面底部距离,单位为px
		"pageOrientation" : "portrait", // 屏幕旋转设置,支持 auto / portrait / landscape 
		"disableScroll" : false, // 设置为 true 则页面整体不能上下滚动。只在页面配置中有效,无法在 app.json 中设置
		"usingComponents": Object // 自定义组件.... 
	}

1.3 TabBarの設定(ウィンドウのタブバーの下部)

"tabBar":{
	"color": #fff,	// tab 上的文字默认颜色,仅支持十六进制颜色
    "list": [{
      "pagePath": "pages/index/index",	// 必须对应pages,不然不显示
      "text": "首页"
    },{
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  }

1.3.1その他の設定

	"selectedColor": "#c3f3c3",  // tab 上的文字选中时的颜色,仅支持十六进制颜色
	"backgroundColor" : "#c3f3c3",	// tab 的背景色,仅支持十六进制颜色
	"borderStyle" : "#black",	// tabbar 上边框的颜色, 仅支持 black / white
	"position" : "#bottom",	// tabBar 的位置,仅支持 bottom / top
	"custom" : // 自定义 tabBar 2.5.0
	
	"list": [{
      "pagePath": "pages/index/index",	// 页面路径,必须在 pages 中先定义 必须
      "text": "首页"	// tab 上按钮文字	必须
      "iconPath":"图片路径"	//图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。
      "selectedIconPath":"图片路径" //选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。
    }]

1.4 networkTimeout構成(ネットワーク・タイムアウト)

	...
"networkTimeout":{
    "request":10000,	//wx.request的超时时间,单位:毫秒。默认 60000	
    "connectSotcket":10000,	//wx.connectSotcket的超时时间,单位:毫秒。默认 60000	
    "uploadFile":10000,	//wx.uploadFile的超时时间,单位:毫秒。默认 60000	
    "downloadFile":1000	//wx.downloadFile的超时时间,单位:毫秒。默认 60000	
},
	...

1.5デバッグ設定

	...
	"debug":true // 开启debug console会出现日志

1.5.1デバッグ

フォーム情報に与えられた情報をデバッグ、デバッグモード、開発ツールでのコンソールパネルに開発ツールを開くことができ、登録情報には、ページ、ページルーティング、データ更新、イベントのトリガとしています。これは、開発者がすぐにいくつかの一般的な問題を見つけることができます。

1.6 ドキュメントを参照するにはより多くの設定
  1. functionalPagesは、小さなプログラムの所有者プラグインあなたは、プラグイン機能のページを有効にするには、この項目を設定する必要があります。インフラストラクチャライブラリ2.1.0のサポート、低バージョンが行われるように処理すると互換性があります。
  2. サブパッケージは、負荷に下請けを有効にすると、プロジェクトの下請け構造が宣言しました。書かれたサブパッケージにも対応します。マイクロチャネルクライアント6.6.0、1.7.3および基本的なライブラリのサポート上記
  3. 労働者が労働者のハンドルマルチスレッドタスクを使用すると、セットワーカーコードを扱うために行われるライブラリ1.9.90スタート、低互換性のあるバージョンをサポートするために、ディレクトリインフラストラクチャに配置されます。
  4. その能力を肯定requiredBackgroundModesは、バックグラウンドでのアレイの種類を実行する必要があります。マイクロチャネルクライアント6.7.2以上サポート
  5. ...

2. [設定ページ

2.1 index.json

{
	"navigationBarTitleText": "index"
}

app.jsonの構成のメインウィンドウindex.json(現在はwinodwを覆った構成をサポートしています~~(2020年1月10日アプレットが~~少し速く更新))

3.マイクロ手紙アプレットのライフサイクル

2.1 app.js

//app.js
App({
// 程序初始化执行
	onLaunch: function () {
		console.log("程序初始化执行"); 
	},
	onShow: function() {
		console.log("程序切换前台执行");
	},
	onHide: function(){
		console.log("程序切换后台执行");
	},
	getUserInof:function(){
		console.log("可以在每个page的js里面 通过getApp()来获取整个app,通过app.xxx获取信息")
	},
})

2.2 index.js

onLoad: function (options) {
	console.log("页面初始化执行"); 
},
onReady: function () {
	console.log("页面初次渲染完成执行")
},
onShow: function () { 
	 console.log("页面切换前台执行");
},
onHide: function () { 
	console.log("页面切换后台执行或者跳转到别的页面(页面还活着)执行");
},
onUnload: function () {
	console.log("页面卸载,页面被杀了(每次打开就是新的)就会执行");
},
onPullDownRefresh: function () { 
	console.log("用户下拉执行");
},
onReachBottom: function () {
	console.log("页面上拉触底执行");
},
onShareAppMessage: function () {
	console.log("用户点击右上角分享执行");
}

1.3パラメータの受け渡し

ページを初期化しますonLoadの上でジャンプするためのリンクがある場合は、リンクでもパラメータを持っている場合、あなたは内のオプションから選ぶことができます

onLoad: function (options) {
	console.log(options);  
},

こともできますwxmlコンポーネント<ナビゲータURI =」... /ログ/ログ?ID = 1" >

onLoad: function (options) {
	console.log(options.id);  
},

(ONUNLOAD呼び出して)戻ってきて使用して、このプロパティページをリダイレクトする
<リダイレクト「= 1"上記の番号の上に?... /ログ/ログナビゲーターのuri =を>

公開された42元の記事 ウォンの賞賛8 ビュー2433

おすすめ

転載: blog.csdn.net/TheNew_One/article/details/103930361