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

 

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位置。