微信小程序<每日查看>開發總結

以前一直在作iOS平臺的App和SDK開發，發現微信小程序還蠻有意思的，花了將近幾天的時間，從看書學習到萌發想法，最後開發出一款小應用，如今花點時間總結一番！做爲自我勉勵和後續繼續學習動力～

先上效果圖:                                                                 

 

 

小程序碼以下，用戶打開微信使用掃一掃，便可啓動； 或者在小程序列表裏搜索關鍵字"DCL每日查看"，便可搜索到，啓動便可！

 

 

1.0.2 新版本

 

附上最近開發的另外一個小程序：

 

功能和交互簡單描述:

針對微信使用用戶天天的零碎時間來進行天氣，新聞要點等查看，免去了打開其餘App來查看，同時還能夠跟圖靈小機器人進行各類話題閒聊來打發時間，針對每一天，對歷史上的今天發生的大事進行隨機展現，告知用戶時間的重要性，珍惜當下～

技術要點:

1.基本包含了基本的微信小程序開發所須要使用的技術要點； 一些代碼可複製用來開發其餘微信小程序！

2.自定義組件開發，小程序提供的組件和API使用

3.第三方小程序組件的使用

4.一些第三方js庫如何使用

5.界面佈局，樣式和動畫

6.第三方網頁數據解析和api服務數據請求，解析和展現

 

 

一些要點詳解:

自定義組件開發，小程序提供的組件和API使用

組件:

view: 用來佈局的主要組件，可用來控制子項伸縮佈局，有點相似RN的View和前端開發的DIV; 

icon: 小程序提供的默認圖標，不須要開發者額外開發； 這裏頁面的今日要點子項點擊彈出標題詳情頁面後，進行返回用；能夠控制顏色跟背景色相融；

text：文字展現用組件；

navigator: 導航組件，這裏頁面的今日要點子項用來點擊彈出新頁面用的；

其餘組件使用參考官方文檔： https://developers.weixin.qq.com/miniprogram/dev/component/

組件使用總結：查看官方文檔，看提供哪些特性，跟本身的項目功能有沒有結合的地方，沒有的話看下有沒有第三方提供開發好的組件； 注意: 版本兼容，微信App版本和對應的基礎庫版本！我這裏使用到了一個第三方組件庫：WeUI, 項目裏用到了searchbar和loading組件，對樣式控制和事件觸發進行修改和增長來適應功能須要，把這兩個組件放入本身的自定義組件庫裏，進行改造

 

如何創建自定義組件，參考官方文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

 

api:

網絡

wx.request: 基本的GET和POST請求， 必須是HTTPS請求，建議在開發功能初期把全部即將用到的域名在小程序後臺都進行配置，由於一個月只有5次修改機會！ 在項目裏主要用來(第三方網頁數據和api服務)數據請求，拿到結果！這裏跟移動平臺原生開發有點不同的是，不須要庫來解析對應的結構，這裏返回的數據就已是一個對象了，開發者按照結構進行點語法就能拿到對應的結果了

參考官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/network-request.html#wxrequestobject

數據緩存

wx.setStorage，wx.getStorage: 用來緩存一些key-value數據的，在項目裏用來緩存歷史的今天數據集，當天有網絡的時候，只需解析一次網頁數據，拿到結果，緩存下來，下次不須要再次解析網頁數據了，我這裏選用的網頁，下發數據量比較大，每次進入小程序都去解析，對數據請求量會大，因此須要進行緩存；

參考官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/data.html#wxsetstorageobject

位置

wx.getLocation: 用來獲取用戶位置經緯度的，項目裏須要獲取到實際的位置，好比城市名稱，爲了簡化開發，我這裏用了高德地圖的微信小程序SDK,按照官方文檔加入項目便可，注意對包體增量大小進行考量，如今是程序包體不能超過4M

 

第三方小程序組件的使用

1.目前發佈上線的小程序功能有限，UI和UE設計的還有些瑕疵，暫時用到了WeUI

 

一些第三方js庫如何使用

1 前端開發使用的一些第三方JS庫，若是涉及到DOM和BOM操做，是不能直接拿來用的, 可使用的庫，建議用壓縮後的js庫，這樣對包體體積增量會有所緩解； 這裏項目使用的網頁數據解析庫改造自： https://github.com/Jxck/html2json ，來源於： https://github.com/icindy/wxParse； Github上有不少"輪子"能夠用，時間不足的開發者，能夠按需選用配合本身的創意，作出好用好玩的小程序！

