微信小程序常用簡易小函數(shù)總結(jié)

更新時間：2019年02月01日 10:26:46 作者：trouble-i-am-in

這篇文章主要介紹了微信小程序常用簡易小函數(shù),結(jié)合實例形式總結(jié)分析了微信小程序提示、登陸、驗證、session操作等相關(guān)操作函數(shù)與使用技巧,需要的朋友可以參考下

本文實例講述了微信小程序常用簡易小函數(shù)。分享給大家供大家參考，具體如下：

最近一直在寫微信小程序，而且由于是第二次寫了，所以針對很多通用的情況封裝了一些函數(shù)，建議你們放在app.js中，方便全局去調(diào)用。

提示類函數(shù)

微信有一種原生的API用于顯示提示類結(jié)果的wx.showToast，而且其中的圖片是可以自定義的，所以為了保證全部一致性，而且方便調(diào)用，所以我將其全部封裝在了app.js中：

// 成功
showSuccess: function (message) {
    wx.showToast({
      title: message,
      duration: 2000,
      image: "/images/Common/Success.png",
    })
  },
// 錯誤
showError: function (message) {
    wx.showToast({
      title: message,
      duration: 2000,
      image: "/images/Common/Error.png",
    })
  },
// 警告
showWarn: function (message) {
    wx.showToast({
      title: message,
      duration: 2000,
      image: "/images/Common/Warn.png",
    })
  }

注意上面的duration參數(shù)，這個在下面的情況中是一個很重要的問題。

假設(shè)一般的操作是對一個頁面的操作完成后接著顯示處理結(jié)果，最后進(jìn)行跳轉(zhuǎn)。所以這里就存在一個問題，假設(shè)使用上面的彈出框進(jìn)行顯示，那么在彈出框顯示之前就會進(jìn)行跳轉(zhuǎn)，這樣處理結(jié)果就顯示不全了，所以合理的做法是在彈出框結(jié)束后進(jìn)行跳轉(zhuǎn)。而如果將跳轉(zhuǎn)單獨封裝在各個頁面中，那么到時候進(jìn)行時間長短的處理就很麻煩了，所以我將這個函數(shù)進(jìn)行了封裝：

// 第一個是路由，第二個則是判斷是否是tabbar的路由，跳這兩個路由是不一致的
completeOperating:function(to,isTabbar){
    var time=setTimeout(function(){
      if(isTabbar===true){
        wx.switchTab({
          url:to
        })
      }else{
        wx.navigateTo({
         url: to
        })
      }
      clearTimeout(time);
    },2000)
}

還有一種情況就是我們開始將數(shù)據(jù)返回給后端，這個時候最好給用戶一個加載中的提示，而這個提示可以使用wx.showLoadding來做：

// 提示用戶數(shù)據(jù)保存中
startOperating:function(info){
    wx.showLoading({
      title:info,
      mask:true
    })
  }

當(dāng)后端返回結(jié)果后。則將加載框進(jìn)行隱藏：

stopOperating:function(){
    wx.hideLoading();
  }

登錄類問題

微信小程序不支持session，這個是前提，所以我們沒辦法在后端使用session來進(jìn)行用戶身份的區(qū)分。我的解決思路是這樣的，在項目的入口文件app.js中的onLaunch函數(shù)中，即在用戶開啟小程序后調(diào)用wx.login()函數(shù)獲取用戶的唯一微信標(biāo)志code，接著將該標(biāo)志傳回后端，調(diào)用微信的統(tǒng)一API，獲取用戶在該微信小程序中的唯一標(biāo)識，注意，即使是同一個用戶，在不同的微信小程序中標(biāo)識也是不一樣的。

獲取該標(biāo)識后，后端調(diào)用緩存將該標(biāo)識緩存起來，時間也不用擔(dān)心，由于寫在app.js中，所以每次啟動都會去詢問后端，后端做相應(yīng)的登錄更新處理就可以了。

實際前端代碼

// app.js
APP({
 onLaunch:function(){
  this.login();
 },
 login:function(){
  // 我喜歡把域名保存在globalData中，這樣即使后期修改了域名，也不用到每個文件中去改
  var that=this;
  wx.login({
   success:function(res){
    // 這里獲取標(biāo)識
    var code=res.code;
    // 將該標(biāo)識傳遞給后端
    wx.request({
     url:that.globalData.url+"/home/login/login?code="+code,
     success:function(res){
      // 假設(shè)后端返回一個session_key作為改用戶的唯一標(biāo)識，所有請求都需要攜帶該參數(shù)
      var session_key=res.data.session_key;
      // 調(diào)用全局緩存來保存該值
      wx.setStorageSync('session_key', session_key);
     },
     fail:function(error){
      // 寫這么一個函數(shù)，是幫助自己后期出現(xiàn)問題時可以進(jìn)行修復(fù)
      console.error("調(diào)用微信登錄接口錯誤");
      console.log(error);
     }
    })
   }
  })
 },
 globalData:{
  url:"http://yourdomain.com"
 }
})

