wp新人打造專屬windows phone博客園客戶端

 

自從wp8面世，一直都想做wp8開發，苦於各種原因（主要是.net基礎不好），一直沒有學成。六月底換了新工作， 有幸進入一家wp應用的公司，也開始我正式學習wp開發之路。

 

拽點廢話，類似於小說的背景，各位看官請勿吐槽。

 

首先，本人使用使用諾基亞將近一年了，每天有個習慣，就是稍微閑着點，就經常逛逛博客園，可以說我的零碎時間，讓博客園占去了一大半。但應用商店里下載的各種博客園總覺得不是太好，也說不上來哪里不好。現在機會來了，在學習的過程中，一步步打造自己的專屬博客園。

原理很簡單，就是通過http請求，抓取博客園的頁面，文章列表用ListBox顯示，點擊后，將地址傳到另一個頁面，進行詳細內容的抓取，顯示在WebBrowser中。中間用到了HtmlAgilityPack插件，這個插件也是剛剛接觸，上次在我的博文《使用HttpWebRequest和HtmlAgilityPack抓取網頁（拒絕亂碼，拒絕正則表達式）》中提到過，后來被園友們一通吐槽，給我推薦了Jumony（地址），這個比HtmlAgilityPack牛逼多了，瞬間把HtmlAgilityPack拋棄了。苦逼的是，但我開始動手做的時候，發現Jumony竟然不能在wp8中使用，我又瞬間石化了，然后又把HtmlAgilityPack撿了起來。

下面上幫助類代碼，及時Post請求，和Get請求，暫時只用到了Get請求， post請求是准備做用戶中心的時候使用的。

 

 

public class HttpHelper
    {
        public static CookieContainer cc = new CookieContainer();
        /// <summary>
        /// 發起異步post的請求，可用於模擬登陸。
        /// </summary>
        /// <param name="url">post的地址</param>
        /// <param name="poststr">參數字符串</param>
        /// <param name="action">回調函數</param>
        public static void HttpPostAsync(string url, string poststr, Action<string> action)
        {
            HttpWebRequest req = (HttpWebRequest)HttpWebRequest.Create(url);
            req.Method = "POST";
            req.CookieContainer = cc;
            req.Accept = "application/json, text/javascript, */*; q=0.01";
            req.ContentType = "application/x-www-form-urlencoded";
            req.AllowAutoRedirect = false;
            req.BeginGetRequestStream(new AsyncCallback(asy =>
            {
                HttpWebRequest req1 = (HttpWebRequest)asy.AsyncState;
                using (Stream stream1 = req1.EndGetRequestStream(asy))
                {
                    byte[] postData = Encoding.UTF8.GetBytes(poststr);
                    stream1.Write(postData, 0, postData.Length);
                }
                //開始異步接收數據
                req1.BeginGetResponse(new AsyncCallback(res =>
                {
                    HttpWebRequest req2 = (HttpWebRequest)res.AsyncState;
                    //結束返回的請求數據
                    HttpWebResponse response = (HttpWebResponse)req2.EndGetResponse(res);
                    using (Stream stream2 = response.GetResponseStream())
                    {
                        StreamReader reader = new StreamReader(stream2);
                        string resStr = reader.ReadToEnd();
                        action(resStr);
                    }
                }), req1);
            }), req);
        }

        public static void HttpGetAsync(string url,Action<string> action)
        {
            if (Utils.GetNetStates()=="None")
            {
                action("no network");//無網絡
                return;
            }
            HttpWebRequest req1 = (HttpWebRequest)HttpWebRequest.Create(url);
            req1.CookieContainer = cc;
            //開始異步接收數據
            req1.BeginGetResponse(new AsyncCallback(res =>
            {
                try
                {
                    HttpWebRequest req2 = (HttpWebRequest)res.AsyncState;
                    //結束返回的請求數據
                    HttpWebResponse response = (HttpWebResponse)req2.EndGetResponse(res);
                    using (Stream stream2 = response.GetResponseStream())
                    {
                        StreamReader reader = new StreamReader(stream2);
                        string resStr = reader.ReadToEnd();
                        action(resStr);
                    }
                }
                catch (Exception)
                {

                    action("network anomaly");//請求失敗，網絡異常
                }
               
            }), req1);
        }
    }

 下面是判斷手機的網絡狀態的代碼

