2018-01-18

小程序基礎(chǔ)語法

配置

  • app.json中的pages數(shù)組第一項(xiàng)為默認(rèn)首頁

  • window模塊包含屬性
    `
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "C'est la vie",
    "navigationBarTextStyle":"black",
    "backgroundColor":"red",
    "enablePullDownRefresh":"false",
    "onReachBottomDistance":"20px"

    `

  • tabBar標(biāo)簽欄

    attr type bool describe
    color HexColor tab 上的文字默認(rèn)顏色
    selectedColor HexColor tab 上的文字選中時(shí)的顏色
    backgroundColor HexColor tab 的背景色
    borderStyle String black tabbar上邊框的顏色擅笔, 僅支持 black/white
    list Array tab 的列表溉瓶,詳見 list 屬性說明,最少2個(gè)、最多5個(gè) tab
    position String bottom 可選值 bottom、top
  • pages.json 覆蓋全局配置

    attr type bool describe
    navigationBarBackgroundColor HexColor #000000 導(dǎo)航欄背景顏色读整,如"#000000"
    navigationBarTextStyle String white 導(dǎo)航欄標(biāo)題顏色蚀苛,僅支持 black/white
    navigationBarTitleText String C'est la vie 導(dǎo)航欄標(biāo)題文字內(nèi)容
    backgroundColor HexColor #ffffff 窗口的背景色
    backgroundTextStyle String dark 下拉背景字體、loading 圖的樣式炊林,僅支持 dark/light
    enablePullDownRefresh Boolean false 是否開啟下拉刷新,詳見頁面相關(guān)事件處理函數(shù)卷要。
    disableScroll Boolean false 設(shè)置為 true 則頁面整體不能上下滾動(dòng)渣聚;只在 page.json 中有效,無法在 app.json 中設(shè)置該項(xiàng)
    onReachBottomDistance Number 50 頁面上拉觸底事件觸發(fā)時(shí)距頁面底部距離僧叉,單位為px

    DEMO
    { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }

邏輯層

  1. js基礎(chǔ)結(jié)構(gòu)修改
    <p>
    * 增加 App 和 Page 方法奕枝,進(jìn)行程序和頁面的注冊(cè)。
    * 增加 getApp 和 getCurrentPages 方法瓶堕,分別用來獲取 App 實(shí)例和當(dāng)前頁面棧隘道。
    * 提供豐富的 API,如微信用戶數(shù)據(jù)郎笆,掃一掃谭梗,支付等微信特有能力。
    * 每個(gè)頁面有獨(dú)立的作用域宛蚓,并提供模塊化能力激捏。
    * 由于框架并非運(yùn)行在瀏覽器中,所以 JavaScript 在 web 中一些能力都無法使用凄吏,如 document远舅,window 等。
    * 開發(fā)者寫的所有代碼最終將會(huì)打包成一份 JavaScript痕钢,并在小程序啟動(dòng)的時(shí)候運(yùn)行图柏,直到小程序銷毀。類似 ServiceWorker任连,所以邏輯層也稱之為 App Service蚤吹。
    </p>

  2. 注冊(cè)程序

    App函數(shù)用來注冊(cè)一個(gè)小程序,用于初始化课梳,接收object參數(shù)距辆,指定小程序的生命周期函數(shù)

    屬性 類型 描述 觸發(fā)時(shí)機(jī)
    onLaunch Function 生命周期函數(shù)--監(jiān)聽小程序初始化 當(dāng)小程序初始化完成時(shí),會(huì)觸發(fā) onLaunch(全局只觸發(fā)一次)
    onShow Function 生命周期函數(shù)--監(jiān)聽小程序顯示 當(dāng)小程序啟動(dòng)暮刃,或從后臺(tái)進(jìn)入前臺(tái)顯示跨算,會(huì)觸發(fā) onShow
    onHide Function 生命周期函數(shù)--監(jiān)聽小程序隱藏 當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái),會(huì)觸發(fā) onHide
    onError Function 錯(cuò)誤監(jiān)聽函數(shù) 當(dāng)小程序發(fā)生腳本錯(cuò)誤椭懊,或者 api 調(diào)用失敗時(shí)诸蚕,會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息
    其他 Any 開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 Object 參數(shù)中步势,用 this 可以訪問
  3. 注冊(cè)頁面

    Page函數(shù)注冊(cè)一個(gè)頁面,接收一個(gè)object參數(shù)背犯,指定頁面的初始數(shù)據(jù)坏瘩,生命周期函數(shù),事件處理函數(shù)

    屬性 類型 描述
    data Object 頁面的初始數(shù)據(jù)
    onLoad Function 生命周期函數(shù)--監(jiān)聽頁面加載
    onReady Function 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
    onShow Function 生命周期函數(shù)--監(jiān)聽頁面顯示
    onHide Function 生命周期函數(shù)--監(jiān)聽頁面隱藏
    onUnload Function 生命周期函數(shù)--監(jiān)聽頁面卸載
    onPullDownRefresh Function 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
    onReachBottom Function 頁面上拉觸底事件的處理函數(shù)
    onShareAppMessage Function 用戶點(diǎn)擊右上角轉(zhuǎn)發(fā)
    onPageScroll Function 頁面滾動(dòng)觸發(fā)事件的處理函數(shù)
    onTabItemTap Function 當(dāng)前是 tab 頁時(shí)漠魏,點(diǎn)擊 tab 時(shí)觸發(fā)
    其他 Any 開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 object 參數(shù)中倔矾,在頁面的函數(shù)中用 this 可以訪問

    初始化數(shù)據(jù),必須是json格式

     `
     <view>{{text}}</view>
     <view>{{array[0].msg}}</view>
     Page({
       data: {
         text: 'init data',
         array: [{msg: '1'}, {msg: '2'}]
       }
     })
     `
    

    生命周期函數(shù)

    wait

