亚洲国产精品嫩草研究院,毛片地址,国产一级黄

原創聲明:本文為作者原創，未經允許不得轉載，經授權轉載需注明作者和出處

光說不練假把式

廢話不多說直接上圖

小程序基礎內容已經講解差不多了，這一篇就帶大家一起應用前面的知識從0開始，以社區專欄為樣板，做一個小程序版社區專欄。
運用到的知識有：

數據綁定
事件應用
頁面跳轉
集成WeUI
本地緩存
集成wxParse(html轉wxml)

你可以通過小程序基礎篇系列學習以上知識

》》》1.項目介紹

小程序專欄，匯總大家關注的專題和作家的系列文章。

》》》2.項目需求

首頁九宮格顯示專欄分類（icon + text）
點擊專欄，列表呈現文章列表（頭像+標題+時間）
根據文章標題搜索（模糊搜索）
查看文章詳情（文章標題 + 作者頭像 + 作者昵稱 + 作者簽名 + 文章內容）

根據以上需求，畫出原型圖：

》》》3.操作流程

用戶進入首頁后，可以查看專欄分類
點擊專欄，跳轉到文章列表頁面，看到該專欄下的文章。
點擊列表中某一項，跳轉到文章詳情。
在首頁輸入文字，點擊搜索
在文章列表頁面顯示搜索結果
點擊列表中某一項，跳轉到文章詳情。

》》》4.項目分析

總共需要三個頁面
首頁九宮格icon和文字從本地獲取
涉及的UI組件有searchBar,Grid,Navigator
兩處網絡請求（搜索和專欄文章列表）
搜索結果和點擊專欄分類復用一個頁面
后臺爬取社區專欄文章和作者數據
html轉wxml
文章數據本地緩存

》》》5.技術實現

引入weui.wxss和wxParse
- 如何使用weui.wxss參考小程序基礎篇之使用WeUI
- 如何使用wxParse參考 wxParse

目錄結構

|--images
|--pages
     |--index
     |--article
     |--articledetail
     |--log
|--utils
|--wxParse
|--app.js
|--app.json
|--app.wxss
|--weui.wxss

首頁九宮格代碼實現，使用wxui實現

<view class="weui-grids">
         <block wx:for-items="{{gridIcons}}" wx:key="{{index}}">
             <navigator url="/pages/article/list?path={{item.path}}&desc={{item.desc}}&type=column" class="weui-grid" hover-class="weui-grid_active">
                 <image class="weui-grid__icon" src="/images/{{item.icon}}"/>
                 <view class="weui-grid__label">{{item.text}}</view>
             </navigator>
         </block>
</view>

Page({
 data:{
     gridIcons: [
   {icon:'1.png',text:'新手訓練營',path:'/column/1',desc:'這是新手上路的專欄，輔助新手0基礎開始上路'},
   {icon:'2.jpg',text:'深度思考',path:'/column/2',desc:'小程序深度思考，技術、商業、未來的一切'},
   {icon:'3.png',text:'精品問答',path:'/column/3',desc:'這里匯總了的技術問答問題，看看你的問題能否解決'},
   {icon:'4.png',text:'社區攻略',path:'/column/4',desc:'玩轉社區，你需要了解的規則都在這里'},
   {icon:'5.png',text:'填坑系列',path:'/column/5',desc:'toBeMN的填坑之路系列，帶你跳過開發中的那些坑'},
   {icon:'6.jpg',text:'JS新手學習',path:'/column/7',desc:'丁小柒JavaScript新手學習系列，帶你從零入門快上車'},
   {icon:'7.jpg',text:'小程序基礎篇',path:'/column/10',desc:'JeremyLu的高品質基礎篇，對生命周期、數據解密、數據綁定等做深度分析'},
   {icon:'8.jpg',text:'框架細節',path:'/column/6',desc:'Roluce 框架細節系列，帶你解密那些容易忽略的細節'},
   {icon:'9.png',text:'IDE心得',path:'/column/8',desc:'微信Web開發者工具使用心得，工欲善其事必先利其器'}
]
 }
})

文章列表實現，需要判斷從搜索入口進來還是從專欄入口進來。分別使用wx.navigateTo和<navigator />帶參數跳轉。

