小程序api 部分

目錄結(jié)構(gòu)

Paste_Image.png

每個(gè)小程序都有一個(gè)整體的 app 和多個(gè)頁(yè)面 page蹭睡;
app 部分的結(jié)構(gòu)

app.js;     //邏輯文件
app.json;  //小程序的配置文件
app.wxss; // 小程序的全局樣式表

每個(gè) page 的結(jié)構(gòu)

page.js;    // 頁(yè)面邏輯
page.wxml;  //頁(yè)面結(jié)構(gòu)
page.wxss;  //頁(yè)面樣式表
page.json;  //頁(yè)面配置

特別注意

注意:為了方便開(kāi)發(fā)者減少配置項(xiàng)织阳,我們規(guī)定描述頁(yè)面的這四個(gè)文件必須具有相同的路徑與文件名。

邏輯層 *.js

邏輯層是js編寫(xiě)的。
注意點(diǎn)

  • 增加App()和Page()方法,進(jìn)行注冊(cè)程序和頁(yè)面。
  • 增加 getApp 和 getCurrentPages 方法戴已,分別用來(lái)獲取 App 實(shí)例和當(dāng)前頁(yè)面棧。
  • 提供豐富的 API锅减,如微信用戶數(shù)據(jù)糖儡,掃一掃,支付等微信特有能力怔匣。
  • 每個(gè)頁(yè)面有獨(dú)立的作用域握联,并提供模塊化能力桦沉。
  • js的執(zhí)行環(huán)境不是瀏覽器所以無(wú)法使用web中的對(duì)象,如: window金闽、document等纯露。
  • 開(kāi)發(fā)者寫(xiě)的所有代碼最終將會(huì)打包成一份 JavaScript,并在小程序啟動(dòng)的時(shí)候運(yùn)行代芜,直到小程序銷毀埠褪。

app.js 模板

App({ 
    onLaunch: function() { // Do something initial when launch. },   
    onShow: function() { // Do something when show. }, 
    onHide: function() { // Do something when hide. }, 
    globalData: 'I am global data'}),
    apiUrl: 'xxx.xx.com'//可以定義全局變量
});

page.js 模板

//獲取應(yīng)用實(shí)例
var app = getApp()
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. }, 
    // Event handler. 
    viewTap: function() { 
      this.setData({ text: 'Set some data for updating view.' });
      // 可以直接獲取app上的全局變量函數(shù)等等
      app.apiUrl; 
     },   
    customData: {
       hi: 'MINA' 
    }
   })

視圖層

WXML 小程序的頁(yè)面結(jié)構(gòu)

數(shù)據(jù)綁定

雙大括號(hào)綁定{{}}

 <!-- 簡(jiǎn)單綁定 -->
 <view> {{ message }} </view>
 <!-- 組件屬性 -->
 <view id="id-{{index}}"> </view>
 <!-- javascript運(yùn)算在大括號(hào)內(nèi)都支持 -->
 <view id="id-{{index + '123'}}"> </view>
 <!-- 邏輯判斷控制 -->
 <view wx:if="{{length<5}}">1 </view>
<view wx:elif="{{length <2}}"> 2 </view>
<view wx:else> 3 </view>
列表渲染
  <!-- 默認(rèn)方式 -->
  <view wx:for="{{array}}"> {{index}}: {{item.message}}</view>
<!-- 自定義 index item -->
  <viewwx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName.message}}</view>

WXSS 小程序的樣式表

小程序自己的樣式表,支持大部分標(biāo)準(zhǔn)css 支持flex
小程序的響應(yīng)式布局挤庇,

  • rpx(responsive pixel): 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)钞速。規(guī)定屏幕寬為750rpx。如在 iPhone6 上嫡秕,屏幕寬度為375px渴语,共有750個(gè)物理像素,則750rpx = 375px = 750物理像素昆咽,1rpx = 0.5px = 1物理像素驾凶。
  • rem(root em): 規(guī)定屏幕寬度為20rem;1rem = (750/20)rpx 潮改。
    選擇器
  • .class
  • #id
  • element
  • element, element
  • ::after
  • ::before

組件

這里的組件相當(dāng)于html中的標(biāo)簽

  • 視圖容器
    • view (相當(dāng)于html 中的div)
    • scroll-view
    • swiper (小程序的輪播組件)
  • 基礎(chǔ)內(nèi)容
    • icon
    • text
    • progress
  • 表單組件
    • button
    • checkbox
    • form
    • input
    • label
    • picker
    • radio
    • slider
    • switch
    • textarea
  • 導(dǎo)航
  • navigator
  • 媒體組件
    • audio
    • image (注意image有個(gè)默認(rèn)的寬320px;高240px)
    • video
  • 地圖
    • map
  • 畫(huà)布
    • canvas
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末狭郑,一起剝皮案震驚了整個(gè)濱河市腹暖,隨后出現(xiàn)的幾起案子汇在,更是在濱河造成了極大的恐慌,老刑警劉巖脏答,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件糕殉,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡殖告,警方通過(guò)查閱死者的電腦和手機(jī)阿蝶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)黄绩,“玉大人羡洁,你說(shuō)我怎么就攤上這事∷ぃ” “怎么了筑煮?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)粤蝎。 經(jīng)常有香客問(wèn)我真仲,道長(zhǎng),這世上最難降的妖魔是什么初澎? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任秸应,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘软啼。我一直安慰自己桑谍,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布祸挪。 她就那樣靜靜地躺著霉囚,像睡著了一般。 火紅的嫁衣襯著肌膚如雪匕积。 梳的紋絲不亂的頭發(fā)上盈罐,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音闪唆,去河邊找鬼盅粪。 笑死,一個(gè)胖子當(dāng)著我的面吹牛悄蕾,可吹牛的內(nèi)容都是我干的票顾。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼帆调,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼奠骄!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起番刊,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤含鳞,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后芹务,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體蝉绷,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年枣抱,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了熔吗。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡佳晶,死狀恐怖桅狠,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情轿秧,我是刑警寧澤中跌,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站淤刃,受9級(jí)特大地震影響晒他,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜逸贾,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一陨仅、第九天 我趴在偏房一處隱蔽的房頂上張望津滞。 院中可真熱鬧,春花似錦灼伤、人聲如沸触徐。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)撞鹉。三九已至,卻和暖如春颖侄,著一層夾襖步出監(jiān)牢的瞬間鸟雏,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工览祖, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留孝鹊,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓展蒂,卻偏偏與公主長(zhǎng)得像又活,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子锰悼,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

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