大伽吼，有段時間沒發佈原創文章了，今天小編給各位帶來一篇。關於支付寶小程序的文章。部分內容也是小編的一些理解和觀點，若有不對請指正。
大多數普通人都知道微信小程序，但是支付寶小程序似乎很少有人知道，除了業內人士。首先微信的用戶量更為龐大，而且使用率非常的高，幾乎是每天必用的社交軟件，微信下的產品便非常容易推廣，因此可見微信小程序的數量現在已經非常多了，騰訊一直以來的最大優勢就是用戶量龐大。而支付寶大多數人也就是用來支付的。基本很少會拿來社交。但只要你的產品更貼合支付寶，那你的產品即可在支付寶小程序中大放異彩了。比如共享單車等，即開即用即支付，而在支付方面，人們還是更喜歡用支付寶，至於為什麼微信支付為何趕不上支付寶支付，軟件的優劣屬性已經確定了。
進入今天的正題：
支付寶小程序它是什麼？
顧名思義，支付寶小程序它就是手機應用嵌入支付寶客戶端的一種方法，與微信小程序需要微信支持一樣，有以下特點：
- 基於 Web 技術，學習成本低
- 一套代碼，同時支持 iOS 和 Android，接近原生體驗
- 提供豐富的組件和 API(比如獲取用戶信息、本地存儲、支付功能等)
開發工具界面預覽
支付寶小程序頁面的四種類型的文件
每個支付寶小程序頁面都由這四個文件構成：
axml--------類似於html
acss--------類似於css
js -----------JavaScript文件
json---------項目配置文件
如圖：
全局配置
app.json，是小程序的全局配置，用於配置小程序的頁面列表、默認窗口標題、導航欄背景色等。
app.acss 定義了全局樣式，作用於當前小程序的所有頁面。
上例中的 page 為框架支持的特殊選擇器，會匹配框架提供的頁面根節點容器。
app.js 用於註冊小程序應用，可配置小程序的生命週期，聲明全局數據，調用豐富的 API，如以下獲取用戶授權及獲取用戶信息 API 等。
可以看到，全局的邏輯代碼放在 App({})中，聲明瞭全局數據 todos 、 userInfo ，以及全局方法 getUserInfo()。
todos 全局數據中已經存儲了一些數據，即 Todo App 小程序中已有的一些待辦事項。
全局方法 getUserInfo() 調用了授權 API my.getAuthCode，以及獲取用戶信息 API my.getAuthUserInfo ，並將獲取到的用戶信息存儲在 userInfo 中。
頁面樣式
acss（AntFinancial Style Sheet）用於描述頁面的樣式。它是一套樣式語言，用於描述 axml 的組件樣式，決定 axml 的組件應該怎麼顯示， acss 具有 css 大部分特性。與 css 相比acss有一些擴展的特性：
（1）rpx
rpx可以根據屏幕寬度進行自適應，1rpx = 0.5px = 1物理像素。
（2）內聯樣式
組件上使用class，style 屬性來控制樣式
style屬性：style接收動態的樣式，樣式在運行時會進行解析，儘量避免將靜態的樣式寫進style中，以免影響渲染速度。
<view>
class屬性：用於指定樣式規則，屬性值是樣式規則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，之間用空格分隔。一般情況下靜態的樣式統一寫到class中。
<view>
（3）全局樣式與局部樣式
全局樣式定義在app.acss中的樣式，作用於每一個頁面。
局部樣式在 Page 的acss文件中定義的樣式，只作用在對應的頁面，並會覆蓋app.acss中相同的選擇器。
事件
什麼是事件？
事件綁定的寫法同組件的屬性，以 key、value 的形式。
key 以on或catch開頭，然後跟上事件的類型，onTap, catchTap
value 是一個字符串，需要在對應的 Page 中定義同名的函數。不然當觸發事件的時候會報錯。
（1）在組件中綁定一個事件處理函數。
如onTap，當用戶點擊該組件的時候會在該頁面對應的Page中找到對應的事件處理函數。
例如：
（2）在組件中，根據條件判斷，展示對應結構或數據；
例如1：
當nextPage<=totalPage並且totalPage不為1時，展示點擊加載更多，否則，nextPage>totalPage且totalPage不為1時，展示全部加載完成；
例如2：
If else語句，需2個view組件，上圖a:if作為真條件語句，a:else作為假條件語句，分別展示對應結構，與例如1相似；
頁面結構
官網頁面結構模版文件：
使用 <view>,<image>,<text>,<button>,<label>,<checkbox>,
來搭建頁面結構以及通過 Mustache 語法兩對大括號（{{}}）綁定 todos 數據。
Add Todo 頁面
add-todo.json 聲明自定義組件名稱和路徑：
add-todo.json
add-todo.axml
add-todo.axml 為頁面結構模版文件：
此頁面的兩個核心功能為：
使用 組件接收用戶輸入。
<add-button>是一個自定義組件，可將一些功能完整的代碼封裝為自定義組件，便於在其他地方複用。/<add-button>
開發常見問題
navigator中url的參數拼接
<navigator>
/<navigator>
小程序高度設置100%
一個最簡單直接的方法，將單位設置成 vh即可。
.loading{
width: 100%;
height: 100vh;
}用setData更改data中某個對象的值
data: {
controls: [
{
id: 1,
iconPath: 'http://***/images/wx_app_img/location_new.png',
position: {
left: 320,
top: 360,
width: 40,
height: 40
},
clickable: true
},{
id: 2,
iconPath: 'http://***/images/wx_app_img/customer_cycle_new.png',
position: {
left: 320,
top: 400,
width: 40,
height: 40
},
clickable: true
},{
id:3,
iconPath:'http://***/images/wx_app_img/scancode_1.png',
position:{
left:100,
top:500,
width:355,
height:50
},
clickable: true
}
]
},
//更改方法
getSystemInfoPage() {
let left_2 = 'controls[2].position.left';
let top_0 = 'controls[0].position.top';
let top_1 = 'controls[1].position.top';
let top_2 = 'controls[2].position.top';
that.setData({
[left_2]: (res.windowWidth - 355)/2,
[top_0]: (res.windowHeight - 290),
[top_1]: (res.windowHeight - 220),
[top_2]: (res.windowHeight - 130)
})
}今天的文章就到這裡，謝謝各位觀看。
閱讀更多 herry菌 的文章
