一個商城小程序的踩坑之路

這幾天搗鼓了一個商城小程序（copy了好幾個商城的UI），利用原生組件寫了幾個頁面，也碰到了一些痛點，在此做一個簡單的記錄。幾個簡單的界面如下：

首頁商城分類商品詳情購物車個人中心痛點原生的方式不能用sass。因為用vue習慣了用sass寫樣式，但小程序不能直接使用sass等預處理器，不過好像用了mpvue、wepy等框架可以實現(xiàn)用css預處理器（還未嘗試過，試過了再更新）。去掉標題欄必須全局統(tǒng)一去掉。本來以為在頁面的json文件里可以覆蓋，結果發(fā)現(xiàn)并不起作用，所以統(tǒng)一去掉之后，如果你在某些頁面又需要標題欄只能自己用view模擬一個（如我這里的商品詳情頁），希望以后官方可以人性化一點。

"navigationStyle": "custom" //只在app.json中生效

3. movable-view貌似有bug。在商城首頁的精選專題中我嘗試了用 movable-view實現(xiàn)橫向滾動效果，后來發(fā)現(xiàn)，整個頁面也會隨之滾動，在微信小程序社區(qū)里也有人遇到這個問題，不過沒人回答，不知道是自己的問題還是官方的bug，后來就改用scroll-view實現(xiàn)了。

精選專題

4. 無tab切換組件（如下所示）。雖說tarbar把position設置為top是一個tab，但這種必須在最頂部，如果要在中間某個內容區(qū)使用就只能自己實現(xiàn)了。

tab示例

5. 無法動態(tài)增加、刪除節(jié)點。本來想實現(xiàn)一個加入購物車的動畫，比如點擊了加入按鈕，商品圖片會掉下來，慢慢變成一個圓形，落在tarbar的購物車上。結果發(fā)現(xiàn)不能直接刪減節(jié)點，并且tabBar的位置好像也無法獲取到，在開發(fā)者工具中發(fā)現(xiàn)其并沒有渲染出來（希望知道的小伙伴告知一下，先謝謝了）。

6. background-img只能用于網絡圖片或者是base64轉碼后的圖片，一般的本地圖片無法使用，如果要用本地圖片作為背景圖，可以使用image加絕對定位的方式。

7. 當text組件和view組件中的文字全英文或中英混合輸入時（全中文時正常）不換行。解決方案：

word-break: break-all

但可能會出現(xiàn)切斷單詞的情況，如將‘yang’分解為‘ya’和‘ng’放在兩行顯示，對此尚無很好的對策。

8. 聯(lián)系客服。有兩種按鈕方式可以實現(xiàn)這個功能，會有一個默認圖標，去不掉，如果想自定義樣式可以使用。

注意事項下拉刷新。onPullDownRefresh在app.js中不起作用， 需要監(jiān)聽哪個頁面的下拉刷新就在對應頁面的js文件里添加onPullDownRefresh，且需要在json文件中添加

"enablePullDownRefresh": true

2. 列表渲染。wx:for 用在標簽上，以渲染一個包含多節(jié)點的結構塊，與vue類似，小程序提供了wx:key來保證列表項的自身狀態(tài)，從而在渲染時直接復用，提高列表渲染效率，可以有以下兩種值形式：

1、列表中唯一的字符串或數(shù)字，且不能動態(tài)改變 2、保留關鍵字 *this 代表在 for 循環(huán)中的 item 本身（如果item本身就是唯一的話）

注意key是不用{{ }}包裹的

wxml： {{item.name}} js： { id: 1, name: "評論" }, { id: 2, name: "推薦" }, { id: 3, name: "詳情" }

tip：如果wx:for循環(huán)中沒有使用key，控制臺會給出警告提示，但不會報錯。不過為了性能效率，還是強烈建議大家都加上key，除非你能保證循環(huán)的數(shù)據是不動態(tài)變化的。

3. 常用標簽。

：非組件，只是一個包裝元素，不渲染，類似于vue中的template，常在wx:for循環(huán)中使用 ：類似于div，塊狀元素 ：組件內只能嵌套組件，行內元素，如果嵌套其他元素會不顯示 ：圖片要加后綴名，有默認寬高 ：輪播圖，有默認寬高，里面的寬高默認100%

4. 由于開發(fā)者工具用的真心難受，所以其實可以使用自己喜歡的工具進行開發(fā)，我用的是webstorm，在使用之前需要先配置一下以支持小程序的語法：

1、設置wxml、wxss語法高亮 2、導入wechatcode.jar支持小程序代碼提示

具體方法就不詳細展開，隨便搜索就能找到。盡管如此還是無法達到好支持，部分語法也會識別不了，但影響不大。

5. navigator跳轉。導航類型分三種，通過open-type屬性設置

A、open-type="navigate" 打開新界面B、open-type="redirect" 在本界面中打開新界面C、open-type="switchTab" 控制tab頁之間的切換

這里，需要注意的是：

1、所有需要跳轉的頁面必須在app.json中注冊 2、A是navigator的默認跳轉方式，可以通過wx.navigateBack()返回 3、B跳轉到目標頁面后，導航欄是沒有返回按鈕的，并且也無法通過wx.navigateBack()返回 4、A、B只能跳轉非tabBar中注冊的頁面，不能打開url="../index/index"（一般是tabBar的首頁）,因為pages/index/index界面是tab頁 5、C只能打開tabBar注冊的界面后言

剛接觸小程序沒幾天，有點瑟瑟發(fā)抖，有不對的地方還望小伙伴指正，共同成長。

這個小項目會持續(xù)更新，我會讓它更加完善，一些樣式和組件的抽離、請求的封裝等在后續(xù)會加上去。暫時就先這樣吧，以后有遇到問題再補充，希望明天入職愉快。

Paranoidyang/wx_shopping_mall

當前名稱：一個商城小程序的踩坑之路
路徑分享：http://bm7419.com/news/221542.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供自適應網站、網站設計、用戶體驗、品牌網站建設、網頁設計公司、網站制作

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)