20161123微信小程序學習筆記-js解析

js 是微信小程序的邏輯層,提供了app應該具備的API ,主要邏輯是基于javascript,但是也不完全一樣,其中最明顯的Alert('')是不可以使用的,只能使用console.log()進行調試;

** 邏輯層分為4個主要部分注冊程序,注冊頁面,模塊化,API **

注冊程序

App();

注冊程序主要執行在App();函數中,并接收一個對象{} ,所有的配置項目都在這里配置;

App({ 
  onLaunch: function() { 
    // Do something initial when launch.
    //當小程序初始化完成時,會觸發 onLaunch(全局只觸發一次)
  },
   onShow: function() {
     // Do something when show. 
    //當小程序啟動,或從后臺進入前臺顯示,會觸發 onShow
  }, 
  onHide: function() {
     // Do something when hide. 
    // 當小程序從前臺進入后臺,會觸發 onHide
  }, 
  globalData: 'I am global data'
})

getApp();

我們提供了全局的 getApp()函數,可以獲取到小程序實例

var appInstance = getApp()
console.log(appInstance.globalData) 
// I am global data

注冊頁面

Page

Page()函數用來注冊一個頁面。接受一個 object 參數,其指定頁面的初始數據、生命周期函數、事件處理函數等。

Page({ 
  data: 
  //頁面的初始數據
    { text: "This is page data." }, 
  onLoad: function(options) { // Do some initialize when page load. },
   //生命周期函數--監聽頁面加載
  onReady: function() { // Do something when page ready. }, 
  //生命周期函數--監聽頁面初次渲染完成
  onShow: function() { // Do something when page show. }, 
  //生命周期函數--監聽頁面顯示
  onHide: function() { // Do something when page hide. }, 
  //生命周期函數--監聽頁面隱藏
  onUnload: function() { // Do something when page close. },
  //生命周期函數--監聽頁面卸載 
  onPullDownRefresh: function() { // Do something when pull down. }, 
  //頁面相關事件處理函數--監聽用戶下拉動作
  onReachBottom: function() { // Do something when page reach bottom. },
  //頁面上拉觸底事件的處理函數 一般用于執行加載程序或loading程序
   // Eventhandler. 
  viewTap: function() { this.setData({ text: 'Set some data for updating view.' }) },
  customData: { hi: 'MINA' }
})

模塊化

  • 文件作用域
    在 JavaScript 文件中聲明的變量和函數只在該文件中有效;不同的文件中可以聲明相同名字的變量和函數,不會互相影響。
    通過全局函數getApp() 可以獲取全局的應用實例,如果需要全局的數據可以在 App()中設置,如:
app.jsApp({ globalData: 1})
// a.js
var app = getApp()
app.globalData++
// b.js
var localValue = 'b'
console.log(getApp().globalData)
//這兩個的輸出結果是不一樣的,是互相不會影響的
  • 模塊化
    模塊只有通過 module.exports或者 exports才能對外暴露接口。
    需要注意的是:exports是 module.exports的一個引用不能隨便更改
    小程序目前不支持直接引入 node_modules
// common.js
function sayHello(name) { console.log(`Hello ${name} !`)}
function sayGoodbye(name) { console.log(`Goodbye ${name} !`)}
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

?在需要使用這些模塊的文件中,使用 require(path)將公共代碼引入
*** 這個有點python風格 ***

var common = require('common.js')
Page({ 
  helloMINA: function() { common.sayHello('MINA') }, 
  goodbyeMINA: function() { common.sayGoodbye('MINA') }
})
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 微信小程序在無論在功能、文檔及相關支持方面,都是優于前面幾種微信賬號類型,它提供了很多原生程序才有的接口,使得我們...
    未央大佬閱讀 2,329評論 0 12
  • 個人入門學習用筆記、不過多作為參考依據。如有錯誤歡迎斧正 目錄 簡書好像不支持錨點、復制搜索(反正也是寫給我自己看...
    kirito_song閱讀 2,495評論 1 37
  • Node.js是目前非常火熱的技術,但是它的誕生經歷卻很奇特。 眾所周知,在Netscape設計出JavaScri...
    w_zhuan閱讀 3,639評論 2 41
  • topics: 1.The Node.js philosophy 2.The reactor pattern 3....
    宮若石閱讀 1,126評論 0 1
  • 自古此乃尋常事,奈何今人疏其傍。 一墨一硯擬太極,研來幽香臨古章。 一點一橫細思量,一撇一捺論短長。 毫寸之間有天...
    桂之華閱讀 445評論 7 20