淘寶商家應用（阿里小程序）開發踩坑記錄（持續更新中）

阿里正在將淘寶無線開放平臺等業務整合爲商家應用，相似於支付寶小程序，也就是以小程序的形式進行淘寶天貓店鋪的展示、營銷。

最近正在開發商家應用小程序，踩了無數坑，本來覺得微信小程序已經夠坑了，沒想到這個幾乎照搬微信小程序模式的淘寶小程序更坑。畢竟剛起步，抱怨也沒用，將我遇到的問題先記錄下來，讓後來者能夠少花一些時間。

微信小程序遇到開發問題時有一個社區平臺能夠交流。優勢是開發者之間能夠互相交流，有一些回帖很是有價值；缺點是提問不必定能獲得官方解答，不少帖子可能會石沉大海。

而阿里系這邊，反饋問題不能經過社區，只能使用工單系統。優勢是有問必答，工做日通常半小時內就能夠看到回覆，幾句話說不清的還能夠轉釘釘詳聊；缺點則是回答者對專業問題幾乎一竅不通，只能算是小程序開發者與官方平臺開發者的傳話人，與全部客服系統同樣，只會把平臺文檔裏已經有的東西車軲轆話來回說，除非你用明確的語言表示本身這個問題確實不在文檔裏。並且一旦客服表示問題複雜邀請你進了釘釘詳聊，那這個問題可能很快能解答，也可能再也沒有迴音。另外，工單系統看上去是10年前開發的樣子，貼圖、貼代碼都極不友好，搜索功能也幾乎是廢棄狀態。

再多吐槽一句，文檔系統也很是糟糕，V1和V3文檔同時存在並運行，不少文檔中的連接都沒有更新，你會在逐步的瀏覽中前後打開v一、v3甚至支付寶小程序的文檔，而更復雜的TOP接口文檔，可能會讓你進一步陷入迷惑，甚至連你想要的功能應該屬於哪一個分類都難以肯定。

言歸正傳，記錄下我開發中遇到的問題。

發起網絡請求

我本來已經封裝了一套基於my.request的api工具，結果然機一調，發現不能用。

文檔沒有刪乾淨，仿微信的my.request已經被廢棄了。

對於雲應用，如今官方強推的惟一用法是cloud.application.httpRequest

https://miniapp.open.taobao.com/docV3.htm?docId=118538&docType=1

父組件不能定義自定義子組件的class

好比

<aaa class="test" />

這種寫法是無效的，父組件定義到自定義組件上的樣式會被丟棄。

微信小程序和VUE中，像這樣的定義在最終會與組件最外層內部定義的class合併到一塊兒，但在淘寶小程序裏就是不行（官方提供的組件卻是能夠）。

個人臨時處理方式是：

<view class="test">
    <aaa />
</view>

而後樣式寫:

.test > view

若是你用了stylelint之類的校驗工具，記得將view這個標籤關鍵字加到白名單。

也許也能夠加一個名叫class的props來迂迴實現，待驗證

上傳圖片

上傳圖片的實現折騰了我好久，而這幾乎是全部開發者繞不開的問題，我很詫異官方居然沒有及時更新文檔來指出。正確的方法在本節內容的最後，前面的試錯方法是行不通的。

首先，文檔確實存在了這樣一個接口：my.uploadFile

因此個人第一反應就是用它來實現圖片上傳，微信小程序也是這麼作的。

實際上my.uploadFile就是一個傳遞流的HTTP請求，我但願將圖片上傳到阿里雲OSS服務，所以，我須要手寫模擬出OSS上傳所需的各類參數。

參考了這篇文檔來實現。

注意，這是在小程序客戶端實現根據密鑰生成簽名，私鑰暴露到了前端，理論上有安全隱患。

拼完參數之後，還要指定上傳服務器地址，也就是HTTP請求的URL。

例如：https://my-oss-name.oss-cn-hangzhou.aliyuncs.com

四級域名是阿里雲OSS的bucket名稱。

折騰完上面這些之後，在本地開發者工具上測試沒有問題，但預覽和真機調試時發現報錯。
錯誤信息爲

{errorCode:4,errorMessage: "no premission"}

工單反饋才知道，my.uploadFile限制了域名。只容許如下域名規則：

miniappcloud.taobao.com
media.taobao.com
upload.media.aliyun.com
miniappcloud-common-file.oss-cn-zhangjiakou.aliyuncs.com
\\S\\.alicdn\\.com$
\\S\\.mmstat\\.com$

簡單來講，就是my.uploadFile這個接口只有阿里內部服務可使用，沒法被普通開發者調用，應當屏蔽和廢棄。

上傳圖片如今只有一條路可走，就是改用阿里雲開發中的雲存儲

這裏問題又來了，文檔說，小程序關聯雲服務，只能在雲開發和雲應用裏二選一。

