阅读模式 收藏1

精华

小程序基础篇之小程序版社区专栏实战

  • • 发表于 8年前
  • • 作者 JeremyLu
  • • 11118 人浏览
  • • 15 条评论
  • • 最后编辑时间 8年前
  • • 来自 [技 术]

原创声明:本文为作者原创，未经允许不得转载，经授权转载需注明作者和出处

光说不练假把式

废话不多说直接上图

小程序基础内容已经讲解差不多了，这一篇就带大家一起应用前面的知识从0开始，以社区专栏为样板，做一个小程序版社区专栏。
运用到的知识有：

  1. 数据绑定
  2. 事件应用
  3. 页面跳转
  4. 集成WeUI
  5. 本地缓存
  6. 集成wxParse(html转wxml)

你可以通过小程序基础篇系列学习以上知识

》》》1.项目介绍

小程序专栏，汇总大家关注的专题和作家的系列文章。

》》》2.项目需求

  1. 首页九宫格显示专栏分类（icon + text）
  2. 点击专栏，列表呈现文章列表（头像+标题+时间）
  3. 根据文章标题搜索（模糊搜索）
  4. 查看文章详情（文章标题 + 作者头像 + 作者昵称 + 作者签名 + 文章内容）

根据以上需求，画出原型图：

》》》3.操作流程

  1. 用户进入首页后，可以查看专栏分类
  2. 点击专栏，跳转到文章列表页面，看到该专栏下的文章。
  3. 点击列表中某一项，跳转到文章详情。
  4. 在首页输入文字，点击搜索
  5. 在文章列表页面显示搜索结果
  6. 点击列表中某一项，跳转到文章详情。

》》》4.项目分析

  1. 总共需要三个页面
  2. 首页九宫格icon和文字从本地获取
  3. 涉及的UI组件有searchBar,Grid,Navigator
  4. 两处网络请求（搜索和专栏文章列表）
  5. 搜索结果和点击专栏分类复用一个页面
  6. 后台爬取社区专栏文章和作者数据
  7. html转wxml
  8. 文章数据本地缓存

》》》5.技术实现

  1. 引入weui.wxss和wxParse
  2. 目录结构
    |--images
|--pages
     |--index
     |--article
     |--articledetail
     |--log
|--utils
|--wxParse
|--app.js
|--app.json
|--app.wxss
|--weui.wxss
  3. 首页九宫格代码实现，使用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开发者工具使用心得，工欲善其事必先利其器'}
]
 }
})
  4. 文章列表实现，需要判断从搜索入口进来还是从专栏入口进来。分别使用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]
       });
     }
   }
 )
}
})

  5. 文章详情实现，从列表页面传文章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

分享到:
共15条评论
Ctrl+Enter
作者

JeremyLu

JeremyLu

APP:1 帖子:19 回复:189 积分:627

已加入社区[2940]天

我就是我不一样的烟火

作者详情》
精品推荐课程更多
网站logo

wxappclub.com微信小程序俱乐部是国内最大最具影响力的微信小程序社区，致力于微信小程序技术研究、教学、推广和运营。

Copyright © 微信小程序俱乐部 鲁ICP备14005628号-8

Top