有贊招聘小程序，有你就很贊
前言
學了大概一個月的小程序，從對小程序的一無所知，到現在對小程序的漸漸熟悉，其實心裡挺開心的。現在看到一個小程序，腦子裡想的不是這個功能怎麼怎麼好用，而是在想 這個功能該怎麼實現，應該怎麼設置數據，大概的邏輯該是怎麼樣的，這是這個小項目對我最大的幫助。這個小程序用了一週時間，想著趁剛剛學完，趕緊做個小項目鞏固下自己學習的內容，效果還是很好的。這個小程序說不上很高級，如果您是大神，您可以跳出文章，這些知識您都知道，就不要浪費您時間了，留著點時間看別的有用的知識。如果您也是跟我一樣的新手，想鞏固自己的學習內容，那您可以看看我這篇文章，我會對我踩得坑以及一些解決辦法還有一些效果的實現做一個總結，或許對您有幫助。
小功能的實現
- 頁面緩存的操作（搜索歷史記錄），頁面搜索功能實現
- 小程序摺疊與展開文章的的實現
- 小程序收藏功能的實現
- 小程序彈出菜單的實現
- 小程序模板的使用
- 小程序地圖組件的使用
小坑提醒
- swiper組件圓點位置的改變
swiper組件圓點的默認位置在中間，找了很久找到圓點位置的設置屬性
.product-image .wx-swiper-dots.wx-swiper-dots-horizontal{ margin-bottom: 2rpx; margin-left: 300rpx;}- swiper滑動同步改變內容
在swiper組件上綁定bindchange事件，然後使用current表示當前滑塊id，然後在要顯示文字的view中綁定數據層的current，實現同步 wxml:
{{name}}
js
changeDec: function (e) { let current = e.detail.current; switch (current) { case 0: this.setData({ name: '有贊零售' }) break; case 1: this.setData({ name: '有贊雲' }) break; case 2: this.setData({ name: '有贊微商城' }) break; } this.setData({ current: current, }) },- 標題欄標題與兩邊線的距離
由於使用了weui，樣式默認為原有樣式，但是我又想改下他們之間的距離，然後在源碼中找到了設置方法
.weui-loadmore__tips_in-line{ padding: 0 2em; color: #6e6e6f;}- 列表上cell的線的隱藏
上邊框的線怎麼隱藏？試了好久,還以為是border的問題，後面發現這個是偽元素的問題，這個也是看源碼分析出的，發現看源碼真的能解決很多問題
.company-adress>.weui-media-box:nth-child(3):before{ content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1rpx solid #e5e5e5; left: 7px}.company-adress>.weui-media-box:nth-child(4):before{ content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1rpx solid #e5e5e5; left: 7px}- map組件遮住內容的問題
由於map組件的優先級最高，試了很多下，想把view放上去，不過最後都無功而返，最後百度下，發現用cover-view可以，不過cover-view能用的範圍也不多，暫時還沒找到更加好的辦法
- 文字間無法插入空格的問題
有時候有些文字描述的內容沒有必要再加一個text標籤，但是內容間又有間距怎麼辦？剛開始用 後面測試下發現在小程序裡直接這樣是沒有用的，必須加上decode="{{true}}"，還要記得加分號，不然沒有用
#簡歷處理快如閃電 #很少回聊天信息 #早上活躍
不過我更加傾向於用第二種方法:把輸入法改成全角，然後就可以愉快的使用空格打空格了
數據的操作
- 頁面間數據的傳遞
- wx.request或者navigator的url參數代入一個個性值，通過與另一個頁面間的數據匹配，實現頁面間數據的同步
- 緩存setStorage,getStorage,一邊設置，另一邊獲取
- globalData,全局變量,通過getApp().globalData方法賦值
- 狀態操作的經驗
- 只要涉及到狀態操作的，可以考慮使用三元運算符，通過在數據層true or false控制狀態，然後視圖層通過類名控制樣式
工具與網站分享
- GifCam(Gif錄製工具)
- snipaster(截圖取色工具)
- everything(文件快速檢索)
- 獵豹翻譯(一款瀏覽器插件，支持劃詞翻譯，很方便)
- IDM(高速下載工具)
- Octotree(樹形顯示GitHub目錄)
- Page Ruler(屏幕尺子插件,可以在量屏幕尺寸像素大小)
- Fiddle(抓包工具)
- Momentum(chrome新空白標籤頁主題)
- Textify(窗體文本複製工具)
- 小程序社區
- 小程序開發文檔
我的一些想法
- 底部tabBar可以通過設置一大一小圖片，展示選中效果，這樣會有一種動態效果，會不會體驗更好一點？
最後小結
這個項目確確實實的加深了我對小程序的理解，但更重要得是，能感覺到自己獨立解決問題的能力提升不少，最後總結的時候會發現自己踩過好多坑，雖然中途也因為沒解決問題感到痛苦，但是現在總結寫文章的時候，感覺很棒，對自己走過的路總結，反省的過程是真的很愉快的，會對自己認識也更深刻一點，最後希望自己會越來越好，希望以後能給社區帶來更好的項目
閱讀更多 程序員成長記 的文章
