簡年3: 來寫點微信小程序吧:D) ---- 分析小程序邏輯層內(nèi)容

開篇語

開篇語已經(jīng)在熱身階段說過了惧盹,所以就不重復了。有興趣的讀者移步
來寫點微信小程序吧:D) ~~~(熱身階段)
以及前面借鑒小程序開發(fā)官方文檔的簡易教程寫的總綱
來寫點微信小程序吧:D) ~~~狂奔階段
還有分析小程序的目錄結構與配置的內(nèi)容
來寫點微信小程序吧:D) ~ ~ ~ 分析小程序目錄結構與配置

上一張學長的圖片鎮(zhèn)樓颖御,下面直接上開發(fā)過程筆記。

張小龍學長

正文

一蒙保、 小程序邏輯層分為以下四個Part:

  1. 注冊程序
  1. 注冊界面
  2. 模塊化
  3. API
邏輯層結構如圖

二龄糊、 在app.js中配置的是整個小程序的格調(diào)。決定頁面文件的路徑由驹、窗口表現(xiàn)芍锚、設置網(wǎng)絡超時時間、設置多 tab 等蔓榄。
1并炮、 其中App()中包含有注冊,登陸信息的主體润樱。
App() 函數(shù)用來注冊一個小程序渣触。接受一個 object 參數(shù),其指定小程序的生命周期函數(shù)等壹若。

App()中的登陸接口
內(nèi)部函數(shù)如圖所示

示例代碼如下:

App({
  onLaunch: function() { 
    // Do something initial when launch.
  },
  onShow: function() {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  onError: function(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})
演示效果如圖

2嗅钻、getApp()
在別的js文件里面即可調(diào)用getApp()函數(shù)進行對登陸注冊信息的操作。

getApp()
在別的文件里面用到getApp()
注意:
App() 必須在 app.js 中注冊店展,且不能注冊多個养篓。

不要在定義于 App() 內(nèi)的函數(shù)中調(diào)用 getApp() ,使用 this 就可以拿到 app 實例赂蕴。

不要在 onLaunch 的時候調(diào)用 getCurrentPage()柳弄,此時 page 還沒有生成。

通過 getApp() 獲取實例之后概说,不要私自調(diào)用生命周期函數(shù)碧注。

三、 注冊頁面

page注冊頁面的內(nèi)容
在index.js文件里定義了注冊頁面

上一節(jié)有講過關于page()的具體信息糖赔。具體內(nèi)部參數(shù)詳情萍丐,請參照:
微信page參數(shù)詳情
這里就不再贅述~代碼直接上:

Page({
  data: {
    motto: 'Hello! Wechat開發(fā)者',
    userInfo: {}
  },
  //事件處理函數(shù)
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //調(diào)用應用實例的方法獲取全局數(shù)據(jù)
    app.getUserInfo(function(userInfo){
      //更新數(shù)據(jù)
      that.setData({
        userInfo:userInfo
      })
    })
  },

  changeText: function() {
    // this.data.text = 'changed data'  // bad, it can not work
    this.setData({
      text: 'changed data'
    })
  },
  changeItemInArray: function() {
    // you can use this way to modify a danamic data path
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  },

  onShareAppMessage: function () {
    return {
      title: 'Hello 張照博',
      desc: '將小程序分享到~~~',
      path: '/page/index/index.js'
    }
  },
})

四放典、 模塊化

文件作用域

在 JavaScript 文件中聲明的變量和函數(shù)只在該文件中有效逝变;不同的文件中可以聲明相同名字的變量和函數(shù),不會互相影響奋构。
通過全局函數(shù) getApp()
可以獲取全局的應用實例壳影,如果需要全局的數(shù)據(jù)可以在 App()
中設置,如:

// app.js
App({ globalData: 1})
 // a.js
// The localValue can only be used in file a.js.
var localValue = 'a'
// Get the app instance.
var app = getApp()
// Get the global data and change it.
app.globalData++
// b.js
// You can redefine localValue in file b.js, without interference with the localValue in a.js.
var localValue = 'b'
// If a.js it run before b.js, now the globalData shoule be 2.
console.log(getApp().globalData)
模塊化

我們可以將一些公共的代碼抽離成為一個單獨的 js 文件弥臼,作為一個模塊宴咧。模塊只有通過 module.exports 或者 exports 才能對外暴露接口。

需要注意的是:

exports 是 module.exports 的一個引用径缅,因此在模塊里邊隨意更改 exports 的指向會造成未知的錯誤悠汽。
所以我們更推薦開發(fā)者采用 module.exports 來暴露模塊接口箱吕,除非你已經(jīng)清晰知道這兩者的關系。
小程序目前不支持直接引入 node_modules , 開發(fā)者需要使用到 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) 將公共代碼引入

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

