一：初始化顯示指定界面

 

一般對于后臺功能比如商家、管理員等，需要先登錄才能進(jìn)入到app，所以需要在打開的時候來判斷用戶是否登錄，從而決定是進(jìn)入app還是登錄界面。

那么在小程序中，我們怎么來進(jìn)行登錄的判斷呢？

大家都知道，在小程序中，我們注冊頁面是通過 app.json 這個文件 的pages字段。

1. {
2. "pages": [
3.  
4. "page/login/index",
5. "page/index/index",
6. ]
7. }

注冊之后，打開小程序會自動顯示注冊在最前面的頁面，這里也就是 page/login/index

你會發(fā)現(xiàn)就算你登錄之后，也還是會進(jìn)入到登錄界面，但是我們需要在用戶登錄之后跳轉(zhuǎn)到page/index/index，所以這里我們需要加邏輯判斷來切換跳轉(zhuǎn)

由于注冊入口是app.json而非js文件，所以這里不能加條件判斷，看來不能從這里下手

對于單入口程序來說，一般都是在入口文件進(jìn)行判斷，看文檔我們會發(fā)現(xiàn)小程序的入口文是app.js，并有對應(yīng)的生命周期 

 

 

 

 

我們或許可以在onLaunch，做處理

1. App({
2. onLaunch: function () {
3.  
4. let user = UserModel.getUserSync();
5.  
6. if(user) {
7. wx.redirectTo({url: 'page/index/index'});
8. return
9. }
10. }
11. });

上面邏輯就是如果用戶登錄，跳轉(zhuǎn)到首頁，如果首頁是tabbar中的，請使用wx.switchTab方法，看上去很完美。

運行測試一下

1. WAService.js:3 jsEnginScriptError
2. Cannot read property 'webviewId' of undefined
3. TypeError: Cannot read property 'webviewId' of undefined
4. at x (http://700744025.appservice.open.weixin.qq.com/WAService.js:5:26872)
5. at .<anonymous> (http://700744025.appservice.open.weixin.qq.com/WAService.js:5:28821)
6. at http://700744025.appservice.open.weixin.qq.com/WAService.js:6:688
7. at http://700744025.appservice.open.weixin.qq.com/WAService.js:4:2530
8. at Array.forEach (native)
9. at .<anonymous> (http://700744025.appservice.open.weixin.qq.com/WAService.js:4:2510)
10. at http://700744025.appservice.open.weixin.qq.com/WAService.js:4:11420
11. at n.<anonymous> (http://700744025.appservice.open.weixin.qq.com/asdebug.js:1:11421)
12. at n.emit (http://700744025.appservice.open.weixin.qq.com/asdebug.js:1:7932)
13. at r (http://700744025.appservice.open.weixin.qq.com/asdebug.js:1:1470)

我們可以在調(diào)試用看到如上報錯，找了一下微信的文檔

不要在 onLaunch 的時候調(diào)用 getCurrentPage()，此時 page 還沒有生成。

問題應(yīng)該就是出在這里，在onLaunch 執(zhí)行的時候，還沒完全注冊好，那么看來app.js 中也進(jìn)行無法處理

單入口行不通，看來只能在某些特定的入口進(jìn)行判斷了

最后的處理辦法是在所有需要判斷登錄的界面增加一個登錄檢測

1. // page/index/index
2. var app = getApp();
3. Page({
4. data: {
5. ...
6. },
7. onLoad: function(options) {
8.  
9. if(!app.checkLogin()) {
10.  
11. return false;
12. }
13. ...
14. }
15. })

1. // app.js
2. import UserModel from 'model/UserModel';
3. App({
4. onLaunch: function () {
5.  
6. let user = UserModel.getUserSync();
7. if(user) {
8. this.saveUser(user);
9. }
10. },
11.  
12. checkLogin: function() {
13.  
14. if(!this.globalData.hasLogin) {
15.  
16. wx.redirectTo({url: '/page/login/index'});
17. return false;
18. }
19. return true;
20. },
21.  
22. saveUser: function(user) {
23.  
24. this.globalData.user = user;
25. this.globalData.hasLogin = true;
26. },
27.  
28. globalData: {
29. hasLogin: false,
30. user: {}
31. }
32. })

為了方法，將檢測登錄的方法放在了app.js 文件中，其他頁面可以通過 getApp.checkLogin() 來進(jìn)行調(diào)用

對于需要登錄的小程序，若是在app.js 就能完成判斷和跳轉(zhuǎn)，會方便很多

如果有更好的辦法，請告訴我

二：scroll-view上拉加載與page的下拉刷新沖突

 

我們都知道下拉刷新和上拉加載更多在移動端是非常常用的一個功能，做過原生app或是react-native的同學(xué)都知道，列表的刷新/加載都是通過ListView/UITableview來實現(xiàn)的，而在小程序也有相應(yīng)的組件

上拉加載

根據(jù)文檔，我們可以找到scroll-view組件 

 

 

 

 

上拉加載主要有通過屬性lower-threshold 和 bindscrolltolower 來實現(xiàn)，這兩個屬性，我們可以控制在距離底部lower-threshold位置處，執(zhí)行我們的bindscrolltolower回調(diào)函數(shù)，從而實現(xiàn)上拉加載的效果

1. // wxml
2. <scroll-view scroll-y="true" class="drug-scroll" scroll-top="{{scrollTop}}" bindscrolltolower="{{loadMore.hasMore ? 'bindLoadMore' : ''}}" lower-threshold="10">
3. <template is="drugItem" data="{{...drugItemData}}"/>
4. <view class="loading-more" data-show="{{loadMore.loading}}">加載中...</view>
5. </scroll-view>

1. // js
2. bindLoadMore: function() {
3.  
4. this._fetchDatas()
5. },

上面代碼是我項目中的一個小片段，表示在如果還有更多的數(shù)據(jù)，在距離底部還有10rpx的時候，執(zhí)行bindLoadMore 方法去獲取遠(yuǎn)程數(shù)據(jù)

實現(xiàn)起來很簡單，通過測試也能達(dá)到上拉加載更多的效果

下拉刷新

你會發(fā)現(xiàn)，在scroll-view 中 并沒有相關(guān)下拉的屬性或是回調(diào)方法來實現(xiàn)下拉刷新的效果

仔細(xì)看文檔，最后發(fā)現(xiàn) 

 

 

 

 

小程序是通過在.json文件注冊實現(xiàn)下拉刷新，比較非主流，但是相對也更簡單