如何在微信小程序定義全局變量、全局函數、如何實現 函數復用 模塊化開發等問題詳解

 

1.如何定義全局數據

　　在app.js的App({})中定義的數據或函數都是全局的，在頁面中可以通過var app = getApp();  app.function/key的方式調用，不過我們沒有必要再app.js中定義全局函數。

定義 全局函數 如下圖：

2.如何實現代碼的復用

　　實現函數的復用前我們先復習一個知識點：require 用來加載代碼，而 exports 和 module.exports 則用來導出代碼。module.exports 對象是由模塊系統創建的。在我們自己寫模塊的時候，需要在模塊最后寫好模塊接口，聲明這個模塊對外暴露什么內容，module.exports 提供了暴露接口的方法。

 

 測試代碼如如下：

test.js
function test(){
}
module.exports={
 test:test 
}
 
other.js
var common = require('test.js');
page({
　　common.test()
})

3.微信小程序的組件化開發

微信小程序已經提供了很多現成的組件，實現 組件化開發 非常容易，可是，在我們實際業務中，還有一些需要自己去開發的組件，有些組件在很多頁面重復出現，如果不封裝成公共的組件就會造成代碼的重復率較多，大家都知道，微信小程序前端開發包是有大小限制的，那就是小於2M，所以微信小程序的組件化開發是很有必要的。

 

<template name="odd">
 <view> odd </view>
</template>
<template name="even">
 <view> even </view>
</template>
 
<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
//我們頁可以把模板定義在其他文件中，以<import src="url"/>的形式引入，但是import有作用域的概念，即只會import目標文件中定義的template，
而不會import目標文件import的template
//include可以將目標文件除了<template/>的整個代碼引入，相當於是拷貝到include位置。