使用第三方js庫，有不少風險，開發者最好有至關的JS語言基礎，還要學習一些ES6語法，這樣在用第三方JS庫纔有一點的內心有數，後續也能夠本身開發出供別人使用的「輪子」

推薦一本介紹JavaScript的書： 

ES6新語法：http://es6.ruanyifeng.com

 

界面佈局，樣式和動畫

這三塊很大一部分都是前端開發的東西，能夠直接拿過來用

看的網站資料： https://www.w3cschool.cn

css書籍是：CSS揭祕

小程序開發官方文檔： https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

項目使用總結:

這裏的動畫控制比較簡單，主要是兩個交互，第一個是點擊今日要點下的某一條目，上方綠色進度條加載到完成後，標題列表視圖漸漸從透明到不透明； 第二個是點擊底部搜索框，輸入文字後完成，當圖靈小機器人有回覆的時候，根據文字內容生成一個視圖，從搜索框頂部向上伸縮彈出，動畫代碼都用CSS來寫，定義在.wxss文件裏，在觸發時機經過數據綁定來修改這個視圖的樣式

主要代碼以下

//默認樣式
.reviewText
{

  text-overflow: ellipsis;
  word-break: break-all;
  -moz-box-orient: vertical;
  overflow: hidden;
  /* //white-space: nowrap;   */
   max-height: 0;
   font-size: 14px;
   position:fixed; 
    bottom:50px; 
    left:0px; 
    width:98%; 
     height:auto; 
    text-align: left;
    padding-top: 3px;
    padding-right:12px;
    padding-left: 3px;
    z-index:9999;  
}

//彈出動畫時候的樣式
.displayReviewText
{
  border-left: 7px solid #343338; 
  background-color:burlywood;
  overflow: hidden;
  transition: max-height .55s;

  max-height: 2000px;
}

//文字自動隱藏時候的樣式
.hideReviewText
{
  overflow: hidden;
  transition: max-height .35s;
  background-color:transparent;
  /* 
  transition: 0 .75s; */
  max-height: 0px;
}

//文字自動隱藏時候的樣式
.hideReviewTextColor
{
  transition: background-color .35s;
} 

<view class='reviewText {{displayReviewText}} {{hideReviewText}} {{hideReviewTextColor}}'>
     <text style='width:90%;'>{{tulinText}}</text>
</view>

 

第三方網頁數據解析和api服務數據請求，解析和展現

因爲目前精力有限，沒有自有數據的收集，有一些功能只能藉助互聯網上的一些數據（若是涉及到侵權，本人會下架該小程序，作此聲明），目前使用到的技術是爬取一些靜態網站內容，分析其html結構，解析出須要的數據，作小程序端邏輯處理，經過百度和google，用到的是html2json，參照其Github上的README基本能夠知曉其使用，難點在於對html中DOM樹結構的理解和預判，這段邏輯須要作不少容錯處理！除了爬取網頁數據外，還能夠查找一些免費的API服務接口，好比阿凡達，京東雲等，這裏注意先測試下對應的Api服務域名是否符合小程序的請求規範,否則在小程序後臺配置request請求域名的時候白白浪費一次配置機會，由於如今一個月只能配置5次，因此建議第一次修改的時候，把全部須要用到的域名都配置上，減小後續配置次數

項目使用總結:以下圖所示，這裏去爬取了一個網站的數據，解析出須要的列表數據，而後作隨機展現，下拉刷新新一條隨機展現

再好比以下圖所示，這裏使用了高德地圖小程序SDK和京東雲的天氣API接口，使用並不複雜，只是會花費一些時間

這裏的背景顏色會根據溫度不一樣做不一樣的顏色填充

 

 

  

  該小程序當前正在開發新版本，敬請期待～ 等後續功能完善後，會把源碼發佈到Github，一塊兒交流技術實現！

  [另: 該小程序對應的ReactNative版本也基本開發完成，正在提交Appstore審覈！ 功能基本一致，其中的代碼重用率達到了90%，剩下的10%只是UI實現技術了，ReactNative使用的JSX跟傳統的CSS有些許差異，其中有一些好用的部分還捨棄了，額外增長了一些新功能！]

  博客園的各位朋友，若是對該小程序有什麼建議，歡迎留言！

 

 附上另外一個小程序