支付宝小程序开发体验
在使用過程中想到一點記錄一點,只是個人感想。
-
支付寶小程序的底層應該是React Native的,但是,小程序界面的語法,跟weex更接近。比如,.axml文件,相當于<templete>標簽;.acss文件,相當于<style>標簽;.js文件,相當于<script>標簽。
利用相同的文件名稱這一點,將三者聯(lián)系起來。 -
提供了TODO和demo兩個模板,這個很不錯。特別是demo這個,可以當做手冊參考,挺好的。感覺應該再提供一個單頁面的空白工程模板。用熟練了之后,還是空白工程最好,不用刪除了。
-
“新建文件夾”或者“新建文件”,只有右鍵菜單,沒有菜單選項,有點小奇怪。“新建頁面”選項有點奇怪,出來一個無法辨別類型的文件。期望中,應該是出現(xiàn)一個文件夾,自動生成相同名字的4個文件(.axml, .acss, .js, .json)
-
斷點調試,保存文件后自動刷新,輸入APPID之后可以真機預覽,都是很好的功能。
-
tabbar在app.json中配置,不能動態(tài)修改。這個有點限制。比如,節(jié)日期間自動改變tabbar的文字和圖標就很難實現(xiàn)了。
-
.json文件中對象成員,數組的最后一項不能帶逗號,(比如app.json)。js文件是可以的,(比如app.js)。
-
不會自動保存,需要手動保存。沒有保存文件菜單,右鍵菜單也沒有,需要使用“command + s”菜單快捷鍵。對于記不住快捷鍵的使用者是個小麻煩。另外,這個快捷鍵只是保存當前文件,暫時還沒有找到保存所有文件的方法。打開文件的頂部標簽如果有個*,說明沒有保存,記得切過去,“command + s”一下。
-
編輯,回車換行的縮進,有時候感覺很傻的,跟webstorm還有差距。有時會出現(xiàn)莫名其妙的錯誤。將鼠標放到最前面,回退一下,可能就好了。
-
點擊的響應函數,在Page中可以寫成普通函數的形式,也可以寫成箭頭函數的形式。都可以正確響應點擊事件,沒有this的指向問題,不需要bind,估計是框架在js和axml之間做了bind。Page中的響應函數都寫成函數的形式,因為有時候要用到異步的形式,async,這個箭頭函數不支持。
-
文件夾的名字不要命名為api,不然import的時候總是報錯,原因都找不到。
-
刪除文件操作盡量脫離IDE,否則有造成卡的風險
-
import, Promise, async, await等ES6的內容都可以支持。
-
代碼復制過來之后,經常會出現(xiàn)空格導致的錯誤。手動刪除空格,重新排一下版,基本上就可以了。
?空格錯誤.png
將圖上那個小紅色回退,刪除掉,保存,不再出現(xiàn)就可以了
-
location.js也是不允許的文件名稱,可以考慮用position.js代替
-
import可以是相對路徑,也可以是絕對路徑。絕對路徑開始的/對應工程目錄,有時候還是很方便的。絕對路徑,IDE會自動轉換為相對路徑。
-
import第三方庫,需要先用npm安裝,然后直接填名字就好,不需要帶路徑。node_modules文件夾在工程的根目錄下,不會再IDE中顯示。
自己管理第三方庫,沒有框架幫忙,稍微有點麻煩。比如,moment這個庫就能正常安裝,正常使用。但是想antd-mobile這么大的庫,安裝之后編譯都過不了。antd-mobile是帶H5界面的,這種庫不適合引入小程序中,最好是跟界面無關的工具類庫。 -
自定義分析接口現(xiàn)在能用了,但是管理界面配套的配置項還沒放開,據說這項功能現(xiàn)在還沒好。
音頻,視頻等功能還沒有放開,不過內部資料還是有的,接口能用。目前只看到播放功能,錄音功能還是沒有的。 -
芝麻認證,需要簽約,查一下需要錢的。人臉識別,身份證識別等功能都是有的。
-
.gitignore文件是沒有的,內容可以從前端或者RN項目復制一份。至少下面兩項可以考慮包括:
node_modules/ , .tea/ -
如果習慣了WebStrom,照樣可以用的,代碼編輯保存都正常進行,只用IDE進行編譯,預覽,調試,真機驗證。用兩個工具在一份代碼上工作,可以很好地取長補短。至于習慣了VSC的,單用IDE就差不多了,兩者風格很相近啊,用兩個的意義不大。
-
app.acss文件是可選的,個人感覺還是不要為好,讓每個頁面保持相互獨立。
至于公共樣式,可以考慮新建一個文件夾,里面放多個頁面共用的樣式,用有意義的名字命名。需要用到的地方,導入再用,這樣意圖更明顯。 -
默認是標準盒子模型,是縱向的。如果涉及到橫向布局,比如表格的一行,可以考慮采用彈性盒子模型,只要在容器類選擇器加上display: flex; 就可以了。
-
接口my.httpRequest在模擬器中可以通,在真機上會遇到“無權跨域”的問題,可以通過配置http白名單的方式解決。支付寶要退出重啟,讓修改生效
-
如果是阿里集團域名,會出現(xiàn)“無權跨域”,又不能添加白名單的情況,提示“無法添加阿里巴巴集團域名”。解決方法是找阿里對應的人說明情況,走審批流程。
-
頁面跳轉深度不能超過5,這個限制要注意。重新加載的話,返回的內容會變。my.reLaunch和my.redirectTo都可以降低頁面深度。
-
如果不是特別需要,tabbar就不要引入了,限制太多,不夠靈活。
-
一般情況下選擇器用Picker組件比較好,返回的是index。數組還是用Object的數組好,因為一方面要顯示給用戶看,另一方又可以傳數據給后臺。
-
Picker-view可以用于多級選擇,比如三級地址選擇。不過它和內容在同一層次,沒有Modal彈出效果。可以通過a:if={{show}}的方式來控制顯示與隱藏。比如點一下按鈕,顯示選擇界面;再點一下,隱藏選擇界面,更新選擇內容。這是手機上比較常見的一種交互方式。
這種用法,有個限制條件,就是級數要事先確定 -
小程序的信息正向傳遞還是比較方便地,也就是說,A -》B;A要傳信息給B,只要掛在url后面就可以了,中文也可以,不需要編碼。B中只要在onLoad(query)函數中直接取就可以了,都是對象的成員,比較方便。
-
小程序沒有信息的回傳機制,也就是說,A -》B;假如B是信息錄入頁面,但是B中的信息沒有辦法回傳給A。變通的方法有兩個,一個是通過全局變量,另外一個是通過本地存儲。
-
在demo中,有個總體樣式
其中的box-sizing: border-box;表示盒模型中,將padding和border都計入width、height,這是推薦的做法
box-sizing
- 在demo中,經常有flex: 1; 一般用在子組件中,這個等價于
彈性盒模型在小程序中用得比較多,需要重點看看。
flex設置成1和auto有什么區(qū)別
- 從H5遷移過來的代碼,比如dva+antd-mobile布局的界面,像素單位需要將px修改為rpx。設計的時候,按照iPhone6的尺寸,寬度就按照750px來設計,應該剛好能對上。
UI設計的時候,按照iPhone6的尺寸設計,單位是px,實現(xiàn)的時候,小程序的單位用rpx,尺寸數字是一樣的。
至于1像素的分隔線,用2rpx和1px都是可以的,推薦用1px
單位還是建議用rpx,在IDE中調試時看到的是rem,這個在不同的手機上適配比較方便。當然,尺寸會根據不同屏幕進行拉伸。
rpx(responsive pixel)可以根據屏幕寬度進行自適應。規(guī)定屏幕寬為750rpx。如在 iPhone6 上,屏幕寬度為375px,共有750個物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
這段話是手冊中的,不是非常理解。印象中iPhone6的寬度是375×667點,對應到UI的分辨率是750×1334 px
小程序手冊樣式一節(jié)
iPhone/iPad/Android UI尺寸規(guī)范
-
常見的html標簽,比如div、span都不支持,對應的應該是view、text,又不完全一樣。IDE提示有的標簽可以用,輸入的時候不提示的,很可能不支持。使用了不支持的標簽,結果就是紅屏。
-
form、piker、block、等標簽可以認為是不可見標簽,不顯示,不用放樣式。當然,放樣式也是可以的,作用相當于view,可以認為是容器。
-
縱向內容,用普通盒子模型來布局,橫向的,用彈性盒子模型來布局。這是比較取巧的方式。統(tǒng)一用彈性盒子模型來布局也是推薦的做法。
-
從demo來看,樣式采用基本的css語法,less的寫法估計不支持。
-
從組件的角度講,React的jsx比較方便,可以封裝一些操作。這里的templete相對就弱一些,只能是數據和顯示,沒有辦法將JS邏輯封裝到組件中。
-
目前還沒有事件emit機制,比如,程序模擬用戶點擊就沒法實現(xiàn)。
-
小程序中不能跳轉H5頁面,這會限制很多應用場景。比如銀行支付頁面,公安驗證,手機號驗證,等等都需要調用第三方的H5頁面來完成的,這些頁面,從小程序中就跳不過去了。
據說這個以后會放開,從小程序可以跳H5頁面,這個功能倒是值得期待。 -
antd-mobile是H5頁面的組件庫,跟小程序是不相容的,不應該引入。不過組件思想是可以借鑒的,可以考慮以小程序的基礎組件,按照antd-mobile的樣子,做一些組件出來。
-
關于兼容性,文檔中一般會有類似“基礎庫 1.5.0 開始支持,低版本需做兼容處理”的提示。
基礎庫版本可以通過接口my.SDKVersion查看。
接口是否可用,可以通過接口my.canIUse查看。
比如,查看收貨地址,在0.15.10的IDE中還不支持,這時的基礎庫還是1.4.1。
直接使用的話,IDE中會提示my.chooseAddress方法ide暫不支持,然后就中斷退出了,下面的代碼也不會再執(zhí)行。 -
組件方面,目前使用template,引入用import;至于include的用法就顯得比較奇怪。這里的組件和React中的組件差異很大。這里并不存在“父組件”和“子組件”之間的關系;這里是部分和整體之間的關系,最終整合為為一個對象,作為Page()函數的參數,輸入系統(tǒng)。
-
對于純展示,沒有交互的簡單組件,文檔模板中介紹的方法夠用了。不過,由于這里的數據時data成員中的一個對象成員,更新的時候,要更新對象的全部成員,不能只更新部分,否則其他部分會被清空,這是JS的一個特性,需要注意。
定義模板:
使用模板:
<template is="msgItem" data="{{...item}}"/> Page({data: {item: {index: 0,msg: 'this is a template',time: '2016-09-15'}} })現(xiàn)在,想要修改msg的值,如果只是像下面那樣寫,那么,index、time兩個字段就會被清空。
this.setData({item: {msg: 'new template',} }});可以考慮下面的寫法,能夠達到目的:
const newItem = this.data.item; newItem.msg = 'new template'; this.setData({item: newItem, });上面這種方式會帶來性能問題,不是很推薦,也可以考慮下面的方法:
this.setData({item.msg: 'new template', });-
對于特殊字符輸入,并沒有轉義。比如要輸入“< 上一頁”這樣的字符,輸入'< 上一頁'是沒用的。應該直接輸入' < 上一頁'。注意<前面要有字符,不然會被解釋為標簽,那就紅屏了。至于'下一頁 >'這樣的,則沒有副作用,特殊字符在最后,一般沒關系。
-
view相當于div,是塊級元素;text相當于span,是行內元素。默認的情況下,是普通盒子模型,是縱向的布局,這種模式下,實現(xiàn)文字居中,可以用這兩句text-align: center; line-height: 60rpx; // 容器高度。
如果要采用彈性盒子模型,需要加這句display: flex;,默認是橫向的布局,這種模式下,實現(xiàn)居中,可以用這兩句justify-content: center; align-items: center;,這種居中,不但適用于文本,也適用于圖片等。
模式一:普通盒子和彈性盒子混合,特點是有些容器沒有display: flex;這句
模式二:全部采用彈性盒子模型,特點是很多地方可以看到display: flex; flex: 1;這兩句
目前來看,還是模式一比較方便;當然用模式二也是可以的。
-
樣式,推薦用class,如果沒有必要,style就免了。樣式,布局,邏輯分開為3個文件,這是初衷。這個和React的JSX是完全不同的理念。style中可以放胡子變量,用作動態(tài)樣式。靜態(tài)樣式,推薦用class。當然,動態(tài)樣式,也是可以用class,方法是用胡子變量拼接字符串。比如
<text class="compareYesterday {{creditAmtFromYTDColor}}">{{creditAmtFromYTD}}</text> -
撥打電話接口my.makePhoneCall(number) 在模擬器,真機上表現(xiàn)不一致。在模擬器上,會跳出選擇對話框,選擇后,也能知道選了哪個按鈕,(確定還是取消)。在安卓真機上,直接跳出程序,到了撥打電話頁面。在iOS真機上,會跳出選擇對話框,但是用戶到底選了哪個按鈕,沒法判斷。
-
開發(fā)者能刷的二維碼經常失效,好像代碼改了,過了一定的時間,就會失效。將產品和測試都設置為開發(fā)人員,隨時看頁面狀態(tài),是個可行的方法。但是,二維碼經常失效,帶來了很大的麻煩。
-
如果設置為體驗版,有效期是7天,并且代碼改了也不會導致二維碼失效。這個功能可以用來測試。比如前后臺調試完成了,部署到測試服務器,通過IDE,上傳一個版本,設置為體驗版。把測試或者產品等相關人員設置為體驗者,就可以用支付寶掃碼使用了。至于提交審核,灰度和上線,可以再上傳測試好的產品,同時切換到生產服務器。至于版本號,讓IDE自己增長吧,做好相應的記錄就好了。
-
對于測試人員,設置為體驗人員,可以操作。不過,還是把測試人員設置為開發(fā)人員比較好。舉個例子,如果測試人員用自己的支付寶賬號測試,出現(xiàn)了bug,怎么調?如果測試人員的身份也是開發(fā)者,那么開發(fā)人員只要退出自己的IDE,用測試人員的賬號登錄IDE,數據、環(huán)境、復現(xiàn)條件都是現(xiàn)成的。同時,也不影響測試人員用手機進行測試。改完后,也可以馬上發(fā)一個開發(fā)者的二維碼,可以讓測試人員馬上驗證一下bug是否修復。
一輪測試完成之后,將相應的bug都改掉,再發(fā)一個穩(wěn)定的體驗版二維碼,進行一輪回歸,兩三輪之后估計就差不多了。 -
包大小限制為3M,在0.17.0版本以前的IDE沒事,但是之后的版本,會在本地編譯打包的時候報錯,無法生成真機預覽的二維碼。
這會帶來一個明顯的限制,就是npm上的第三方庫就不要用了。比如,用來處理時間的moment,大小為3M多,基本上就超過限制了。
當然,一個可替代的方法是用.min.js的壓縮文件替代,可能會小一點
對于隱藏文件.git不計入大小,但是對于node_modules記入大小 -
支付寶小程序支持npm包管理,但是由于3M限制,以及IDE 0.17.0以后對于node_modules大小缺乏優(yōu)化。(moment在低版本IDE可用,但是0.17.0以后就會超限)還是直接用鍵入js文件的方式比較好。
-
圖片壓縮接口,用IDE驗證,沒有作用。先my.chooseImage,然后馬上用my.getImageInfo看大小;然后用my.compressImage,接著用my.getImageInfo看大小。結果發(fā)現(xiàn),前后兩次輸出一樣,沒區(qū)別啊。
不過圖片壓縮接口my.compressImage在真機上試驗還是有效果的,一般情況下,compressLevel保持默認的4就可以了 -
上傳接口my.uploadFile自帶loading,不需要額外添加my.showLoading
-
上傳接口my.uploadFile服務器返回的數據在data成員中,類型是string。只是一般服務器相應是一個對象,對錯的字段都不一樣。所以,這里可以考慮用JSON.parse(response.data),將字符串轉化為對象后再做進一步的處理。
網絡接口my.httpRequest在默認的json格式下,服務器返回的數據也在data成員中,類型是Object,不需要轉化,可以直接使用。
https://www.jianshu.com/p/1c3d7567c156
總結
以上是生活随笔為你收集整理的支付宝小程序开发体验的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 第三方qq登录接口
- 下一篇: 基金、社保和QFII等机构的重仓股排名评