1. 程式人生 > >微信小程式——點選商品分類跳轉到該商品的商品詳情頁面(已實現)

微信小程式——點選商品分類跳轉到該商品的商品詳情頁面(已實現)

        首先,我不得不感慨下,慕課網上“7七月”老師的課真的很強大,此處放連結https://coding.imooc.com/learn/list/75.html

       我只是學習到了一半就開始自己嘗試做一個商城的小程式,竟然真的被我完成了大部分。好吧,就這樣,這個課明明還有一半,我竟然不聽了……

        也不是不聽,是我自己懶吧,能自己實現了,哈哈哈~這樣還算是個好的結果吧。言歸正傳,最近幾天都在做這個商品分類跳轉到相應的商品詳情頁。

        港真,一開始我是把兩個頁面分開獨立來做了,千萬不要這樣!千萬不要這樣!!千萬不要這樣!!!

        不然等到要拿資料的時候,你會哭的,我承認,我就急哭了好幾次,你一個程式媛,難道沒有人幫你解決麼?呵呵噠……沒有!因為沒有其他人。不說這個,接著來說實現拿資料。

        先把商品分類的頁面資料傳遞好後,就會是一個比較滿意的地基,可以參考圖1,而真正抓狂的是資料傳遞,一開始,我已經拿到了,相應商品詳情頁的id,正在沾沾自喜,動力十足,準備大幹一場的時候,我發現,自己還是太天真了!

         怎麼可能這麼簡單就拿得到全部資料呢?emmmmm……一邊難過一邊改程式碼,真是一次深刻又難忘的經歷。

        先放圖吧,不然我可能總會跑偏話題。

                                  圖1                                                                                                                  圖2

        以上這兩張圖分別是商品分類的html和js部分,我用了一個比較麻煩的方法,就是把所有的資料都傳了過來,沒有後臺,如果有後臺的話,只需要後臺給我一個介面,我只需要傳遞一個id就完全ok~但目前只能先這樣吧。

        突然發現,這篇文章完全沒講技術點,這可真的是……過分啊!

        具體來說,在實現過程中,需要注意的都是細節,比如傳參的& =都不要忘了,後面幾個我忘了,就一直出現“underfind”。拿到資料後,可以在商品詳情頁的js裡打印出來,直接onLoad: function (options) {console.log(options);},就可以看到自己是否傳遞正確。

        由於我寫資料的時候是一層一層的比較多,所以,拿資料的時候一定一定一定要看清楚資料所在的第幾層陣列。如果自己會有點迷糊的,那微信開發者工具偵錯程式裡的“AppData”和”Sources”瞭解下~真的很受用!

        好了,我得繼續開始實現從加入購物車後,購物車頁面的相應實現。雖然我現在已經實現了購物車結算、增減等,可是不能要死資料呀,得傳!傳資料~~~~

        不說了,接著幹吧!