發(fā)現(xiàn)一款好好看的app 名字叫做知識(shí)星球 (雖然整款app除了綠色就還是綠色 但是還是好看啊) 不多扯 我開始說(shuō)我的項(xiàng)目吧

項(xiàng)目地址：AndIMissU/Stars

項(xiàng)目環(huán)境和資源需求網(wǎng)址：

1. 微信開發(fā)者工具，這個(gè)可以去微信官網(wǎng)下載，根據(jù)自己的系統(tǒng)下載相應(yīng)版本，下載后記得去微信公眾平臺(tái)登陸并在設(shè)置里面的開發(fā)設(shè)置找到自己的appID（微信公眾平臺(tái)），這個(gè)在開發(fā)小程序的時(shí)候會(huì)用到；
2. Easy Mock， 這是一款模擬數(shù)據(jù)的網(wǎng)站，在里面創(chuàng)建自己的數(shù)據(jù)，它會(huì)生成一個(gè)url，這個(gè)方便我們用request獲取數(shù)據(jù)；
3. Visual Studio Code，這是寫代碼和看代碼的編程軟件，應(yīng)該不陌生的（主要這款軟件占用的內(nèi)存小，需要用到什么可以下載安裝，比一股腦兒全安裝的方便實(shí)用吧）；
4. iconfont，這是一個(gè)擁有我們平時(shí)用的圖標(biāo)的圖標(biāo)庫(kù)，里面超級(jí)多的圖片（雖然都是相似的，但是應(yīng)該會(huì)有你想要的那一款）。

項(xiàng)目功能：

1. 獲取EasyMock的數(shù)據(jù)；
2. 個(gè)人頁(yè)面顯示用戶信息（用戶信息，星球信息，錢包信息）；
3. 創(chuàng)建星球頁(yè)面的遮罩設(shè)置、scroll-view、彈窗以及本地存儲(chǔ)；
4. 首頁(yè)星球的動(dòng)態(tài)顯示；
5. 初始頁(yè)面到主頁(yè)面的自動(dòng)跳轉(zhuǎn)。

具體功能解析：

1. 獲取EasyMock的數(shù)據(jù)：

這里是寫了一個(gè)獲取用戶信息function，再在onLoad函數(shù)里面調(diào)用，這樣能使一個(gè)函數(shù)只做一件事，看起來(lái)就方便和清楚一些。

/* 獲取星球信息 */
  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是一個(gè)數(shù)組，存放著每個(gè)星球的信息
        }); 
      }
    });
  },
  /* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載 */
  onLoad: function (options) {
    this.getStarsInfo();
  }

2. 個(gè)人頁(yè)面顯示用戶信息：

這個(gè)里面的用紅色框框起來(lái)的都是從EasyMock獲取到的數(shù)據(jù)，然后顯示出來(lái)：

<view class="page-hd-info">
      <view class="page-hd-border">
            <view class="page-hd__pic">
                  <image src="{{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">我的發(fā)表</view>
            </view>
            <view class="mythings_collect">
                  <view class="mythings_num">{{collectLen}}</view> 
                  <view class="mythings_text">我的收藏</view>
            </view>
      </view>
 </view>

3. 創(chuàng)建星球頁(yè)面的遮罩設(shè)置、scroll-view、彈窗以及本地存儲(chǔ)：

• 遮罩層設(shè)置

首先在wxml里面添加一個(gè)鋪滿整個(gè)頁(yè)面的view

敲黑板的重點(diǎn) 1：（當(dāng)有東西和遮罩層一起顯示時(shí)，則需要將該東西放在遮罩層的view的外面，不然這個(gè)東西也會(huì)被遮罩層里設(shè)置的透明度所影響）

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

再寫view的css樣式，必須得設(shè)置這個(gè)view的透明度，不然就感覺像跳轉(zhuǎn)到另外一個(gè)頁(yè)面一樣了

敲黑板的重點(diǎn) 2: （一定要設(shè)置遮罩層的z-index ，這個(gè)值要比要遮住的頁(yè)面的z-index要大，這樣才能完美的遮罩住）

以下是view的css樣式：

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

