Fork me on GitHub

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

发表于 | 更新于 | 分类于 | 评论数：

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

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

体验版

obgwL0QWreaWviTCsQiDQJu-GfF0.jpg

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

布局

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

新闻详情页

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

外链

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

颜色搭配

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

初衷

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

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

1
2
3
4
5
6
7
8
9
.
├── app.js
├── app.json
├── app.wxss
├── images
├── page
├── README.md
├── utils
└── wxParse

主要的布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
//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

-------------本文结束感谢您的阅读-------------