新闻资讯小程序开发实践

新闻资讯小程序开发实践

在腾讯小程序上线一周年之际，公司又决定把App产品部分内容在小程序上实现。就在小程序刚上线的时候，公司也有一款产品进行了小程序的研发，但后续没有持续的维护。这过了一年的时间，微信也对小程序进行了更多的赋能，更多的场景应用。下面是去年做的小程序，

要解决的问题

要进行这款小程序开发一定要知道需要什么，缺少什么。下面是需要解决的问题，

• 后端同学没有更多的精力配合提供接口开发
• 很多数据请求接口需要HTTPS
• 图片、视频请求需要HTTPS
• 数据统计
  产品提供的原型图如下，
  

问题解决

所有的问题都需要一个一个跟后端、运维同学沟通，还是先把基本的小程序页面给写出来吧，然后再解决相应的问题。

关于接口

1.因为小程序基本是和App数据同步的，所以可以使用App的数据。让人庆幸的是App数据接口支持HTTP和HTTPS，跟客户端的同学沟通后基本沿用了App数据请求模式。这样就解决了两个问题，HTTPS和数据接口。
2.但在这里有个问题，关于视频我们用的是阿里云视频服务，并且使用的是用id去触发sdk,网页端也是使用的js-sdk。显然在这里别说是js无法引入进来（下载下来会让小程序代码大小增加，有风险），css都没有办法。试了一下可以使用小程序原生组件video,这就需要后端同学在接口中加一个视频播放链接字段。当然这工作量很少（可以说分分钟的事儿O(∩_∩)O哈哈~）
3.这里其实有一个接口不支持HTTPS，最后运维的同学进行了一些配置，维护了个HTTPS证书问题也就解决了。刚开始还在担心图片、视频这些请求。是否要HTTPS，这样图片服务器、还有视频都要支持。这就没有那么简单了（一年前也忘了是否图片需要支持，似乎没有过多的配置），最后咨询了一些大佬，担心是多余的。
4.数据统计的问题，用户数据统计是最重要了。之前看到过一个专门为小程序服务的数据统计公司——阿拉丁，注册账号看了下，似乎和百度统计差不多。只不过它是专属服务于小程序的。sdk加入也比较简单，现阶段也不需要太多的用户行为数据统计，加入些简单的统计即可。
所有的问题都一一得到解决，下面是最终写出来的页面

开发过程中遇到的问题

1.在视频列表页需要有个页面内分享，点击页面内图标实现分享。之前我是知道这样似乎是不行的，但毕竟小程序开放了很多接口。翻看了文档，支持页面内分享。

“通过给 button 组件设置属性 open-type="share"，可以在用户点击按钮后触发 Page.onShareAppMessage() 事件，如果当前页面没有定义此事件，则点击后无效果。相关组件：button”

这是官方文档的说法，所以必须用button组件，我把分享图标上盖个button，透明度设为0。
代码如下

<view class="right-block">
  <image src="../../images/icon_share.png"></image>
  <button open-type="share" class="share-btn" data-id="{{item.id}}" data-src="{{item.ali_vidio_url}}" data-poster="{{item.image}}">&nbsp;</button>
</view>

.left-block, .right-block{
   50%;
  height: 76rpx;
  float: left;
  position: relative;
}

.left-block image{
  margin: 20rpx 0 0 20rpx;
   37rpx;
  height: 37rpx;
  vertical-align: bottom;
}

.left-block text{
  display: inline-block;
  font-size: 24rpx;
  color: #b9b9b9;
  margin: 20rpx 0 0 10rpx;
}

.right-block image{
   33rpx;
  height: 34rpx;
  float: right;
  margin: 20rpx 20rpx 0 0;
}

.share-btn{
  position: absolute;
  right: 0;
  top: 0;
  height:76rpx;
   76rpx;
  z-index:10;
  opacity: 0;
}

在这里需要判断分享是从哪里来的，判断如下

onShareAppMessage: function (res) {
  if (res.from === 'button') {
    // 来自页面内转发按钮
    
    return {
      title: '每日经济新闻',
      path: 'pages/videoDetail/videoDetail?id=' + res.target.dataset.id + '&src=' + res.target.dataset.src + '&poster=' + res.target.dataset.poster,
      success: function (res) {
        // 转发成功
      },
      fail: function (res) {
        // 转发失败
      }
    }
  }

  return {
    title: '每日经济新闻',
    path: 'pages/videoList/videoList',
    success: function(res) {},
    fail: function(res) {}
  }
}

2.文章详情接口拿到的是一段富文本，但小程序有不能解析富文本。在GitHub上找到一个开源项目wxParse,可以很好地解决这个问题。代码如下

/**调用如下**/
WxParse.wxParse('diggest', 'html', res.data.digest, that, 5);
WxParse.wxParse('content', 'html', res.data.content, that, 5);

就这样这款小程序就这样被搞定了，也不复杂很常规。