一：初始化顯示指定界面

 

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

那么在小程序中，我們?cè)趺磥?lái)進(jìn)行登錄的判斷呢？

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

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

注冊(cè)之后，打開(kāi)小程序會(huì)自動(dòng)顯示注冊(cè)在最前面的頁(yè)面，這里也就是 page/login/index

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

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

對(duì)于單入口程序來(lái)說(shuō)，一般都是在入口文件進(jìn)行判斷，看文檔我們會(huì)發(fā)現(xiàn)小程序的入口文是app.js，并有對(duì)應(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)到首頁(yè)，如果首頁(yè)是tabbar中的，請(qǐng)使用wx.switchTab方法，看上去很完美。

運(yùn)行測(cè)試一下

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)試用看到如上報(bào)錯(cuò)，找了一下微信的文檔

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

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

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

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

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. })

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

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

如果有更好的辦法，請(qǐng)告訴我

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

 

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

上拉加載

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

 

 

 

 

上拉加載主要有通過(guò)屬性lower-threshold 和 bindscrolltolower 來(lái)實(shí)現(xiàn)，這兩個(gè)屬性，我們可以控制在距離底部lower-threshold位置處，執(zhí)行我們的bindscrolltolower回調(diào)函數(shù)，從而實(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. },

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

實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，通過(guò)測(cè)試也能達(dá)到上拉加載更多的效果

下拉刷新

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

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

 

 

 

 

小程序是通過(guò)在.json文件注冊(cè)實(shí)現(xiàn)下拉刷新，比較非主流，但是相對(duì)也更簡(jiǎn)單