濟南小程序開發公司小貓科技:專注微信開發,濟南小程序開發,濟南微信小程序定制開發等業務!
手機版手機網站二維碼 微信版 微信二維碼 業務咨詢電話:159-5318-4521

你覺得支付寶小程序是什么?

發表于:19-11-24 19:33 閱讀()

大伽吼,有段時間沒發布原創文章了,今天小編給各位帶來一篇。關于支付寶小程序的文章。部分內容也是小編的一些理解和觀點,若有不對請指正。

支付寶小程序與微信小程序

大多數普通人都知道微信小程序,但是支付寶小程序似乎很少有人知道,除了業內人士。首先微信的用戶量更為龐大,而且使用率非常的高,幾乎是每天必用的社交軟件,微信下的產品便非常容易推廣,因此可見微信小程序的數量現在已經非常多了,騰訊一直以來的最大優勢就是用戶量龐大。而支付寶大多數人也就是用來支付的。基本很少會拿來社交。但只要你的產品更貼合支付寶,那你的產品即可在支付寶小程序中大放異彩了。比如共享單車等,即開即用即支付,而在支付方面,人們還是更喜歡用支付寶,至于為什么微信支付為何趕不上支付寶支付,軟件的優劣屬性已經確定了。

進入今天的正題:

支付寶小程序它是什么?

顧名思義,支付寶小程序它就是手機應用嵌入支付寶客戶端的一種方法,與微信小程序需要微信支持一樣,有以下特點:

  1. 基于 Web 技術,學習成本低
  2. 一套代碼,同時支持 iOS 和 Android,接近原生體驗
  3. 提供豐富的組件和 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 style="color:{{color}}"></view>

class屬性:用于指定樣式規則,屬性值是樣式規則中類選擇器名(樣式類名)的集合,樣式類名不需要帶上.,之間用空格分隔。一般情況下靜態的樣式統一寫到class中。

<view class="bg"></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 為頁面結構模版文件:

你覺得支付寶小程序是什么

此頁面的兩個核心功能為:

使用<input/> 組件接收用戶輸入。

<add-button>是一個自定義組件,可將一些功能完整的代碼封裝為自定義組件,便于在其他地方復用。

開發常見問題

navigator中url的參數拼接

<navigator url="../detail/detail?
 shop_name={{item.name}}&
 shop_usable_num={{item.usable_num}}&
 shop_empty_slot_num={{item.empty_slot_num}}&
 shop_bussiness_stime={{item.bussiness_stime}}&
 shop_bussiness_etime={{item.bussiness_etime}}&
 shop_sname={{item.sname}}&
 shop_description={{item.address}}&
 consumption={{item.consumption}}">
</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)
 })
}

今天的文章就到這里,謝謝各位觀看。




top
11选5开奖结果查询
股票融资买卖时如何操作 上海哈灵麻将 点点金配资 中国股票指数有哪些 贵州快三开奖结果全部 浪潮信息股票怎么样 福建快3开奖结果今 功能强大的股票分析软件 江苏快三免费全天计划 全球股票指数软件 免费下载真人麻将 qq四川麻将缺什么来什么 股票涨跌的计算方式 手机麻将代理 期货配资 广西快3-一定牛