微信小程序：南大小百合客户端

先看效果图：

详细介绍

# 微信小程序 南大小百合功能基于南大小百合bbs，这个小程序相当于是个查询工具，信息都抓取于http://bbs.nju.edu.cn/

功能：

1，浏览bbs十大和各区精华帖

2，查看和搜索讨论区帖子

3，查看个人bbs主页

4，微信与小百合账号绑定

5，评论和点赞

6，推送每日十大内容

项目结构

│ app.js # 小程序登录

│ app.json # 小程序公共设置（页面路径、窗口表现、设置网络超时时间、设置多tab）

│ app.wxss # 小程序公共样式表

│ README.md # 小程序项目说明

│

├─image # 小程序图片资源

|

├─pages # 小程序文件

│ ├─about # 关于

│ ├─common # 模板

│ ├─detail # 帖子详情

│ ├─index # 我的

│ ├─login # 绑定小百合账号

| ├─newpost # 发帖

| ├─personalInfo # 个人主页

│ ├─switchzone # 选择查找谈论区

│ ├─topics # 主页面

│ └─zone # 浏览特定版面

│

└─utils # 小程序公用方法模块

│ ├─api # 网络通信接口

│ └─ group # 谈论区板块分组

│

└─wxParse # 富文本解析

└─wxSearch # 搜索

└─data # 本地数据

---

项目整体结构如上，这个demo是数据来自本地data，引用了wxParse富文本解析组件解析从网页抓取的HTML，wxSearch搜索组件用于搜索谈论区。下面详细介绍下小程序的实现：

UI界面：主界面是由swiper加scroll-view实现左右滑动并自适应高度，关键要将swiper-item包裹的内容height设置为100%

背景图片得用url

/*列表 list*/

.scroll-posts-list {
  overflow: auto;
  margin-top: 0rpx;
  background-image: url("http://bbs.nju.edu.cn/download/images/back.gif");
  height: 100%;
}

获取用户信息：一进入小程序会提示你是否授权，调用wx.login和wx.getUserInfo绑定使用，得到code，encryptedData，iv，然后通过服务器得到openid并保存。也可以使用组件来获取用户信息，用户拒绝授权后也可以重新弹窗再次授权。

<button wx:elseclass="userinfo" open-type="getUserInfo"bindgetuserinfo="userInfoHandler">

具体参考官方文档：
https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=&docid=c45683ebfa39ce8fe71def0631fad26b

浏览帖子详情：由于是从小百合网站上抓取的HTML格式内容，这里运用wxParse组件解析，

  //富文本解析HTML数据
  wxParseData(repliesArray, detailLength){
    var that = this;
    var l = repliesArray.length;

    for (var i = detailLength; i < l; i++) {
      if (repliesArray[i].thisContext) {
        var c = repliesArray[i].thisContext;
        var r = new RegExp('\n', "g");
        c = c.replace(r, '<br/>');
        if (c.length > 0) {
          that.data.replyArr.push(c);
        }
      }
    }
    var replyArrLength = that.data.replyArr.length;
    console.log('replies:' + replyArrLength);
    if (replyArrLength > 0) {
      for (let i = detailLength; i < replyArrLength; i++) {
        WxParse.wxParse('reply' + i, 'html', that.data.replyArr[i], that);
        if (i === replyArrLength - 1) {
          WxParse.wxParseTemArray("replyTemArray", 'reply', replyArrLength, that)
        }
      }
    }
  },

wxParse组件前端开销很大，后面发现解析到几十条评论的时候界面渲染时间成倍的增加，为了提高前端渲染性能，从网页抓取的是三十条评论，这里加载一次只刷新十条列表，当评论大于六十条时，将reply数据清空。不过wxParse开销大的问题还是没有解决，按道理来说界面应该只渲染新加的列表，setdata渲染界面的机制还是有待研究。

改写了wxParse组件中的wxParseTemArray函数，声明replyTemArray数组，将解析后的评论push进replyTemArray，长度大于60时，清空replyTemArray

function wxParseTemArray(temArrayName, bindNameReg, total, that) {
  var array = [];
  var temData = that.data;
  var obj = null;
  var replyTemArray = temData.replyTemArray;
  for (var i = that.data.replyTemArray.length; i < total; i++) {
    //var simArr = temData[bindNameReg + i].nodes;
    var simArr = temData.allReply[i].nodes;
    //array.push(simArr);
    replyTemArray.push(simArr);
  }

  // temArrayName = temArrayName || 'wxParseTemArray';
  // obj = JSON.parse('{"' + temArrayName + '":""}');
  // obj[temArrayName] = array;
  console.log(replyTemArray);
  // that.setData(obj);
  that.setData({
    replyTemArray: replyTemArray
  });
}

谈论区搜索：运用wxSearch组件，实现谈论区列表的显示和隐藏

 <view class="wxSearchKey" style="display:{{hidden ? 'none':'block'}}">
            <view class="selection" wx:for="{{zoneList}}" wx:key="{{item.initial}}" wx:for-index="index" id="{{index}}" bindtap='visibleClick'>

              <view class="item_letter" wx:if="{{item.zoneInfo.length>0}}">+{{item.initial}}</view>
              <view hidden="{{visibleList[index]}}">
                <view class="item_zone" wx:for="{{item.zoneInfo}}" wx:for-item="ct" wx:key="key" data-id="{{ct.id}}" catchtap="bindBoard">
                  {{ct.id + '(' + ct.zone +')'}}
                </view>
              </view>
            </view>
          </view>

上传formid：将顶部导航栏的button用form组件包裹，以及热门谈论区button，上传formid至服务器，实现每日的十大推送

  <form report-submit bindsubmit="formSubmit">
    <view class="page topics">
      <view class="top-bar">
        <block wx:for="{{navList}}" wx:key="">
          <button id="{{item.id}}" data-index="{{index}}" plain='{{false}}' formType="submit" class="top-bar-item {{index == activeIndex ? 'top-bar-active' : ''}}" catchtap="onTapTag">{{item.title}}</button>
        </block>
      </view>
    </view>
  </form>

总结：小程序坑很多，刚开始走了很多弯路，利用业余时间一边学习一边码代码，通过审核上线的一瞬间感觉几个月的努力是非常值得的。虽然小程序审核过程也非常曲折，所能做的只有不断提交审核然后保持耐心。小程序还有很多需要完善的地方，欢迎大家加微信交流指正。
   希望这个小程序能为繁荣小百合做一点微不足道的贡献，最后祝南大明天更美好。

项目地址https://github.com/Flamingo-Team/LittleLily-Wechat-Service

小程序二维码：

反馈微信：