258资源分享网

发现一款好好看的app 名字叫做知识星球 (虽然整款app除了绿色就还是绿色 但是还是好看啊) 不多扯 我开始说我的项目吧

项目地址：AndIMissU/Stars 项目环境和资源需求网址：

微信开发者工具，这个可以去微信官网下载，根据自己的系统下载相应版本，下载后记得去微信公众平台登陆并在设置里面的开发设置找到自己的appID（微信公众平台），这个在开发小程序的时候会用到；

Easy Mock， 这是一款模拟数据的网站，在里面创建自己的数据，它会生成一个url，这个方便我们用request获取数据；

Visual Studio Code，这是写代码和看代码的编程软件，应该不陌生的（主要这款软件占用的内存小，需要用到什么可以下载安装，比一股脑儿全安装的方便实用吧）；

iconfont，这是一个拥有我们平时用的图标的图标库，里面超级多的图片（虽然都是相似的，但是应该会有你想要的那一款）。

项目功能：

获取EasyMock的数据；

个人页面显示用户信息（用户信息，星球信息，钱包信息）；

创建星球页面的遮罩设置、scroll-view、弹窗以及本地存储；

首页星球的动态显示；

初始页面到主页面的自动跳转。

具体功能解析： 1. 获取EasyMock的数据：

这里是写了一个获取用户信息function，再在onLoad函数里面调用，这样能使一个函数只做一件事，看起来就方便和清楚一些。

/* 获取星球信息 */ getStarsInfo: function() { var that = this; wx.request({ url:'https://www.easy-mock.com/mock/5a236208e27b936ea88bdb14/starsdata/getUserInfo#!method=get', method:'GET', success: function(res){ var data = res.data.data[app.data.currentUser]; that.setData({ stars: data.stars // 这里的stars是一个数组，存放着每个星球的信息 }); } }); }, /* 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getStarsInfo(); }

2. 个人页面显示用户信息：

这个里面的用红色框框起来的都是从EasyMock获取到的数据，然后显示出来：

个人页面显示

<view class="page-hd-info"> <view class="page-hd-border"> <view class="page-hd__pic"> <image src=http://www.yiyongtong.com/archives/"{{userPic}}"/> </view> </view> <view class="page-hd__name">{{name}}</view> <view class="page-hd_mythings"> <view class="mythings_push" bindtap="tomyPush"> <view class="mythings_num">{{starslen}}</view> <view class="mythings_text">我的发表</view> </view> <view class="mythings_collect"> <view class="mythings_num">{{collectLen}}</view> <view class="mythings_text">我的收藏</view> </view> </view> </view>

3. 创建星球页面的遮罩设置、scroll-view、弹窗以及本地存储：

遮罩层设置

首先在wxml里面添加一个铺满整个页面的view

敲黑板的重点 1：（当有东西和遮罩层一起显示时，则需要将该东西放在遮罩层的view的外面，不然这个东西也会被遮罩层里设置的透明度所影响）

<view wx:if="{{display}}" class="hiddenBack" bindtap="finishChoose" > </view>

再写view的css样式，必须得设置这个view的透明度，不然就感觉像跳转到另外一个页面一样了

敲黑板的重点 2: （一定要设置遮罩层的z-index ，这个值要比要遮住的页面的z-index要大，这样才能完美的遮罩住）

以下是view的css样式：

.hiddenBack { position: absolute; z-index: 7; background: black; width: 100%; height: 100vh; opacity: .7; }

再在view里面加了一个wx: if="{{display}}"，当display为true时，遮罩层显示，反之则隐藏，所以同样的，view里面也加了一个点击事件，表示点击遮罩层时隐藏遮罩层，下面是js的代码：

/* 选择完成 关闭遮罩层 */ finishChoose: function(event) { this.setData({ display: false }); }

scroll-view 设置

在遮罩层view外面添加一个scroll-view，这个也是同遮罩层一起显示的：

小细节1 : 要想scroll-view横向滑动，就应该在scroll-view里面添加一句 scroll-x，同样的，纵向滑动就是 scroll-y ，还有就是scroll-view阻止了页面回弹，就无法使用onPullDownRefresh了

<scroll-view scroll-x wx:if="{{display}}" class="chooseBack"> ...... </scroll-view>

scroll-view的css样式（由于我这个scroll-view是要显示在遮罩层的上方，所以z-index的值比遮罩层的值大）

.chooseBack { position: absolute; margin-top: 1024rpx; z-index: 9; width: 100%; height: 183.3rpx; background: white; white-space: nowrap; display: inline-block; }

弹窗设置

当我们创建星球时，输入的名字为空或者星球的属性没有填入，这时候就需要一个弹窗来提示我们什么东西没有填入 .

一开始我是想用icon提示的，然后写入了如下代码：

wx.showToast({ title:'请输入星球名字', icon: 'warn', duration: 2000 });

然后发现icon一直都是success的那个图片我就换了另外一种方式