微信小程序實戰(zhàn)--仿知識星球(一)
發(fā)現一款好好看的app 名字叫做知識星球 (雖然整款app除了綠色就還是綠色 但是還是好看啊) 不多扯 我開始說我的項目吧
項目地址：AndIMissU/Stars
項目環(huán)境和資源需求網址：
- 微信開發(fā)者工具，這個可以去微信官網下載，根據自己的系統(tǒng)下載相應版本，下載后記得去微信公眾平臺登陸并在設置里面的開發(fā)設置找到自己的appID（微信公眾平臺），這個在開發(fā)小程序的時候會用到；
- Easy Mock， 這是一款模擬數據的網站，在里面創(chuàng)建自己的數據，它會生成一個url，這個方便我們用request獲取數據；
- Visual Studio Code，這是寫代碼和看代碼的編程軟件，應該不陌生的（主要這款軟件占用的內存小，需要用到什么可以下載安裝，比一股腦兒全安裝的方便實用吧）；
- iconfont，這是一個擁有我們平時用的圖標的圖標庫，里面超級多的圖片（雖然都是相似的，但是應該會有你想要的那一款）。
項目功能：
- 獲取EasyMock的數據；
- 個人頁面顯示用戶信息（用戶信息，星球信息，錢包信息）；
- 創(chuàng)建星球頁面的遮罩設置、scroll-view、彈窗以及本地存儲；
- 首頁星球的動態(tài)顯示；
- 初始頁面到主頁面的自動跳轉。
具體功能解析：
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是一個數組，存放著每個星球的信息
});
}
});
},
/* 生命周期函數--監(jiān)聽頁面加載 */
onLoad: function (options) {
this.getStarsInfo();
}
2. 個人頁面顯示用戶信息：
這個里面的用紅色框框起來的都是從EasyMock獲取到的數據，然后顯示出來：
<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)建星球頁面的遮罩設置、scroll-view、彈窗以及本地存儲：
- 遮罩層設置
首先在wxml里面添加一個鋪滿整個頁面的view
敲黑板的重點 1：（當有東西和遮罩層一起顯示時，則需要將該東西放在遮罩層的view的外面，不然這個東西也會被遮罩層里設置的透明度所影響）
<view
wx:if="{{display}}"
class="hiddenBack"
bindtap="finishChoose" >
</view>
再寫view的css樣式，必須得設置這個view的透明度，不然就感覺像跳轉到另外一個頁面一樣了
敲黑板的重點 2: （一定要設置遮罩層的z-index ，這個值要比要遮住的頁面的z-index要大，這樣才能完美的遮罩?。?/p>
以下是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，這個也是同遮罩層一起顯示的：
小細節(jié)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;
}
- 彈窗設置
當我們創(chuàng)建星球時，輸入的名字為空或者星球的屬性沒有填入，這時候就需要一個彈窗來提示我們什么東西沒有填入 .
一開始我是想用icon提示的，然后寫入了如下代碼：
wx.showToast({
title:'請輸入星球名字',
icon: 'warn',
duration: 2000
});
然后發(fā)現icon一直都是success的那個圖片我就換了另外一種方式
敲黑板的重點3 : 微信小程序showToast這個提供的只有success和loading這兩個icon，想用其他的只能自己提供圖片吧，這個是看API看出來的，一定要認真仔細的看API！??！
我換成了showModal 這樣能讓用戶更清楚的知道自己哪些信息沒有填寫
wx.showModal({
content: '請選擇星球屬性',
showCancel: false, //不顯示取消按鈕
confirmText: '確定'
});
- 本地存儲
本地存儲是一個很重要的也很方便的東西，比如說我們聽歌時會緩存一些歌到自己的手機還有離線東西都是可以讓我們更快的得到數據。
創(chuàng)建星球是需要一些東西，比如星球名字、星球背景、星球所屬的用戶和星球的簡介(選填)，這些可能都是要存到本地存儲的，然后再在其他頁面獲取。
思路：首先我想到的是傳多個值到storage里面去，這樣就可能設置多個key，然而每個key都只放一個數據就顯得很繁瑣和浪費空間，于是就想到了傳一個對象過去，發(fā)現省了很多事，但是又出問題了，每次新建時都是改的同一個對象，也就是說只能創(chuàng)建一個對象，并且這個對象在下次創(chuàng)建時會被新的數據更改掉，最后想到了數組，可以用push的方法把每次新創(chuàng)建的星球信息push進原來的數組，于是就解決了本地存儲出現的問題了。
實現過程：
(1) 寫入setStorage方法，將新設的數組傳入原有的數組
敲黑板的重點 4 ：微信小程序好像不支持push，用push的時候一直報錯，于是我就用concat了。concat也是可以插入數據的，但是concat不能改變原數組，所以需要將concat后的數組賦值給原數組。push是屬于另外一個派別的，它可以直接改變原數組
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
