溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了微信小程序常用簡易小函數。分享給大家供大家參考，具體如下：
最近一直在寫微信小程序，而且由于是第二次寫了，所以針對很多通用的情況封裝了一些函數，建議你們放在app.js中，方便全局去調用。
提示類函數
微信有一種原生的API用于顯示提示類結果的wx.showToast，而且其中的圖片是可以自定義的，所以為了保證全部一致性，而且方便調用，所以我將其全部封裝在了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參數，這個在下面的情況中是一個很重要的問題。
假設一般的操作是對一個頁面的操作完成后接著顯示處理結果，最后進行跳轉。所以這里就存在一個問題，假設使用上面的彈出框進行顯示，那么在彈出框顯示之前就會進行跳轉，這樣處理結果就顯示不全了，所以合理的做法是在彈出框結束后進行跳轉。而如果將跳轉單獨封裝在各個頁面中，那么到時候進行時間長短的處理就很麻煩了，所以我將這個函數進行了封裝：
// 第一個是路由，第二個則是判斷是否是tabbar的路由，跳這兩個路由是不一致的
completeOperating:function(to,isTabbar){
var time=setTimeout(function(){
if(isTabbar===true){
wx.switchTab({
url:to
})
}else{
wx.navigateTo({
url: to
})
}
clearTimeout(time);
},2000)
}
還有一種情況就是我們開始將數據返回給后端，這個時候最好給用戶一個加載中的提示，而這個提示可以使用wx.showLoadding來做：
// 提示用戶數據保存中
startOperating:function(info){
wx.showLoading({
title:info,
mask:true
})
}
當后端返回結果后。則將加載框進行隱藏：
stopOperating:function(){
wx.hideLoading();
}
登錄類問題
微信小程序不支持session，這個是前提，所以我們沒辦法在后端使用session來進行用戶身份的區分。我的解決思路是這樣的，在項目的入口文件app.js中的onLaunch函數中，即在用戶開啟小程序后調用wx.login()函數獲取用戶的唯一微信標志code，接著將該標志傳回后端，調用微信的統一API，獲取用戶在該微信小程序中的唯一標識，注意，即使是同一個用戶，在不同的微信小程序中標識也是不一樣的。
獲取該標識后，后端調用緩存將該標識緩存起來，時間也不用擔心，由于寫在app.js中，所以每次啟動都會去詢問后端，后端做相應的登錄更新處理就可以了。
實際前端代碼
// app.js
APP({
onLaunch:function(){
this.login();
},
login:function(){
// 我喜歡把域名保存在globalData中，這樣即使后期修改了域名，也不用到每個文件中去改
var that=this;
wx.login({
success:function(res){
// 這里獲取標識
var code=res.code;
// 將該標識傳遞給后端
wx.request({
url:that.globalData.url+"/home/login/login?code="+code,
success:function(res){
// 假設后端返回一個session_key作為改用戶的唯一標識，所有請求都需要攜帶該參數
var session_key=res.data.session_key;
// 調用全局緩存來保存該值
wx.setStorageSync('session_key', session_key);
},
fail:function(error){
// 寫這么一個函數，是幫助自己后期出現問題時可以進行修復
console.error("調用微信登錄接口錯誤");
console.log(error);
}
})
}
})
},
globalData:{
url:"http://yourdomain.com"
}
})
實際后端代碼
class LoginController extends Controller{
// 你的小程序唯一標識
private $appid="";
private $secrect="";
public function login(){
// 獲取前端傳遞過來的code
$code=$_GET['code'];
// 調用微信的統一API
$baseUrl="https://api.weixin.qq.com/sns/jscode2session?appid={$this->appid}&secret={$this->secrect}&js_code={$code}&grant_type=authorization_code";
// 微信返回結果處理
$result=curl_get_contents($baseUrl);
$user=json_decode($result,true);
if($user['error_code']){
// 這里是調用錯誤的函數，如何解決看你自己的業務邏輯
exit();
}
// 該用戶在你小程序中的唯一標識
$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{
// 新用戶則將其保存進數據庫中
$user_id=M("User")->add(array('openid'=>$openid));
$session_key=$this->getSessionKey($openid,$user_id);
}
// 緩存起來，至于有效期最好長一點，以防止用戶在使用過程中突然不能訪問數據，我這里是使用tp框架的S()函數進行存儲的
S($session_key,$user_id);
// 以后只需要用戶傳遞過來$session_key就可以根據緩存獲取用戶身份了
// 將結果發送給前端
$this->ajaxReturn(array(
'session_key'=>$session_key
));
}
// 生成用戶的session_key
private function getSessionKey($openid,$user_id){
$key="可以說是你的密鑰吧";
return hash("md5",$key.$openid.$user_id);
}
}
當然這里我只是保存了$user_id，如果你需要更多信息可以考慮使用redis，memcached等進行長期緩存，反正每次產生的$session_key都是一樣的。
Session_key使用例子
上面我們獲取了session_key并在前后端進行了保存，接下來就是如何使用該session_key了。
后端驗證
關于CommonContrller的原理請看之前的一篇博客：tp框架的RBAC實現
class CommonController extends Controller{
protected $user_id;
public function ___initialize(){
// 對用戶的session_key進行驗證
$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;
}
}
接著假設下面是你真正想要訪問的方法
class IndexController extends CommonController{
public function(){
// 假設這里你需要獲取當前用戶的id，只需要直接調用父類中的屬性就可以了
$user_id=$this->user_id;
}
}
上面我們就借用了我們生成的session_key配合上緩存模擬了session的驗證機制，希望對你們有用。
前端實現
getData:function(){
// 從緩存中獲取session_key，并將其傳遞給后端，做用戶身份的確認
var session_key=wx.getStorageSync('session_key');
wx.request({
url:app.globalData.url+"/home/index/index?session_key="+session_key,
success:function(res){
//
}
})
}
前置頁面做優化
上面我們是在app.js的onLaunch中直接調用登錄函數，但是這樣卻存在一個問題，那就是登錄沒有完成，就跳轉到入口的page中，接著由于session_key還沒有生成，導致頁面數據請求失敗。我當時就是遇到了這個問題，所以我把入口的page設置成了前置頁面，并在前置頁面中添加了下面的函數：
onLoad: function (options) {
var time=setInterval(function(){
var session_key=wx.getStorageSync('session_key');
// 只有當session_key存在時，才跳轉到首頁去，保證請求數據的有效性，否則就在前置頁面暫留一會
if(session_key.length>5){
wx.switchTab({
url:"/pages/index/index"
})
clearInterval(time);
}
},1000);
}
希望本文所述對大家微信小程序開發有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
