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

先上效果圖:

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

功能和交互簡單描述:

針對微信使用用戶每天的零碎時間來進行天氣，新聞要點等查看，免去了打開其他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有些許差別，其中有一些好用的部分還舍棄了，額外增加了一些新功能！]

博客園的各位朋友，如果對該小程序有什麽建議，歡迎留言！

我的第一個微信小程序-DCL每日查看 開發總結