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

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

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

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

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

精選專題

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

tab示例

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

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

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

word-break: break-all

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

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

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

"enablePullDownRefresh": true

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

1、列表中唯一的字符串或數(shù)字，且不能動態(tài)改變 2、保留關(guān)鍵字 *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，控制臺會給出警告提示，但不會報錯。不過為了性能效率，還是強(qiáng)烈建議大家都加上key，除非你能保證循環(huán)的數(shù)據(jù)是不動態(tài)變化的。

3. 常用標(biāo)簽。

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

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

1、設(shè)置wxml、wxss語法高亮 2、導(dǎo)入wechatcode.jar支持小程序代碼提示

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

5. navigator跳轉(zhuǎn)。導(dǎo)航類型分三種，通過open-type屬性設(shè)置

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

這里，需要注意的是：

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

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

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

Paranoidyang/wx_shopping_mall

分享標(biāo)題：一個商城小程序的踩坑之路
文章源于：http://www.bm7419.com/news42/221542.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站維護(hù)、品牌網(wǎng)站制作、網(wǎng)站設(shè)計公司、電子商務(wù)、網(wǎng)站導(dǎo)航

廣告

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