發現(xian)一款(kuan)好(hao)好(hao)看的app 名字叫做知識(shi)星球 (雖然(ran)整款(kuan)app除了綠色(se)就還(huan)是綠色(se) 但是還(huan)是好(hao)看啊) 不(bu)多扯 我開(kai)始(shi)說我的項目吧

項目地址：AndIMissU/Stars

項目環境和資源需求網址：

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

項目功能：

1. 獲取EasyMock的數據；
2. 個人頁面顯示用戶信息（用戶信息，星球信息，錢包信息）；
3. 創建星球頁面的遮罩設置、scroll-view、彈窗以及本地存儲；
4. 首頁星球的動態顯示；
5. 初始頁面到主頁面的自動跳轉。

具體功能解析：

1. 獲取EasyMock的數據：

這(zhe)里(li)是(shi)寫了一個獲取用戶信息(xi)function，再在onLoad函數里(li)面調(diao)用，這(zhe)樣能使一個函數只做一件事(shi)，看起來就方(fang)便和(he)清(qing)楚一些。

/* 獲取星球信息 */
  getStarsInfo: function() {
    var that = this;
    wx.request({
      url:'//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. 個人頁面顯示用戶信息：

這個里(li)面的用(yong)紅色框框起來的都是從(cong)EasyMock獲取到的數據，然后顯(xian)示(shi)出來：

<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">我的發表</view>
            </view>
            <view class="mythings_collect">
                  <view class="mythings_num">{{collectLen}}</view> 
                  <view class="mythings_text">我的收藏</view>
            </view>
      </view>
 </view>

3. 創建星球頁面的遮罩設置、scroll-view、彈窗以及本地存儲：

• 遮罩層設置

首先在wxml里(li)面(mian)添加(jia)一個鋪滿整個頁面(mian)的view

敲黑(hei)板(ban)的(de)(de)重點(dian) 1：（當有東西和遮(zhe)罩(zhao)層(ceng)一起顯示時，則需要將該東西放在遮(zhe)罩(zhao)層(ceng)的(de)(de)view的(de)(de)外(wai)面(mian)，不然這個(ge)東西也會被遮(zhe)罩(zhao)層(ceng)里設置的(de)(de)透明度所(suo)影響(xiang)）

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

再寫(xie)view的css樣(yang)式，必須得設置這個view的透明(ming)度(du)，不然就感覺像跳轉(zhuan)到另外一個頁面一樣(yang)了

敲黑板的(de)重(zhong)點 2: （一定(ding)要設置遮罩層的(de)z-index ，這(zhe)個值要比要遮住的(de)頁面的(de)z-index要大(da)，這(zhe)樣才能完美(mei)的(de)遮罩住）

以下(xia)是view的css樣(yang)式：

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

再在(zai)view里面加了(le)一個wx: if="{{display}}"，當display為true時(shi)，遮(zhe)罩(zhao)層(ceng)顯示(shi)，反之(zhi)則(ze)隱藏，所以(yi)同樣的(de)，view里面也加了(le)一個點(dian)擊(ji)事(shi)件，表(biao)示(shi)點(dian)擊(ji)遮(zhe)罩(zhao)層(ceng)時(shi)隱藏遮(zhe)罩(zhao)層(ceng)，下(xia)面是js的(de)代碼：

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

• scroll-view 設置

在(zai)遮(zhe)罩層view外面添加一(yi)個scroll-view，這個也是(shi)同(tong)遮(zhe)罩層一(yi)起顯示的：

小細節(jie)1 : 要想scroll-view橫向(xiang)滑動(dong)，就應該在scroll-view里面添(tian)加一句(ju) scroll-x，同樣的，縱向(xiang)滑動(dong)就是(shi) scroll-y ，還有就是(shi)scroll-view阻止(zhi)了頁面回彈，就無法使(shi)用onPullDownRefresh了

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

scroll-view的(de)css樣式（由(you)于我這個scroll-view是要(yao)顯(xian)示在遮罩層的(de)上方，所以z-index的(de)值(zhi)(zhi)比(bi)遮罩層的(de)值(zhi)(zhi)大）

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

• 彈窗設置

當我(wo)們創建星球(qiu)時，輸(shu)入(ru)的名(ming)字為(wei)空或者星球(qiu)的屬(shu)性沒有填入(ru)，這(zhe)時候就需要一個(ge)彈窗來提示我(wo)們什么(me)東西沒有填入(ru) .

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

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

然后(hou)發(fa)現icon一直都(dou)是success的那個圖片我就換了另外(wai)一種方(fang)式(shi)

敲(qiao)黑板的(de)重點3 : 微(wei)信小程(cheng)序showToast這個提供的(de)只(zhi)有success和(he)loading這兩個icon，想用(yong)其他的(de)只(zhi)能自己(ji)提供圖片吧(ba)，這個是看API看出來的(de)，一定要認真(zhen)仔細的(de)看API！！！

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

   wx.showModal({
        content: '請選擇星球屬性',
        showCancel: false,     //不顯示取消按鈕
        confirmText: '確定'
      });

• 本地存儲

本地存(cun)儲是一(yi)個很重要(yao)的(de)也很方便的(de)東(dong)西，比如說我們(men)聽歌時會緩存(cun)一(yi)些(xie)歌到(dao)自己的(de)手(shou)機還(huan)有離(li)線東(dong)西都是可以讓(rang)我們(men)更快的(de)得到(dao)數(shu)據(ju)。

創(chuang)建星(xing)球(qiu)是需要(yao)一些東(dong)西，比如星(xing)球(qiu)名(ming)字、星(xing)球(qiu)背景、星(xing)球(qiu)所屬的(de)用戶和星(xing)球(qiu)的(de)簡介(選填)，這些可能都是要(yao)存到(dao)本地(di)存儲的(de)，然后再在其他頁(ye)面獲取。

思(si)路(lu)：首先(xian)我想(xiang)到(dao)的(de)是傳多個(ge)(ge)值到(dao)storage里(li)面去(qu)，這(zhe)樣就(jiu)可(ke)能(neng)設置(zhi)多個(ge)(ge)key，然而每(mei)個(ge)(ge)key都只放一(yi)個(ge)(ge)數據(ju)就(jiu)顯得(de)很繁瑣和(he)浪費空間，于是就(jiu)想(xiang)到(dao)了(le)傳一(yi)個(ge)(ge)對(dui)(dui)象過去(qu)，發現省了(le)很多事，但是又(you)出問題了(le)，每(mei)次(ci)新建(jian)(jian)時都是改(gai)的(de)同一(yi)個(ge)(ge)對(dui)(dui)象，也就(jiu)是說只能(neng)創建(jian)(jian)一(yi)個(ge)(ge)對(dui)(dui)象，并(bing)且這(zhe)個(ge)(ge)對(dui)(dui)象在下(xia)次(ci)創建(jian)(jian)時會被新的(de)數據(ju)更改(gai)掉，最后想(xiang)到(dao)了(le)數組，可(ke)以用push的(de)方法(fa)把(ba)每(mei)次(ci)新創建(jian)(jian)的(de)星球(qiu)信息push進原來的(de)數組，于是就(jiu)解決了(le)本(ben)地存儲(chu)出現的(de)問題了(le)。

實現過程：

(1) 寫(xie)入setStorage方法，將(jiang)新設的(de)數(shu)組傳入原有的(de)數(shu)組

敲黑板的重點 4 ：微(wei)信小程序好像(xiang)不(bu)支持(chi)push，用push的時候一(yi)直(zhi)報錯，于是(shi)我就(jiu)用concat了。concat也(ye)是(shi)可(ke)以(yi)(yi)插入數據的，但(dan)是(shi)concat不(bu)能改變原(yuan)數組(zu)，所(suo)以(yi)(yi)需要將concat后(hou)的數組(zu)賦值給原(yuan)數組(zu)。push是(shi)屬于另外一(yi)個派別的，它可(ke)以(yi)(yi)直(zhi)接(jie)改變原(yuan)數組(zu)

    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