而咱們的後臺用的就是雲應用，難道就不給用雲開發裏的雲存儲功能了？

幸虧實際使用發現，即便選擇了雲應用，仍然可使用雲開發的雲存儲功能。不過，雲存儲的管理只能在開發者工具中進行。

注意，每次點擊開發者工具中的雲開發，都會自動在項目下建立server和client目錄，並將項目原來的文件包括node_modules所有挪到client下，若是你不但願目錄被改變，記得先啓用git，沒事別點這個按鈕

雲存儲的調用就不詳述了，但還有一個坑待驗證：

使用雲存儲上傳成功後，拿到的是一個cloud協議前綴的內部地址和一個URL。

文檔和客服的反饋都表示，這個URL不是永久有效的，也就是你若是想要訪問這個文件，須要先調用雲存儲的接口獲取臨時地址。

這個設計帶來一個麻煩的問題，不能直接把存儲的圖片地址賦值給image組件，由於image所需的URL只能異步獲取到，你須要本身再封裝一個組件用來顯示雲存儲圖片。

不過實際使用發現，上傳成功後得到的這個URL到目前爲止尚未過時，就先這樣用着了。

預覽和真機調試時，二維碼丟失全局參數

在編譯模式中添加的全局參數，本地調試都能生效，但預覽和真機調試時，這些參數都被丟棄了。在編譯模式裏的配置項只有默認頁面是生效的。

詢問工單後得知，只能自行添加參數。

首先點擊編譯成功後獲得的二維碼圖案，得到一串地址，相似這樣

https://m.duanqu.com?_ariver_appid=xxx&nbsv=0.1.2004151019.52&nbsource=debug&nbsn=DEBUG&channelId=1jOXeERZ54A_2IS7tG_0Co1du_0149_1vA&isRemoteX=true

而後須要將全局參數進行url編碼，好比原始參數

dev=true&id=123

編碼後變成

dev%3Dtrue%26id%3D123

做爲query參數的值，拼接到url上，變成

https://m.duanqu.com?_ariver_appid=xxx&nbsv=0.1.2004151019.52&nbsource=debug&nbsn=DEBUG&channelId=1jOXeERZ54A_2IS7tG_0Co1du_0149_1vA&isRemoteX=true&query=dev%3Dtrue%26id%3D123

最後在瀏覽器打開這段地址，而後進行掃碼。

每次真機調試都要這麼來一次，很是麻煩，不知道何時才能修正。

PC端基礎組件overlay運行不正常

PC端嘗試使用overlay組件實現彈窗效果。

要彈出一個居中的overlay，須要這樣配置：

<overlay
  visible="{{ visible }}"
  onRequestClose="onClose"
  align="cc cc"
  hasMask
>
彈窗內容
</overlay>

隨後發現兩個致命問題：

1. overlay層級沒法修改

彈窗內部若是有進行系統級彈窗的操做，好比執行my.chooseImage後，系統彈出的選擇相冊菜單被蓋在了當前彈層下方。
而且文檔中沒有關於overlay層級調整的相關方法。

1. overlay中有任意自定義組件，第二次彈出時一定崩潰

好比最簡結構

<overlay visible={{visible}}>
  <aaa />
</overlay>

當visible第二次被修改成true時，app崩潰，錯誤提示爲

worker render components is not sync! can not find id from path: 1-1-1-3-1:/src/components/aaa/index

這個問題客服只說轉給開發了，但至今沒有反饋，所以overlay沒法被實用，只能本身實現一個彈窗組件。

自定義組件的樣式是全局生效的

page的樣式只在page內生效，這是有共識的，但我沒想到的是component下定義的樣式居然會是全局生效的。

不一樣的自定義組件中出現同名樣式時，會互相影響和覆蓋。

而商家PC端如今官方強推的是使用擴展組件裏的路由系統（順帶一提這路由系統很是簡陋，使用又繁瑣），
若是使用了路由系統，就意味着全部頁面都是component，這時候這種全局scope就會嚴重影響開發。

臨時的解決方式是，手動在組件樣式最外層套上當前組件的class（用scss會比較方便）

PC端千牛使用遠程調試時沒法收到調試信息

按照文檔配置：

https://miniapp.open.taobao.com/docV3.htm?docId=118310&docType=1

能正常從千牛中啓動預覽包，能打開chrome上的devtool標籤頁，而且關閉當前的預覽應用時，能看到chrome彈出鏈接斷開的提示。

但預覽應用中執行的各類輸出控制檯信息，在chrome調試標籤頁都沒有反應，看不到任何變化和輸出。

工單反饋說：

目前發現 chrome 80.0.3985.0 及以上版本（也多是79以上，邊界沒有定位得很精確），能鏈接上小程序js環境，甚至能打斷點調試代碼，但就是看不到console輸出，直接在console裏輸入 console.log，也是不輸出的。此問題已知待解決，請嘗試用低版本chrome繞過。

