開篇語
開篇語已經(jīng)在熱身階段說過了惧盹,所以就不重復了。有興趣的讀者移步
來寫點微信小程序吧:D) ~~~(熱身階段)
以及前面借鑒小程序開發(fā)官方文檔的簡易教程寫的總綱
來寫點微信小程序吧:D) ~~~狂奔階段
還有分析小程序的目錄結構與配置的內(nèi)容
來寫點微信小程序吧:D) ~ ~ ~ 分析小程序目錄結構與配置
上一張學長的圖片鎮(zhèn)樓颖御,下面直接上開發(fā)過程筆記。
正文
一蒙保、 小程序邏輯層分為以下四個Part:
二龄糊、 在app.js中配置的是整個小程序的格調(diào)。決定頁面文件的路徑由驹、窗口表現(xiàn)芍锚、設置網(wǎng)絡超時時間、設置多 tab 等蔓榄。
1并炮、 其中App()中包含有注冊,登陸信息的主體润樱。
App() 函數(shù)用來注冊一個小程序渣触。接受一個 object 參數(shù),其指定小程序的生命周期函數(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ù)進行對登陸注冊信息的操作。
注意:
App() 必須在 app.js 中注冊店展,且不能注冊多個养篓。
不要在定義于 App() 內(nèi)的函數(shù)中調(diào)用 getApp() ,使用 this 就可以拿到 app 實例赂蕴。
不要在 onLaunch 的時候調(diào)用 getCurrentPage()柳弄,此時 page 還沒有生成。
通過 getApp() 獲取實例之后概说,不要私自調(diào)用生命周期函數(shù)碧注。
三、 注冊頁面
上一節(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 文檔
結束語
小程序算是假期的一個調(diào)劑吧,不然真的就是天天看小說谬以,看視頻的糜爛生活了强饮。所以要是大家有興趣的話,可以關注一下我的進度为黎。當然邮丰,小程序不是我的全部,寒假清單里可沒有小程序的容身之地铭乾。所以可能會有存在時斷時續(xù)的狀況剪廉,不過這都不是問題。后面我也會持續(xù)的跟進我對官方文檔的解讀進度炕檩,對Javascript理解不深斗蒋,所以難免有的地方會存在一些錯誤,敬請諒解笛质,不過基本上每一個原創(chuàng)點都是經(jīng)過我自己的調(diào)試Debug泉沾,高手別來笑話我這些低端,畢竟目前我還是很菜的妇押。OK跷究,簡書寫完了。我仿佛已經(jīng)聽到了扇貝單詞在召喚我舆吮。~~ ~ 搞完活動碎覺咯 ~
另外安利幾位大神的作品(直接給大神簡書的鏈接):
微信小程序—豆瓣電影APP
微信小程序之知乎日報
微信小程序——一個簡單的音樂播放器
微信小程序-從零開始制作一個跑步微信小程序
個人宣言
知識傳遞力量,技術無國界队贱,文化改變生活色冀!