public class Utils
    {
        #region wp聯網狀態
        /// <summary>
        /// 獲取設備當前的網絡狀態
        /// </summary>
        /// <returns></returns>
        public static string GetNetStates()
        {
            var info = Microsoft.Phone.Net.NetworkInformation.NetworkInterface.NetworkInterfaceType;
            switch (info)
            {
                case Microsoft.Phone.Net.NetworkInformation.NetworkInterfaceType.Ethernet: return "Ethernet";
                case Microsoft.Phone.Net.NetworkInformation.NetworkInterfaceType.MobileBroadbandCdma: return "CDMA";
                case Microsoft.Phone.Net.NetworkInformation.NetworkInterfaceType.MobileBroadbandGsm: return "GSM";
                case Microsoft.Phone.Net.NetworkInformation.NetworkInterfaceType.None: return "None";
                case Microsoft.Phone.Net.NetworkInformation.NetworkInterfaceType.Wireless80211: return "Wifi";
                default: return "None";
            }
        }
        #endregion
    }

 第一次做wp應用，有點小丑，先上圖吧。

 

 

頁面首頁用Panorama布局，有四個欄目，分別是 首頁，熱門分類，知識庫，（個人中心）暫時沒做，后期加上。

首先說首頁，主要是抓取博客園首頁文章列表，然后分析頁面后，加載到ListBox中。這里有個我所認為的難點：到頁面滾動到底部的時候自動加載下一頁。找了好多資料，最后還是找到了，先把主要代碼貼出來

#region 獲取ListBox的滾動條，實現下拉自動刷新
        private void RegisterScrollListBoxEvent()
        {
            List<ScrollBar> controlScrollBarList = UIHelper.GetVisualChildCollection<ScrollBar>(this.artList);
            if (controlScrollBarList == null)
                return;

            foreach (ScrollBar queryBar in controlScrollBarList)
            {
                if (queryBar.Orientation == System.Windows.Controls.Orientation.Vertical)
                    queryBar.ValueChanged += queryBar_ValueChanged;
            }
        }

        async void queryBar_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            if (probar.Visibility == Visibility.Visible)
            {
                return;
            }
            ScrollBar scrollBar = (ScrollBar)sender;
            object valueObj = scrollBar.GetValue(ScrollBar.ValueProperty);
            object maxObj = scrollBar.GetValue(ScrollBar.MaximumProperty);
            object minObj = scrollBar.GetValue(ScrollBar.MinimumProperty);

            if (valueObj != null && maxObj != null)
            {
                double value = (double)valueObj;
                double max = (double)maxObj;
                double min = (double)minObj;

                if (value >= Math.Floor(max))
                {
                    probar.Visibility = System.Windows.Visibility.Visible;
                    page += 1;
                    await GetHomeArtcle(page);
                }

                if (Math.Floor(value) <= min)
                {

                }
            }
        }
        #endregion

只需在頁面加載的時候注冊下事件就OK了。

下面是抓取的方法代碼

        async Task GetHomeArtcle(int pageindex)
        {
            string url = "http://www.cnblogs.com/";
            if (pageindex > 1)
            {
                url = string.Format("http://www.cnblogs.com/sitehome/p/{0}", pageindex);
            }
            await Task.Run(() =>
            {
                HttpHelper.HttpGetAsync(url, html =>
                {
                    if (html == "no network")
                    {
                        Dispatcher.BeginInvoke(() =>
                        {
                            MessageBox.Show("sorry，貌似您沒有聯網哦");
                        });
                        return;
                    }
                    if (html == "network anomaly")
                    {
                        Dispatcher.BeginInvoke(() =>
                        {
                            MessageBox.Show("sorry，您的網絡貌似有異常，請檢查后再試吧！");
                        });
                        return;
                    }
                    HtmlDocument doc = new HtmlDocument();
                    doc.LoadHtml(html);
                    var artlist = doc.DocumentNode.SelectNodes("//div[@class='post_item']");
                    List<art> art1 = new List<art>();
                    foreach (var item in artlist)
                    {
                        HtmlDocument adoc = new HtmlDocument();
                        adoc.LoadHtml(item.InnerHtml);
                        var html_a = adoc.DocumentNode.SelectSingleNode("//a[@class='titlelnk']");
                        var html_content = adoc.DocumentNode.SelectSingleNode("//p[@class='post_item_summary']");
                        var comment = adoc.DocumentNode.SelectNodes("//a[@class='gray']");
                        html_content.RemoveChild(html_content.FirstChild, true);
                        var foot = adoc.DocumentNode.SelectSingleNode("//div[@class='post_item_foot']");
                        foot.RemoveAll();
                        art1.Add(new art
                        {
                            Title = html_a.InnerText,
                            Content = html_content.InnerText,
                            Comment = comment.First().InnerText.Replace("\r\n", ""),
                            Read = comment.Last().InnerText,
                            AddTime = foot.InnerText,
                            Link = html_a.Attributes["href"].Value
                        });
                        //Response.Write(string.Format("標題為：{0}，鏈接為：{1}<br>", html_a.InnerText, html_a.Attributes["href"].Value));
                    }
                    Dispatcher.BeginInvoke(() =>
                    {
                        for (int i = 0; i < artlist.Count; i++)
                        {
                            artsource.Add(art1[i]);
                        }

                        probar.Visibility = System.Windows.Visibility.Collapsed;
                    });
                });
            });
        }

