小程序模板網(wǎng)

小程序踩坑記《一》初始化顯示指定界面,scroll-view上拉加載與page的下拉刷新沖

發(fā)布時(shí)間:2017-11-29 18:02 所屬欄目:小程序開(kāi)發(fā)教程

一:初始化顯示指定界面一般對(duì)于后臺(tái)功能比如商家、管理員等,需要先登錄才能進(jìn)入到app,所以需要在打開(kāi)的時(shí)候來(lái)判斷用戶是否登錄,從而決定是進(jìn)入app還是登錄界面。那么在小程序中,我 ...

 
 
 

一:初始化顯示指定界面

 

一般對(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)單



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/17989.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