實際后端代碼

class LoginController extends Controller{
 // 你的小程序唯一標(biāo)識
 private $appid="";
 private $secrect="";
 public function login(){
  // 獲取前端傳遞過來的code
  $code=$_GET['code'];
  // 調(diào)用微信的統(tǒng)一API
  $baseUrl="https://api.weixin.qq.com/sns/jscode2session?appid={$this->appid}&secret={$this->secrect}&js_code={$code}&grant_type=authorization_code";
  // 微信返回結(jié)果處理
  $result=curl_get_contents($baseUrl);
  $user=json_decode($result,true);
  if($user['error_code']){
   // 這里是調(diào)用錯誤的函數(shù)，如何解決看你自己的業(yè)務(wù)邏輯
   exit();
  }
  // 該用戶在你小程序中的唯一標(biāo)識
  $openid=$user['openid'];
  // 判斷是新用戶還是老用戶
  $userInfo=M('User')->where(array('openid'=>$openid))->find();
  if($userInfo){
   // 老用戶
   $user_id=$userInfo['id'];
   $session_key=$this->getSessionKey($openid,$user_id);
  }else{
   // 新用戶則將其保存進(jìn)數(shù)據(jù)庫中
   $user_id=M("User")->add(array('openid'=>$openid));
   $session_key=$this->getSessionKey($openid,$user_id);
  }
  // 緩存起來，至于有效期最好長一點，以防止用戶在使用過程中突然不能訪問數(shù)據(jù)，我這里是使用tp框架的S()函數(shù)進(jìn)行存儲的
  S($session_key,$user_id);
  // 以后只需要用戶傳遞過來$session_key就可以根據(jù)緩存獲取用戶身份了
  // 將結(jié)果發(fā)送給前端
  $this->ajaxReturn(array(
    'session_key'=>$session_key
  ));
 }
 // 生成用戶的session_key
 private function getSessionKey($openid,$user_id){
  $key="可以說是你的密鑰吧";
  return hash("md5",$key.$openid.$user_id);
 }
}

當(dāng)然這里我只是保存了$user_id，如果你需要更多信息可以考慮使用redis，memcached等進(jìn)行長期緩存，反正每次產(chǎn)生的$session_key都是一樣的。

Session_key使用例子

上面我們獲取了session_key并在前后端進(jìn)行了保存，接下來就是如何使用該session_key了。

后端驗證

關(guān)于CommonContrller的原理請看之前的一篇博客：tp框架的RBAC實現(xiàn)

class CommonController extends Controller{
 protected $user_id;
 public function ___initialize(){
  // 對用戶的session_key進(jìn)行驗證
  $session_key=I("session_key");
  $user_id=S($session_key);
  if(!$user_id){
   // 該$session_key失效或者不合法
   $this->ajaxReturn(array('result'=>"請退出小程序重新登錄"));exit();
  }
  $this->user_id=$user_id;
 }
}

接著假設(shè)下面是你真正想要訪問的方法

class IndexController extends CommonController{
 public function(){
  // 假設(shè)這里你需要獲取當(dāng)前用戶的id，只需要直接調(diào)用父類中的屬性就可以了
  $user_id=$this->user_id;
 }
}

上面我們就借用了我們生成的session_key配合上緩存模擬了session的驗證機制，希望對你們有用。

前端實現(xiàn)

getData:function(){
 // 從緩存中獲取session_key，并將其傳遞給后端，做用戶身份的確認(rèn)
 var session_key=wx.getStorageSync('session_key');
 wx.request({
  url:app.globalData.url+"/home/index/index?session_key="+session_key,
  success:function(res){
   //
  }
 })
}

前置頁面做優(yōu)化

上面我們是在app.js的onLaunch中直接調(diào)用登錄函數(shù)，但是這樣卻存在一個問題，那就是登錄沒有完成，就跳轉(zhuǎn)到入口的page中，接著由于session_key還沒有生成，導(dǎo)致頁面數(shù)據(jù)請求失敗。我當(dāng)時就是遇到了這個問題，所以我把入口的page設(shè)置成了前置頁面，并在前置頁面中添加了下面的函數(shù)：

onLoad: function (options) {
    var time=setInterval(function(){
      var session_key=wx.getStorageSync('session_key');
      // 只有當(dāng)session_key存在時，才跳轉(zhuǎn)到首頁去，保證請求數(shù)據(jù)的有效性，否則就在前置頁面暫留一會
      if(session_key.length>5){
        wx.switchTab({
          url:"/pages/index/index"
        })
        clearInterval(time);
      }
    },1000);
}

希望本文所述對大家微信小程序開發(fā)有所幫助。

您可能感興趣的文章: