首頁(yè) 小程序開(kāi)發(fā) 正文

支付寶小程序開(kāi)發(fā)教程（支付寶小程序開(kāi)發(fā)教程）

小程序開(kāi)發(fā) 2023-02-14T20:35:17 3464

今天給各位分享支付寶小程序開(kāi)發(fā)教程的知識(shí)，其中也會(huì)對(duì)支付寶小程序開(kāi)發(fā)教程進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開(kāi)始吧！本文目錄一覽： 1、支付寶小程序怎么用?支付寶小程序使用教程

今天給各位分享支付寶小程序開(kāi)發(fā)教程的知識(shí)，其中也會(huì)對(duì)支付寶小程序開(kāi)發(fā)教程進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開(kāi)始吧！

支付寶小程序怎么用?支付寶小程序使用教程

支付寶小程序使用教程：

支付寶小程序開(kāi)發(fā)者工具頁(yè)面截圖

支付寶此舉并不令人意外。從微信小程序初現(xiàn)雛形到正式發(fā)布，短短一年，其開(kāi)發(fā)者平臺(tái)已經(jīng)積累了超過(guò)20萬(wàn)的開(kāi)發(fā)者。

在1月9日微信開(kāi)放小程序入口后，目前已有數(shù)千個(gè)小程序投入使用，更關(guān)鍵的是，微信利用“掃一掃”的調(diào)用方式將小程序的潛力放在線下，騰訊“連接線上線下”的野心已昭然若揭，而這也正是支付寶要做的。

雖然微信內(nèi)部不針對(duì)小程序建立“應(yīng)用社區(qū)”，但已經(jīng)有諸多第三方平臺(tái)成立了琳瑯滿目的“小程序商店”。

因此，背靠阿里巴巴集團(tuán)、同樣擁有至多線下場(chǎng)景的支付寶，也自然成為“小程序”絕佳的投放陣地，另外，支付寶本身極強(qiáng)的工具屬性，也符合張小龍口中“即用即走”的小程序應(yīng)用標(biāo)準(zhǔn)，而阿里巴巴本身具備的電商、O2O等基因能讓小程序在線下推廣環(huán)節(jié)高枕無(wú)憂。

不過(guò)，支付寶牌的小程序欠缺的是微信巨大的用戶基數(shù)與社交使用黏性?；谶@兩點(diǎn)，作為后來(lái)者的支付寶，則打算從三個(gè)維度發(fā)力。

1、讓開(kāi)發(fā)系統(tǒng)更“開(kāi)放”

支付寶小程序開(kāi)發(fā)者工具頁(yè)面截圖

電腦怎么用支付寶小程序

支付寶小程序是一種全新的開(kāi)放模式，它運(yùn)行在支付寶客戶端，可以被便捷地獲取和傳播，為終端用戶提供更優(yōu)的用戶體驗(yàn)。小程序開(kāi)放給開(kāi)發(fā)者更多的JSAPI和OpenAPI能力，通過(guò)小程序可以為用戶提供多樣化便捷服務(wù)。

支付寶小程序開(kāi)放給企業(yè)帳號(hào)，想要成為支付寶小程序開(kāi)發(fā)者，需要完成注冊(cè)、入駐以及小程序創(chuàng)建三步。

支付寶小程序怎么創(chuàng)建

通過(guò)以下步驟完成小程序創(chuàng)建，并獲取APPID。

第一步：創(chuàng)建小程序

通過(guò)小程序首頁(yè)，點(diǎn)擊“登錄管理中心”，進(jìn)入小程序管理中心，在頁(yè)面上點(diǎn)擊“創(chuàng)建小程序”。

一個(gè)賬號(hào)下最多可以創(chuàng)建10個(gè)小程序；未提交過(guò)審核的小程序可以刪除，刪除的小程序不在計(jì)數(shù)范圍。

第二步：填寫(xiě)小程序基礎(chǔ)信息

請(qǐng)準(zhǔn)確填寫(xiě)小程序的基礎(chǔ)信息，基礎(chǔ)信息不允許包含違禁詞，應(yīng)用信息修改規(guī)則如下。

上架前，應(yīng)用信息均可修改，不限次數(shù)。

上架后，應(yīng)用名／應(yīng)用英文名將不允許修改; 應(yīng)用簡(jiǎn)介、應(yīng)用描述、應(yīng)用類目這三個(gè)信息在新版本提審時(shí)每個(gè)自然月可修改5次，其他信息在新版本提審時(shí)可修改。