markdown 表格模板

|  attr  | type | bool | describe 
| :--: | : -- : | :--: | : -- :         
|color |  HexColor |   是  |     tab 上的文字默認(rèn)顏色
| selectedColor  |  HexColor |   是  |     tab 上的文字選中時(shí)的顏色
| backgroundColor  | HexColor  |   是   |     tab 的背景色
| borderStyle |  String  | 否  | black tabbar上邊框的顏色black/white
|list  |  Array |  是  |     tab 的列,最少2個(gè)柱锹、最多5個(gè) tab
|position |   String | 否  | bottom  可選值 bottom哪自、top
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市禁熏,隨后出現(xiàn)的幾起案子壤巷,更是在濱河造成了極大的恐慌,老刑警劉巖瞧毙,帶你破解...
    沈念sama閱讀 211,496評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件胧华,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡宙彪,警方通過查閱死者的電腦和手機(jī)矩动,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,187評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來您访,“玉大人铅忿,你說我怎么就攤上這事×橥簦” “怎么了?”我有些...
    開封第一講書人閱讀 157,091評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵柑潦,是天一觀的道長享言。 經(jīng)常有香客問我,道長渗鬼,這世上最難降的妖魔是什么览露? 我笑而不...
    開封第一講書人閱讀 56,458評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮譬胎,結(jié)果婚禮上差牛,老公的妹妹穿的比我還像新娘。我一直安慰自己堰乔,他們只是感情好偏化,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,542評(píng)論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著镐侯,像睡著了一般侦讨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,802評(píng)論 1 290
  • 那天韵卤,我揣著相機(jī)與錄音骗污,去河邊找鬼。 笑死沈条,一個(gè)胖子當(dāng)著我的面吹牛需忿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蜡歹,決...
    沈念sama閱讀 38,945評(píng)論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼屋厘,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了季稳?” 一聲冷哼從身側(cè)響起擅这,我...
    開封第一講書人閱讀 37,709評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎景鼠,沒想到半個(gè)月后仲翎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,158評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡铛漓,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,502評(píng)論 2 327
  • 正文 我和宋清朗相戀三年溯香,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片浓恶。...
    茶點(diǎn)故事閱讀 38,637評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡玫坛,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出包晰,到底是詐尸還是另有隱情湿镀,我是刑警寧澤,帶...
    沈念sama閱讀 34,300評(píng)論 4 329
  • 正文 年R本政府宣布伐憾,位于F島的核電站勉痴,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏树肃。R本人自食惡果不足惜蒸矛,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,911評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望胸嘴。 院中可真熱鬧雏掠,春花似錦、人聲如沸劣像。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,744評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽驾讲。三九已至蚊伞,卻和暖如春席赂,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背时迫。 一陣腳步聲響...
    開封第一講書人閱讀 31,982評(píng)論 1 266
  • 我被黑心中介騙來泰國打工颅停, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人掠拳。 一個(gè)月前我還...
    沈念sama閱讀 46,344評(píng)論 2 360
  • 正文 我出身青樓癞揉,卻偏偏與公主長得像,于是被迫代替她去往敵國和親溺欧。 傳聞我的和親對(duì)象是個(gè)殘疾皇子喊熟,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,500評(píng)論 2 348

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

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,769評(píng)論 25 707
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)姐刁,斷路器芥牌,智...
    卡卡羅2017閱讀 134,632評(píng)論 18 139
  • 登錄getUser這個(gè)接口用不同的id和unionId去查,總是出現(xiàn)同一個(gè)結(jié)果聂使。查接口壁拉,斷點(diǎn)檢查。斷點(diǎn)顯示數(shù)據(jù)是正...
    Catch_the_tail閱讀 709評(píng)論 4 0
  • 6月又是一個(gè)畢業(yè)季柏靶,空氣中彌漫著梔枝花的香味 永久的話題就是青春弃理,因?yàn)槊總€(gè)人都會(huì)經(jīng)歷過年輕的歲月 初中時(shí)段記憶中接...
    遺忘的soyo閱讀 322評(píng)論 0 2
  • 子惜123閱讀 160評(píng)論 0 0