我不想裝舊版本的chrome，有精力的同窗能夠試一下。

商家後臺千牛PC端應用上傳後，預覽碼沒法在千牛客戶端打開

商家後臺千牛PC端應用上傳成功，在版本管理-開發階段中能夠查看到，性能任務已經過，但查看並複製預覽碼後，在千牛的開發者設置中粘貼預覽碼並打開時，提示頁面不存在。

在本地調試時點擊預覽後複製二維碼並粘貼打開是正常的。

這實際上並非小程序自己的問題，而是千牛端即便處於登陸狀態，也可能有什麼相似session的東西過時了，須要手動從新登陸一下千牛。

hideLoading之後執行showToast無效

文檔裏寫了

在 my.showToast 以前調用 my.hideLoading，toast 被 my.hideLoading 覆蓋，將不展現。

若是我將異步請求封裝爲公共方法，在請求前showLoading，請求後hideLoading，結果就沒法在請求完成後顯示結果。

工單沒有對這個問題作出有效解答，實際測試發如今開發者工具上模擬時不會彈出toast，但真機卻能夠正常彈出。

分享在path裏添加的參數在終端打開時取不到

這算得上是一個大坑。

實際測試發現app.onLoad裏取不到，page.onLoad裏纔有。

經過分享打開小程序時，得從頁面onload的query裏取參數。

onLoad(query){
  console.log(query)
}

經過掃碼打開時，得從app的options裏取參數。

onLoad(options) {
  console.log(options.query)
}

這裏有一個很關鍵的問題，對商家應用來講，啓動參數是不可或缺的，好比營銷活動的id，沒有id，應用就不能進行任何實際操做或展現。

所以，我只能將初始化動做變成一個分幾步走的過程：

1. 建立全局的初始化promise對象
2. 從app.onLoad中獲取參數，若是沒有取到關鍵字，則跳過
3. 從page.onLoad中獲取參數，若是仍是沒有取到關鍵字，則進入模擬數據展現，使用模擬數據進入下一步

還記得前面二維碼不帶參數的問題嗎？如今提審時不能像微信那樣爲某個版本添加編譯參數，只能把組裝好參數的二維碼對應的URL貼到審覈備註裏，而應用審覈者常常不看備註直接掃碼打開應用，他看到一片空白時，就會拒絕經過。爲了增長過審概率，必須製做一個模擬數據展現模式。

1. 根據參數進行初始化動做，好比判斷運行環境，初始化api接口cloud實例，將活動id放到globalData裏等等。最後將初始化promise對象置爲resolved。
2. app或者頁面的後續動做都要在初始化promise對象完成後進行。關鍵在於cloud實例的初始化也是異步的，只有在cloud初始化完畢後，才能執行獲取數據等異步請求操做。

PC端千牛只能在page.onLoad裏接受參數

與前一個問題有微妙的不一樣。

生成的二維碼地址如：

https://m.duanqu.com?_ariver_appid=xxx&nbsv=0.1.2004161617.2&nbsource=debug&nbsn=DEBUG&query=dev%3Dtrue

並不能在app的onLoad裏拿到query信息。

只能在page的onLoad裏拿到整個options對象。

區別在這裏，文檔描述的正常場景中，onLoad的入參應該是一個query對象。我不肯定這種不協調的差別何時會被修正，建議將處理語句寫成:

let query = options.query || options

返回結果只有一個false，會自動變成空對象

後臺返回的內容要注意了，好比有個接口是檢測用戶是否會員或者檢測用戶剩餘遊戲次數，不要直接返回一個boolean或者number對象。

由於cloud.application.httpRequest這個接口我估計會用一個if條件來判斷後臺返回的data。若是後臺返回false或者0，前端拿到的最終結果老是一個空對象{}，前端也用if判斷就會出錯。

所以，確保全部接口返回的內容都是一個複雜對象。

跳轉到店鋪固定頁接口天貓無反應

使用my.tb.navigateToTaobaoPage跳轉到店鋪會員頁，在手淘上正常，天貓上無反應，且沒有錯誤提示

工單答覆爲：

my.tb.xxx 接口預計在月底版本支持天貓客戶端

image的相對路徑是相對於頁面而不是當前組件的

這個問題也很噁心。等於說組件不能有獨屬於本身的圖片存放目錄，沒法實現解耦。

工單答覆也是建議圖片統一放到assets目錄下，或者放到OSS上。

我反問1耦合性怎麼辦，2遠程請求影響加載速度怎麼辦。

我認爲這明顯是個BUG，客服只說已反饋給開發，目前無下文。

分享設置的content自定義淘口令無效

分享的使用文檔內容其實是從支付寶小程序文檔裏複製的，裏面的描述都仍是吱口令

工單答覆是，暫不支持，文檔會去掉（截止發文時還沒去掉）