第三步：獲取小程序APPID

小程序創(chuàng)建成功后，可在小程序詳情頁(yè)查看APPID。

怎么開(kāi)發(fā)支付寶小程序

一.小程序框架結(jié)構(gòu)

1、小程序分為app和page兩層，app描述整體程序，page描述各個(gè)頁(yè)面。

2、app代表頂層應(yīng)用，管理所有頁(yè)面和全局?jǐn)?shù)據(jù)，以及提供生命周期方法，他也是一個(gè)構(gòu)造方法，生成app實(shí)例。每個(gè)小程序的頂層一般包含三個(gè)文件：app.js(應(yīng)用邏輯)， app.acss(應(yīng)用樣式) ，app.json(應(yīng)用配置) app.json用于全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。

以下是一個(gè)包含了部分配置選項(xiàng)的簡(jiǎn)單配置app.json。

復(fù)制代碼

{"pages": ["pages/index/index","pages/logs/index"],"window":{ "defaultTitle":"Demo" }}

3.page代表應(yīng)用的一個(gè)頁(yè)面，負(fù)責(zé)頁(yè)面展示和交互。每個(gè)頁(yè)面對(duì)應(yīng)一個(gè)子目錄，一般有多少個(gè)頁(yè)面，就有多少個(gè)子目

錄。它也是一個(gè)構(gòu)造函數(shù)，用來(lái)生成頁(yè)面實(shí)例。page由四個(gè)文件組成，文件類型分別是：js（頁(yè)面邏輯） axml（頁(yè)面

結(jié)構(gòu)） acss （頁(yè)面樣式表） json（頁(yè)面配置），具體請(qǐng)【參考地址】

二.小程序調(diào)試

1.模擬器調(diào)試ide模擬器提供了以下功能：設(shè)備模擬（尺寸精度等），編譯日志、編譯錯(cuò)誤提示、刷新，支付寶JsAPI模擬以及位置、藍(lán)牙、啟動(dòng)參數(shù)等模擬接口自定義配置（如下圖）

2.調(diào)試工具：配合模擬器，ide提供了定制化的 chrome devtool，在其基礎(chǔ)上提供比如 axml 等擴(kuò)展。默認(rèn)展示：

AXML，基于小程序元素的 dom、css 調(diào)試

Console，運(yùn)行日志、錯(cuò)誤查看

Storage，緩存數(shù)據(jù)查看、編輯

Sources，源碼查看、斷點(diǎn)調(diào)試

Network，網(wǎng)絡(luò)資源、請(qǐng)求查看

3.真機(jī)調(diào)試真機(jī)預(yù)覽需要注意以下三點(diǎn)： 1）首先你得提供一個(gè) APP ID（如果你還沒(méi)有申請(qǐng)，請(qǐng)前往開(kāi)放平臺(tái) 申請(qǐng)）

2）生產(chǎn)環(huán)境的預(yù)覽有權(quán)限限制，你需要選擇推送自己或者對(duì)應(yīng)的開(kāi)發(fā)者(該 APP ID 下添加的開(kāi)發(fā)者）

3）我們提供生產(chǎn)環(huán)境的調(diào)試工具，選中開(kāi)啟真機(jī)調(diào)試工具即可

二、支付寶小程序前端樣式的設(shè)計(jì).acss樣式詳解

在視頻中已經(jīng)說(shuō)過(guò)了，小程序的設(shè)計(jì)思想和原生app的設(shè)計(jì)思想頗為相似，基本的應(yīng)用單元為頁(yè)面。當(dāng)然對(duì)于一個(gè)頁(yè)面來(lái)說(shuō)每一個(gè)元素的放置位置在哪兒以及顯示成什么樣子這個(gè)是由樣式來(lái)決定的。我們知道在web開(kāi)發(fā)中樣式是在css文件中規(guī)定的，叫做層疊樣式表 (Cascading Style Sheets)。其實(shí)在APP中樣式的約束也是使用css，在支付寶小程序中也是使用css不過(guò)文件的后綴是.acss而且對(duì)css3進(jìn)行了擴(kuò)充而已。

那么在支付寶小程序中的.acss和微信小程序中的.wxcss沒(méi)有什么兩樣。上邊已經(jīng)說(shuō)了.acss其實(shí)包含了css3那么它還有一些新的特性是css3中不具備的，讓我們一一看看

第一次看到這個(gè)東西也能猜到他是干什么用的。在css中我們知道規(guī)定大小一般使用像素(px)這個(gè)單位。比如顯示生活中我們說(shuō)房子128㎡那這兒的單位是平方米，在開(kāi)發(fā)中需要更加精準(zhǔn)的大小就是px像素。像素就非常精細(xì)了因?yàn)樵谖覀冿@示屏幕中像素是最小的顯示單元。這個(gè)道理如果不懂的話就找個(gè)LED屏幕仔細(xì)看，LED屏幕上一個(gè)一個(gè)的發(fā)光二極管可以想象為像素。

