微信小程序娱乐---哇哦窝

IT 微信小程序 wxapp

自从去年微信小程序诞生到现在已经有段时间了，个人还是挺看好小程序的，去年的时候就打算玩一玩小程序，但是一直都抽不出时间。自从上次弄了台阿里云ECS之后，就又有了玩玩小程序的欲望，于是花了两个晚上的时间，算是开发完成了。界面很简单，如下

这里讲下我遇到的一些问题

布局

本来我使用的是scroll-view 然后发现这种添加下拉刷新，上拉加载功能的时候效果不是很好，没有使用view体验的舒服，最终我使用的是view然后再onPullDownRefresh方法中处理加载的数据。

新闻详情页

小程序本身是不支持html布局的，于是我使用了开源代码wxParse转换的。于是我的后台代码将新闻详情页的主题内容html抽了出来，使用wxParse转换了一下，就如上图所示，样式自己调了下，还能接受，新闻api是用的阿里云的新闻接口。

外链

小程序是不允许请求其他域名下面的服务，本地调试除外，所以我新闻列表和新闻详情都是在同一域名下解析的。

颜色搭配

下面的图标是我自己简单制作的，颜色搭配也是自己搭配的，所以，尽管吐槽我的搭配吧。。。

初衷

我玩小程序的初衷是想弄些精简的内容，自己在上下班的时候浏览浏览，不需太多，但是最终微信没有给通过，说是涉及到了资讯，需要使用企业微信号。。。

废话不多说，代码在下面，感兴趣的玩一玩
目录

.
├── app.js
├── app.json
├── app.wxss
├── images
├── page
├── README.md
├── utils
└── wxParse

主要的布局

<view class="grid">
  <view class="list" scroll-top="{{scrollTop}}" scroll-y style="height:{{scrollHeight}}px;" class="list" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh">
    <view class="card short-card" wx:for="{{list}}" wx:for-item="item">
      <view>
        <navigator url="../content/index?url={{item.url}}&title={{item.title}}" hover-class="changestyle"><text class="title">{{item.title}}</text></navigator>
      </view>
      <!--<image src="{{item.thumbnail_pic_s}}" style="width: {{imagewidth}}px; height: {{imageheight}}px;" class="new-img"></image>-->
      <view>
        <text class="tag">发布于 {{ item.date }}, 来自 {{item.author_name}}</text>
      </view>
    </view>
  </view>
  <view class="body-view">
    <loading hidden="{{hidden}}" bindchange="loadingChange">
      拼命加载中...
    </loading>
  </view>
</view>

js

//text.js
// var imageUtil = require('../../utils/util.js');  
var url = 'http://wangxc.club:8080/api/news';
var GetList = function (that) {
  that.setData({
    hidden: false
  });
  wx.request({
    url: url,
    success: function (res) {
      wx.stopPullDownRefresh() //停止下拉刷新
      // console.log(res.data.data)
      that.setData({
        hidden: true,
        list: res.data.data
      });
      wx.hideNavigationBarLoading();
    }
  })
}
Page({
  data: {
    hidden: true,
    list: [],
    scrollTop: 0,
    scrollHeight: 0
  },
  onLoad: function () {
    //  这里要非常注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        console.info(res.windowHeight);
        that.setData({
          scrollHeight: res.windowHeight
        });
      }
    });
  },
  // imageLoad: function (e) {
  //   var imageSize = imageUtil.imageUtil(e)
  //   this.setData({
  //     imagewidth: imageSize.imageWidth,
  //     imageheight: imageSize.imageHeight
  //   })  
  // },
  onShow: function () {
    //  在页面展示之后先获取一次数据
    var that = this;
    GetList(that);
  },
  onHide: function () {
    // 页面隐藏
  },
  bindDownLoad: function () {
    var that = this;
    GetList(that);
  },
  onUnload: function () {
    // 页面关闭
  },
  scroll: function (event) {
    // console.log(event.detail.scrollTop)
    this.setData({
      scrollTop: event.detail.scrollTop
    });
  },
  refresh: function (event) {
    wx.showNavigationBarLoading();
    this.setData({
      list: [],
      scrollTop: 0
    });
    GetList(this)
  },
  onPullDownRefresh: function () {
    // wx.showNavigationBarLoading() //在标题栏中显示加载
    //let newwords = [{ message: '从天而降', viewid: '-1', time: util.formatTime(new Date), greeting: 'hello' }].concat(this.data.words);
    GetList(this)
    // setTimeout(() => {
    //   this.setData({
    //     words: newwords
    //   })
    //   wx.hideNavigationBarLoading() //完成停止加载
    //   wx.stopPullDownRefresh() //停止下拉刷新
    // }, 2000) 
  },
  onReachBottom: function () {
    GetList(this)
  }  
})

目前代码就这些，功能的话等我有了新的想法和创意了，我会接着去开发~
小程序代码 https://github.com/vector4wang/vw
后台服务 https://github.com/vector4wang/spring-boot-quick/tree/master/quick-wx-api

欢迎浏览我的个人博客 http://vector4wang.tk/