支付寶小程序公測(cè)很久了，也早早的開放了申請(qǐng)通道，但是有關(guān)支付寶小程序的開發(fā)文本和思路介紹太少，因此我們找到了這樣一篇入門心得展示給大家作為參考。

1.用戶授權(quán)：

支付寶小程序這塊和微信小程序不一樣，主要有靜默授權(quán)和用戶點(diǎn)擊授權(quán)，主要思路：

my.getAuthCode({

? scopes: 'auth_user', // 主動(dòng)授權(quán)（彈框）：auth_user，靜默授權(quán)（不彈框）：auth_base

? success: (res) => {

? ? if (res.authCode) {

? ? ? // 認(rèn)證成功

? ? ? // 調(diào)用自己的服務(wù)端接口，讓服務(wù)端進(jìn)行后端的授權(quán)認(rèn)證，并且種session，需要解決跨域問(wèn)題

? ? ? my.httpRequest({

? ? ? ? url: 'http://isv.com/auth', // 該url是自己的服務(wù)地址，實(shí)現(xiàn)的功能是服務(wù)端拿到authcode去開放平臺(tái)進(jìn)行token驗(yàn)證

? ? ? ? data: {

? ? ? ? ? authcode: res.authcode

? ? ? ? },

? ? ? ? success: () => {

? ? ? ? ? // 授權(quán)成功并且服務(wù)器端登錄成功

? ? ? ? },

? ? ? ? fail: () => {

? ? ? ? ? // 根據(jù)自己的業(yè)務(wù)場(chǎng)景來(lái)進(jìn)行錯(cuò)誤處理

? ? ? ? },

? ? ? });

? ? }

? },

});

1.1、靜默授權(quán)scopes： ‘a(chǎn)uth-base’：一般進(jìn)入小程序如果寫在app.js或者index.js默認(rèn)授權(quán)。不需要點(diǎn)擊授權(quán)了。注意：不會(huì)顯示授權(quán)彈框的

1.2、主動(dòng)授權(quán) scopes： ‘a(chǎn)uth-user’：顯示授權(quán)窗口

1.3、如果用戶沒有授權(quán)，再讓用戶授權(quán)。如果已經(jīng)授權(quán)了，可以將token放在緩存中，如果用戶授權(quán)過(guò)，則下次進(jìn)入小程序通過(guò)獲取緩存中的token來(lái)判斷是否再次授權(quán)。獲取用戶的access_token來(lái)做其他的操作：

注意：用戶如果授權(quán)過(guò)，想清除的話，開發(fā)者工具可以點(diǎn)擊右下角有個(gè)四方格icon，查看一下，如果已授權(quán)，點(diǎn)擊已授權(quán)button點(diǎn)擊確定則清除授權(quán)信息。如下圖所示：

如果是手機(jī)上授權(quán)過(guò)，小程序右上角點(diǎn)擊三個(gè)點(diǎn)，出現(xiàn)關(guān)于，再選擇右上角三個(gè)點(diǎn)，選擇設(shè)置，看到用戶信息，點(diǎn)擊刪除授權(quán)，這樣下次測(cè)試授權(quán)就可以重新開始~~~

2. 使用scroll-view橫向滑動(dòng)效果

看開發(fā)者文檔給的demo寫的，首先不太明白所謂的id，以及js內(nèi)頭部引用的const order =['x','x','x']，其次布局的時(shí)候發(fā)現(xiàn)所有的圖片不在一行顯示，每個(gè)子元素用display：inline-block布局，最外層的class設(shè)的width：100%;沒效果;去社區(qū)提問(wèn)，有個(gè)好心的技術(shù)提供的解答方案沒能解決我的問(wèn)題，后來(lái)發(fā)現(xiàn)在最外層的class上加上white-space: nowrap;即可。。沒想到，還是css不熟的原因啊，不能靈活運(yùn)用每個(gè)樣式。下面貼出我的demo樣式僅供參考：