我們知道手機(jī)屏幕有大有小，就拿iPhone來(lái)說(shuō)，iPhone 6 plus比iPhone 5要大。那么就說(shuō)明plus的像素比5要多。對(duì)比：

加入有一個(gè)160px寬度的紅色矩形在這兩種手機(jī)中的位置如下：

rpx（responsive pixel）可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。如何自適應(yīng)呢？看下邊的分析：

看下圖：

在模塊化開(kāi)發(fā)中我們有時(shí)候不得不在頁(yè)面中使用其他的第三方庫(kù)的樣式，而第三方庫(kù)的樣式是保存在第三方包中的，我們不可能全部復(fù)制到我們的.acss文件中，那最好的辦法就是導(dǎo)入了。在樣式表中導(dǎo)入其他外聯(lián)樣式表。

當(dāng)然仍舊支持內(nèi)聯(lián)樣式和class屬性制定樣式類，如

選擇器和css3的保持一致。一般有class=”test”類選擇器和id=”test”的id選擇器。當(dāng)然在支付寶小程序的樣式中特殊的地方就是：

※ .a- 或者 .am-為前綴的選擇器已經(jīng)被系統(tǒng)占用所以不要使用；

※ 不能使用屬性選擇器，例如,以下寫(xiě)法不被支持：

我之前說(shuō)過(guò)小程序開(kāi)發(fā)的應(yīng)用單元為頁(yè)面。其實(shí)我們?cè)?axml中寫(xiě)的頁(yè)面并不包含頁(yè)面容器，就相當(dāng)于我們做一個(gè)頁(yè)面但是body標(biāo)簽不用寫(xiě)那如果我們要改變整個(gè)頁(yè)面的背景怎么辦呢?其實(shí)有一個(gè)固定的選擇器。例如：

可以通過(guò) page 元素選擇器來(lái)設(shè)置頁(yè)面容器的樣式，比如頁(yè)面背景色:

在你想改變頁(yè)面容器的頁(yè)面中定義該樣式也可以，全局定義也可以，例如我想將test這個(gè)頁(yè)面的頁(yè)面容器背景設(shè)置為藍(lán)色，就可以再pages目錄下的test目錄下找到test.acss在其中定義page的樣式

下節(jié)是視圖層講解，如果有任何問(wèn)題可以再下方給我留言或者發(fā)郵件到 weiyongqiang@weiyongqiang.com 我在收到郵件后會(huì)回復(fù)。

支付寶小程序開(kāi)發(fā)教程（支付寶小程序開(kāi)發(fā)教程）

支付寶小程序播放視頻2018-10-09

2020.1.17更新：

現(xiàn)在支付寶官方文檔有視頻播放組件了

以下是原文內(nèi)容

翻了一下支付寶小程序的開(kāi)發(fā)文檔，好像并沒(méi)有視頻播放組件提供，但是卻有webview可以內(nèi)嵌html5頁(yè)面。

步驟：

1、添加webview白名單：螞蟻金服開(kāi)放平臺(tái)——目標(biāo)小程序詳情——設(shè)置——開(kāi)發(fā)設(shè)置——H5域名配置

2、小程序詳情：

? ? a、axml內(nèi)容：web-view src="http://域名/video頁(yè)面.html?id={{movieId}}managementId={{managementId}}" /

? ? ????官方文檔說(shuō)明web view組件會(huì)覆蓋整個(gè)頁(yè)面，所以頁(yè)面上只有這個(gè)組件（更多詳情請(qǐng)看官方文檔）

? ? b、video.html頁(yè)面（在白名單域名的那個(gè)服務(wù)器里放）里就是一個(gè)video標(biāo)簽，還有對(duì)應(yīng)的js，不懂的可以自己去找找資料，在這就不班門(mén)弄斧了，注意加上meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"標(biāo)簽

3、萬(wàn)事俱備，看效果（丑了點(diǎn)但是功能可以哈）