碼迷,mamicode.com
首頁 > 微信 > 詳細

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

時間:2018-06-10 11:41:24      閱讀:8587      評論:0      收藏:0      [點我收藏+]

標簽:變量   common   com   模塊化   全局   業務   module   作用   style   

 

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

 

 技術分享圖片

技術分享圖片

 

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

標簽:變量   common   com   模塊化   全局   業務   module   作用   style   

原文地址:https://www.cnblogs.com/lguow/p/9162246.html

(0)
(0)
   
舉報
評論 一句話評論(0
0條  
登錄后才能評論!
? 2014 mamicode.com 版權所有 京ICP備13008772號-2
迷上了代碼!
公式规律下期单双