四、 API
小程序開發(fā)框架提供豐富的微信原生 API假抄,可以方便的調(diào)起微信提供的能力怎栽,如獲取用戶信息,本地存儲宿饱,支付功能等熏瞄。
詳細介紹請參考 API 文檔

API庫

結束語

小程序算是假期的一個調(diào)劑吧,不然真的就是天天看小說谬以,看視頻的糜爛生活了强饮。所以要是大家有興趣的話,可以關注一下我的進度为黎。當然邮丰,小程序不是我的全部,寒假清單里可沒有小程序的容身之地铭乾。所以可能會有存在時斷時續(xù)的狀況剪廉,不過這都不是問題。后面我也會持續(xù)的跟進我對官方文檔的解讀進度炕檩,對Javascript理解不深斗蒋,所以難免有的地方會存在一些錯誤,敬請諒解笛质,不過基本上每一個原創(chuàng)點都是經(jīng)過我自己的調(diào)試Debug泉沾,高手別來笑話我這些低端,畢竟目前我還是很菜的妇押。OK跷究,簡書寫完了。我仿佛已經(jīng)聽到了扇貝單詞在召喚我舆吮。~~ ~ 搞完活動碎覺咯 ~


另外安利幾位大神的作品(直接給大神簡書的鏈接):
微信小程序—豆瓣電影APP
微信小程序之知乎日報
微信小程序——一個簡單的音樂播放器
微信小程序-從零開始制作一個跑步微信小程序

個人宣言

知識傳遞力量,技術無國界队贱,文化改變生活色冀!

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市柱嫌,隨后出現(xiàn)的幾起案子锋恬,更是在濱河造成了極大的恐慌,老刑警劉巖编丘,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件与学,死亡現(xiàn)場離奇詭異彤悔,居然都是意外死亡,警方通過查閱死者的電腦和手機索守,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進店門晕窑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人卵佛,你說我怎么就攤上這事杨赤。” “怎么了截汪?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵疾牲,是天一觀的道長。 經(jīng)常有香客問我衙解,道長阳柔,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任蚓峦,我火速辦了婚禮舌剂,結果婚禮上,老公的妹妹穿的比我還像新娘枫匾。我一直安慰自己架诞,他們只是感情好,可當我...
    茶點故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布干茉。 她就那樣靜靜地躺著谴忧,像睡著了一般。 火紅的嫁衣襯著肌膚如雪角虫。 梳的紋絲不亂的頭發(fā)上沾谓,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天,我揣著相機與錄音戳鹅,去河邊找鬼均驶。 笑死,一個胖子當著我的面吹牛枫虏,可吹牛的內(nèi)容都是我干的妇穴。 我是一名探鬼主播,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼隶债,長吁一口氣:“原來是場噩夢啊……” “哼腾它!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起死讹,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤瞒滴,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體妓忍,經(jīng)...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡虏两,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了世剖。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片定罢。...
    茶點故事閱讀 38,018評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖搁廓,靈堂內(nèi)的尸體忽然破棺而出引颈,到底是詐尸還是另有隱情,我是刑警寧澤境蜕,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布蝙场,位于F島的核電站,受9級特大地震影響粱年,放射性物質(zhì)發(fā)生泄漏售滤。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一台诗、第九天 我趴在偏房一處隱蔽的房頂上張望完箩。 院中可真熱鬧,春花似錦拉队、人聲如沸弊知。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽秩彤。三九已至,卻和暖如春事哭,著一層夾襖步出監(jiān)牢的瞬間漫雷,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工鳍咱, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留降盹,地道東北人。 一個月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓谤辜,卻偏偏與公主長得像蓄坏,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子丑念,可洞房花燭夜當晚...
    茶點故事閱讀 42,762評論 2 345

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,501評論 25 707
  • 那么 喝一杯吧 讓液體走進身體 再來一些 我知道你不快樂 你在思念一個人 你有想哭的沖動 可是 思念的那個人 在睡...
    孟小繁閱讀 140評論 0 0
  • “如果我們終將形同陌路涡戳,你是否還會選擇遇見我?” “當然會渠欺,你是我今生最美的遇見” 阿澈遇見她的席先生時妹蔽,年芳十八...
    楚熠閱讀 283評論 0 0
  • 不是人選擇命運椎眯,而是命運選擇人
    乾木青閱讀 505評論 0 0
  • 一月挠将。 看完了《人類簡史》和《喬布斯傳》胳岂。 開始看《定位》和《時間簡史》,還沒看完舔稀。 去了寶光寺和青城后山乳丰。 見了...
    孫曉曉曉閱讀 352評論 0 0