另外，定義了抓頁面所需要的類

    public class art
    {
        private string title;
        public string Title
        {
            get { return title; }
            set
            {
                title = value;
                NotifyPropertyChanged("Title");
            }
        }
        private string content;
        public string Content
        {
            get { return content; }
            set
            {
                content = value;
                NotifyPropertyChanged("Content");
            }
        }
        private string comment;
        /// <summary>
        /// 評論
        /// </summary>
        public string Comment
        {
            get { return comment; }
            set
            {
                comment = value;
                NotifyPropertyChanged("Comment");
            }
        }
        private string read;
        /// <summary>
        /// 閱讀
        /// </summary>
        public string Read
        {
            get { return read; }
            set
            {
                read = value;
                NotifyPropertyChanged("Read");
            }
        }

        /// <summary>
        /// 發布時間
        /// </summary>
        public string AddTime { get; set; }
        public string Link { get; set; }
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(string info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }
    }

    public class ArtCollection : ObservableCollection<art>
    {
        public ArtCollection()
            : base()
        {

        }
    }

這些就是首頁欄目的主要代碼了，下面會把源碼貼出來，所以就不一一貼在這里了。

綁定后列表后，就要綁定Tap事件了，個人覺得這個事件可以理解為web開發中的單擊事件。代碼如下：

   private void Border_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            try
            {
                string link = ((Border)sender).Tag.ToString();//獲取頁面鏈接
                NavigationService.Navigate(new Uri(string.Format("/show.xaml?linkurl={0}", link), UriKind.Relative));
            }
            catch (Exception)
            {

            }
        }

 

其次說熱門分類

熱門分類沒有做抓取，只是手工將博客園中的一級分類寫出來，把單擊事件里傳遞對應的地址，到列表頁面。

列表頁面是采用的Pivot布局，將分類依次排列，當從熱門分類中跳轉過來時，根據參數進行判斷，加載對應的分類列表

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
            if (e.NavigationMode == NavigationMode.New)
            {
                IDictionary<string, string> queryString = this.NavigationContext.QueryString;
                var selectedItem = pivot.Items.First(item =>
                {
                    PivotItem temp = (PivotItem)item;
                    return temp.Tag.ToString() == queryString["type"];
                });//查找對應的PivotItem
                pivot.SelectedItem = selectedItem;//設置為當前Item
               // await GetHomeArtcle(pagedb, queryString["type"]);
            }
        }

當Pivot進行切換的時候，觸發SelectionChanged事件，在事件中，首先判斷當前的Item是否已經加載數據，如果尚未加載，就加載，如果已經加載了， 就不做操作了。

  private async void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            PivotItem item = (PivotItem)pivot.SelectedItem;
            ListBox tempList = (ListBox)item.Content;
            if (tempList.Items.Count==0)
            {
                probar.Visibility = System.Windows.Visibility.Visible;
                await GetHomeArtcle(1, item.Tag.ToString());
               // tempList.Tag = (page + 1).ToString();
            }
            
        }

 

忽然覺得代碼太多了，先寫到這吧。 下班回家啦。

 

博客園的編輯器怎么沒找到上傳附件的呢？？？

 

把源碼上傳到了雲盤里， 下面是地址http://yunpan.cn/Qh4xxMwEHmutb  提取碼 d3b4(已失效，360雲盤分享只能被下載5次， 我無力吐槽了啊)

 

百度網盤分享鏈接：鏈接: http://pan.baidu.com/s/1bnjayNP 密碼: ijch

 

微雲分享鏈接 鏈接：http://url.cn/Pqa3vH （密碼：7Gim）

已經上傳到應用商店了，需要吐槽的點這里：http://www.windowsphone.com/zh-cn/store/app/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E5%AE%A2%E6%88%B7%E7%AB%AF/4ceda3f2-bef6-4231-a6bb-b8d9a0cc7b87

 

未打完，也要收工。一是東西太多了， 本來打算分幾次寫的，后來覺得太麻煩了。二是，本人表達能力有限，看不明白的直接看源碼吧，源碼有注釋哦。