再在view里面加了一個(gè)wx: if="{{display}}"，當(dāng)display為true時(shí)，遮罩層顯示，反之則隱藏，所以同樣的，view里面也加了一個(gè)點(diǎn)擊事件，表示點(diǎn)擊遮罩層時(shí)隱藏遮罩層，下面是js的代碼：

/* 選擇完成 關(guān)閉遮罩層 */
  finishChoose: function(event) {
    this.setData({
      display: false
    });
  }

• scroll-view 設(shè)置

在遮罩層view外面添加一個(gè)scroll-view，這個(gè)也是同遮罩層一起顯示的：

小細(xì)節(jié)1 : 要想scroll-view橫向滑動(dòng)，就應(yīng)該在scroll-view里面添加一句 scroll-x，同樣的，縱向滑動(dòng)就是 scroll-y ，還有就是scroll-view阻止了頁(yè)面回彈，就無(wú)法使用onPullDownRefresh了

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

scroll-view的css樣式（由于我這個(gè)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;
}

• 彈窗設(shè)置

當(dāng)我們創(chuàng)建星球時(shí)，輸入的名字為空或者星球的屬性沒有填入，這時(shí)候就需要一個(gè)彈窗來(lái)提示我們什么東西沒有填入 .

一開始我是想用icon提示的，然后寫入了如下代碼：

 wx.showToast({
      title:'請(qǐng)輸入星球名字',
      icon: 'warn',
      duration: 2000
    });

然后發(fā)現(xiàn)icon一直都是success的那個(gè)圖片我就換了另外一種方式

敲黑板的重點(diǎn)3 : 微信小程序showToast這個(gè)提供的只有success和loading這兩個(gè)icon，想用其他的只能自己提供圖片吧，這個(gè)是看API看出來(lái)的，一定要認(rèn)真仔細(xì)的看API！！！

我換成了showModal 這樣能讓用戶更清楚的知道自己哪些信息沒有填寫

   wx.showModal({
        content: '請(qǐng)選擇星球?qū)傩?#39;,
        showCancel: false,     //不顯示取消按鈕
        confirmText: '確定'
      });

• 本地存儲(chǔ)

本地存儲(chǔ)是一個(gè)很重要的也很方便的東西，比如說(shuō)我們聽歌時(shí)會(huì)緩存一些歌到自己的手機(jī)還有離線東西都是可以讓我們更快的得到數(shù)據(jù)。

創(chuàng)建星球是需要一些東西，比如星球名字、星球背景、星球所屬的用戶和星球的簡(jiǎn)介(選填)，這些可能都是要存到本地存儲(chǔ)的，然后再在其他頁(yè)面獲取。

思路：首先我想到的是傳多個(gè)值到storage里面去，這樣就可能設(shè)置多個(gè)key，然而每個(gè)key都只放一個(gè)數(shù)據(jù)就顯得很繁瑣和浪費(fèi)空間，于是就想到了傳一個(gè)對(duì)象過(guò)去，發(fā)現(xiàn)省了很多事，但是又出問(wèn)題了，每次新建時(shí)都是改的同一個(gè)對(duì)象，也就是說(shuō)只能創(chuàng)建一個(gè)對(duì)象，并且這個(gè)對(duì)象在下次創(chuàng)建時(shí)會(huì)被新的數(shù)據(jù)更改掉，最后想到了數(shù)組，可以用push的方法把每次新創(chuàng)建的星球信息push進(jìn)原來(lái)的數(shù)組，于是就解決了本地存儲(chǔ)出現(xiàn)的問(wèn)題了。

實(shí)現(xiàn)過(guò)程：

(1) 寫入setStorage方法，將新設(shè)的數(shù)組傳入原有的數(shù)組

敲黑板的重點(diǎn) 4 ：微信小程序好像不支持push，用push的時(shí)候一直報(bào)錯(cuò)，于是我就用concat了。concat也是可以插入數(shù)據(jù)的，但是concat不能改變?cè)瓟?shù)組，所以需要將concat后的數(shù)組賦值給原數(shù)組。push是屬于另外一個(gè)派別的，它可以直接改變?cè)瓟?shù)組

    var newinfo = [{}];
      newinfo[0].starName = this.data.starname;
      newinfo[0].starpic = this.data.starpic;
      newinfo[0].type = this.data.type;
      this.data.info = newinfo.concat(this