慕課網：支付寶開發小程序

1、  支付寶小程序的官方網址：https://mini.open.alipay.com/channel/miniIndex.htm

          開發文檔：https://docs.alipay.com/mini/developer/getting-started

 

2、  螞蟻開發者工具下載地址：https://docs.alipay.com/mini/ide/download

 

官方SDK實例：https://docs.open.alipay.com/54/103419/

 

https://open.alipay.com/platform/manageHome.htm

 

 

 

 

 #ffbfc7          #f2f5f8          #ff6699          #868585         #ffe817         

 

【總結】

===================

app的三種文件類型

 　　app.js(必)　　->　　全局腳本、全局常量

　　 app.acss(選)　　->　　全局樣式

　　 app.json(必)　　->　　項目配置

 

---------------------------

對象結構

app.json:{

　　pages:[

　　　　"頁面1"，

　　　　」頁面2「

　　]

}

-----------------------

app的生命週期函數

onLaunch　　-> 項目初始化完成時觸發，只觸發一次

onShow　　->　　頁面展現的時候觸發

 

onLoad　　->　　頁面加載時執行，每一個頁面只執行一次

onReady　　->　　頁面初次渲染完成，每一個頁面只執行一次

onShow　　-> 頁面顯示後執行一次，可執行屢次

onHide　　->　　頁面每次隱藏時執行一次

onUnload　　->　　頁面卸載執行一次（一次放水）

 

 ====================================

全局對象與全局樣式

getApp()　　->　　app對象

　　　　　　外部腳本 操做app中的對象，方法，常量

app.acss　　->　　自定義樣式

　　　　　　page.acss自動引入（能夠被重寫）

　　　　　　

 ---------------

導航欄-配置屬性名稱：tabBar

 

textColor　　->　　文字顏色

selectedColor　　->　　文字選中後顏色

backgroudColor　　->　　背景顏色

 itmes　　->　　每一個單獨tab項（數組）複數

 

pagePath　　　　->　　頁面路徑

name　　　　　　->　　文字

icon　　　　　　->　　未選中的圖標

activeIcon　　　　->　　選中後的圖標

 

 ----------------------

導航組件

open-type:navigate　　　　[保留當前頁面，跳轉new頁面]

　　　　:redirect　　　　[銷燬當前頁面，跳轉new頁面]

 　　　　:navigateBack　　[返回上一級頁面]

　　　　：switchTab　　跳轉到tabBar頁面

 

my.navigateTo({　　　　//　　跳轉詳細頁+有返回

　　url: "/pages/mine/info/info"

});

---------------------------------------------------

 

 if else

 1.經過傳入true或者false

<view a:if="{{flag}}"></view>

 

 2.for循環

 

<view a:for="{{users}}"

　　   a:for-item="hehe"

　　   a:for-index="i">

　　　　　　id爲{{hehe.id}}

　　　　　　name爲{{i}}

</view>

<bolck>　[不會顯示view，精簡代碼，]　</block>

 ------------------

6種事件類型

onTap　　　　（tap：觸摸）

　　　

<view class="demo-words" catchTouchMove="touchMoves">

觸摸移動 </view>

1.tap:點擊事件　　　　longTap:長按點擊事件

2.touchStart　開始觸摸　　touchMove    觸摸移動

3.touchEnd　觸摸結束（人爲結束，手指放開）　　　　　　　touchCancel　　（非正常，打電話時）

 -------------------------

dataset

<view onTap="demo" class="demo-words"

data-name="imooc"

data-user_nickname="1001"

data-id="1001">

數據採集 </view>

 ------------------------------------

圖片組件

 https://docs.alipay.com/mini/component/swiper