在使用過程中想到一點記錄一點，只是個人感想。

• 支付寶小程序的底層應該是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中，有個總體樣式

page {background-color: #f8f8f8;border: 1px solid rgba(0,0,0,0);box-sizing: border-box; }

其中的box-sizing: border-box;表示盒模型中，將padding和border都計入width、height，這是推薦的做法
box-sizing

• 在demo中，經常有flex: 1; 一般用在子組件中，這個等價于

.item {flex: 1;} .item {flex-grow: 1;flex-shrink: 1;flex-basis: 0%; }

彈性盒模型在小程序中用得比較多，需要重點看看。
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的一個特性，需要注意。
  定義模板：

<!--index: intmsg: stringtime: string --> <template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view> </template>

使用模板:

<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', });

• 對于特殊字符輸入，并沒有轉義。比如要輸入“< 上一頁”這樣的字符，輸入'&lt; 上一頁'是沒用的。應該直接輸入' < 上一頁'。注意<前面要有字符，不然會被解釋為標簽，那就紅屏了。至于'下一頁 >'這樣的，則沒有副作用，特殊字符在最后，一般沒關系。

• 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

總結

以上是生活随笔為你收集整理的支付宝小程序开发体验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。