<view class="page">
    <view class="weui-cells__title">{{desc}}</view>
     <view class="weui-cells weui-cells_after-title">
         <block wx:for-items="{{articles}}" wx:key="{{index}}">
             <navigator url="../articledetail/detail?id={{item.id}}" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                 <view class="weui-cell__hd">
                     <image src="{{item.author.headimg}}" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
                 </view>
                 <view class="weui-cell__bd">{{item.title}}</view>
                 <view class="weui-cell__ft weui-cell__ft_in-access">{{item.createTime}}</view>
             </navigator>
         </block>
     </view>
</view>

Page({
data:{
 //分頁當前頁
 pageIdx: 0,
 //文章列表
 articles: []
},
onLoad:function(options){
 //傳入類型
 var type = options.type;
 //專欄文章
 if(type === 'column'){
   var path = options.path;
   this.setData({desc: options.desc})
   //查詢數據
   this.getColumnArticle(path);
 }else if(type === 'search'){//搜索文章
   this.setData({desc: options.text})
   //查詢數據
   this.searchArticle(options.text);
 }
},
//根據專欄路徑查詢文章列表
getColumnArticle: function(path){
 var that = this;
 httpclient.req(
   '/wxclub' + path + '/' + that.data.pageIdx,
   {
     apiName: 'WX_CLUB_ARTICLES',
   },
   'GET',
   function(res){
     var datalist = res.data.data || [];
     that.setData({articles:datalist})
     for(var i = 0; i < datalist.length; i++){
       //將文章放到本地緩存
       wx.setStorage({
         key: datalist[i]['id'],
         data: datalist[i]
       });
     }
   }
 )
},
//根據文章標題查詢
searchArticle: function(text){
 var that = this;
 httpclient.req(
   '/wxclub/column/search/' + that.data.pageIdx,
   {
     apiName : 'WX_CLUB_SEARCH',
     text: text
   },
   'GET',
   function(res){
     var datalist = res.data.data || [];
     that.setData({articles: datalist})
     for(var i = 0; i < datalist.length; i++){
       //將文章放到本地緩存
       wx.setStorage({
         key: datalist[i]['id'],
         data: datalist[i]
       });
     }
   }
 )
}
})

文章詳情實現，從列表頁面傳文章ID到詳情頁，根據文章ID從緩存中讀取文章信息。

<import src="../../wxParse/wxParse.wxml"/> 
<view class="page">
 <view class="page_hd">
     <view  bindtap="bindViewTap" class="userinfo">
         <image class="userinfo-avatar" src="{{avatarUrl}}" background-size="cover"></image>
             <view class="userinfo-mark">
                 <text class="userinfo-nickname">{{nickName}}
</text>
                 <text class="userinfo-remark">{{remark}}</text>
             </view>
     </view>
 </view>
 <view class="page__bd">
     <view class="wxParse">
          <template is="wxParse" data="{{wxParseData:content.nodes}}"/>
     </view>
 </view>
</view>

Page({
data:{
 avatarUrl: '',
 nickName: '',
 remark: ''

},
onLoad:function(options){
 var that = this;
 var id = options.id;
 //根據文章ID，從本地緩存中獲取文章
 wx.getStorage({
   key: id,
   success: function(res){
     var data =res.data;
     //將標題欄設置為文章標題
     wx.setNavigationBarTitle({
       title: data.title,
       success: function(res) {
       }
     })
     that.setData({
       avatarUrl: data.author.headimg,
       nickName: data.author.nickname,
       remark: data.author.remark
     })
     //使用wxParse將html轉為wxml,請在github上自行參考wxParse
     WxParse.wxParse('content', 'html', data.content, that,5);
   }
 })
}
})

以上內容基本上涵蓋可小程序基礎知識，對分散的知識點串聯起來使用，加以鞏固。
后臺使用java寫的，定時從社區爬取最新的專欄文章數據。

基礎學習：我的專欄
小程序源碼：chaptor_07
后臺源碼：springboot-weapp-demo

欧美日韩国产一区,亚洲一区视频,色综合久久久久,私密按摩师舌头伸进去了,99re6这里只有精品,夜夜性日日交xxx性hd

小程序基礎篇之小程序版社區專欄實戰

》》》1.項目介紹

》》》2.項目需求

》》》3.操作流程

》》》4.項目分析

》》》5.技術實現