『技術分享』—— 我的第一個微信小程式-趣聞

下位子發表於2018-06-15
微信小程式

前言

我去年3月份寫了一個小專案 快畢業了，擼一個小專案(趣聞) 作為自己的畢設專案，當時接觸 Android 也才半年的時間，所以寫的略簡單，偏入門級別的，有興趣的話可以 clone 看一下。趣聞

小程式 的火熱程度我就不多說了，我之前對這個就蠻有興趣的，於是花了大概5天的時間，完成了 學習-入門-寫專案 這一套流程。作為前端 0 基礎的我都這麼快入門了，可想而知，微信小程式的封裝是相當好的，基本上過一遍官方文件就可以進行編寫了。

專案預覽

話不多說，看一下專案的整體預覽：建議在 wifi 進行檢視

專案整體預覽

整體的效果就是仿照之前的趣聞專案，基本的功能都是有的。其中包括四大模組：新聞、段子、歷史上的今天和小愛同學。

後面對每個模組的特點進行說明。

新聞模組

這裡先宣告一下，因為該專案涉及到文娛資訊，需要上傳相關資格證，所以就上不了線。不過我個人對此並不是很在意，因為之前的 Android 專案已經經歷過上線失敗了。。。

而且這個小程式本身就是自己的練手專案，沒有必要非得上線不可，達到目的不就行了，如果感興趣的也是可以把專案 clone 下來預覽一下的。

看一下預覽圖

新聞

功能：檢視多種型別的實時新聞，點選新聞檢視新聞裡面的圖片

這裡因為個人小程式是不支援外鏈的，因此不能檢視新聞的詳情。如果確實想看新聞的詳情，可以點選 url 便可複製到剪貼簿上，貼上到本地瀏覽器進行檢視。

段子模組

段子

功能：檢視最新的段子笑話，支援下拉重新整理和上拉載入更多功能，並可以長按段子進行復制分享。

歷史上的今天

歷史上的今天

功能：檢視歷史上今天的所有相關事件列表，支援下拉重新整理，點選單個事件，檢視事件的詳情介紹。

小愛同學

小愛同學

其實跟小愛同學沒有任何關係 (快來欺負老實人)。。這裡就是普通的機器人，不過可以智慧記錄上次的會話內容，比如，你跟他說 「我叫小愛」，接著你再問 「我叫什麼」的時候回答出你上次記錄的名字。

專案知識點

這裡記錄一下自己開發過程中遇到的對於我來說比較複雜的地方。

對 css 和 js 零基礎的我，只能在使用過程根據需要進行查詢對應的使用方法，也是蠻坎坷的。

佈局

當然是使用 Flex 佈局，介紹兩篇好的文章 Flex1、 Flex2，講的很詳細，足夠日常的開發使用了。我這裡大概總結一下。

  • Flex-direction 決定元素的排列方式

  • Flex-wrap 決定元素如何換行

  • Flex-flow flex-direction 和 flex-wrap 的簡寫

  • Justify-content 元素在主軸上的對齊方式

  • Align-items 元素在交叉軸的對其方式

  • Flex-grow 當有多餘空間時，元素的放大比例

  • flex-shrink 當空間不足時，元素的縮小比例

  • Flex-basis 元素在主軸上佔據的空間

  • flex 是 grow shrink basis 的簡寫

  • Order 定義元素的排列順序

  • Aligh-self 定義元素自身的對其方式

圓角和陰影

border-radius : 設定圓角

box-shadow: 設定圓角

文字的顯示行數限制

  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
複製程式碼

其他的就是官方文件的元件使用，很詳細就不多說了。

總結

從學習到開發完一個小的專案一共用了4天的時間，不得不承認官方的文件很詳細，當然也會有不少的坑，但是我相信這些坑，官方會慢慢維護和完善的。根據這幾天的學習開發說說我自己的心得和感受。

學習來源

  • 官方文件 (毋庸置疑，有全面、又詳細)
  • 某客學院的 vip 視訊(有需要私聊發給你)
  • 菜鳥教程 (這個因為時間原因沒看多少，但是乾貨還是蠻多的)

資料來源

資料同 趣聞 來源於 聚合資料，不過我最近也在學後端，買了伺服器，寫了介面，不過還有許多需要完善的，就沒有用，而且也是為了仿照之前專案，就直接拿聚合介面使用了。

image-20180615145049660

不過很有趣的是，單單一個新聞的介面就已經請求了 50000+，而且聚合資料平臺對免費使用者設定了 100次/天/介面 的限制，為了能讓專案正常執行，也是特定充了 VIP 進行續命，也是很無奈。遲早有一天我要把他的資料爬到自己的伺服器！

優點

  • 入門快 (如果之前就開發前端的，毫無壓力)
  • 官方文件詳細
  • 編譯快 (作為開發 Android 人員，開發五分鐘，編譯兩小時實在受不了)
  • 除錯方便 (自帶模擬器本身就很強大，而且支援遠端除錯)
  • API 全面 (封裝了大量的通用元件和介面，直接呼叫即可，開發者不用進行繁瑣的邏輯判斷)
  • 穩定 (官方也在持續維護中)

不足之處

  • 有些時候介面略微卡頓
  • input元件(類似於 EditText) 焦點不易控制
  • 不太適合負責的巢狀滑動，會卡頓
  • 封裝太好對應的就是一些需要自定義的功能不太好實現
  • 個人小程式不支援外鏈

總體的感覺還是蠻不錯的，程式碼提交到了 Github 上了：QNews_we_chat ,本人也是小白，程式碼可能有很多需要優化的地方，請多指教，也請多多支援。

原文地址

相關文章