微信小程序常用簡(jiǎn)易小函數(shù)總結(jié)
本文實(shí)例講述了微信小程序常用簡(jiǎn)易小函數(shù)。分享給大家供大家參考,具體如下:
最近一直在寫微信小程序,而且由于是第二次寫了,所以針對(duì)很多通用的情況封裝了一些函數(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",
})
},
// 錯(cuò)誤
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ù),這個(gè)在下面的情況中是一個(gè)很重要的問題。
假設(shè)一般的操作是對(duì)一個(gè)頁面的操作完成后接著顯示處理結(jié)果,最后進(jìn)行跳轉(zhuǎn)。所以這里就存在一個(gè)問題,假設(shè)使用上面的彈出框進(jìn)行顯示,那么在彈出框顯示之前就會(huì)進(jìn)行跳轉(zhuǎn),這樣處理結(jié)果就顯示不全了,所以合理的做法是在彈出框結(jié)束后進(jìn)行跳轉(zhuǎn)。而如果將跳轉(zhuǎn)單獨(dú)封裝在各個(gè)頁面中,那么到時(shí)候進(jìn)行時(shí)間長(zhǎng)短的處理就很麻煩了,所以我將這個(gè)函數(shù)進(jìn)行了封裝:
// 第一個(gè)是路由,第二個(gè)則是判斷是否是tabbar的路由,跳這兩個(gè)路由是不一致的
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ù)返回給后端,這個(gè)時(shí)候最好給用戶一個(gè)加載中的提示,而這個(gè)提示可以使用wx.showLoadding來做:
// 提示用戶數(shù)據(jù)保存中
startOperating:function(info){
wx.showLoading({
title:info,
mask:true
})
}
當(dāng)后端返回結(jié)果后。則將加載框進(jìn)行隱藏:
stopOperating:function(){
wx.hideLoading();
}
登錄類問題
微信小程序不支持session,這個(gè)是前提,所以我們沒辦法在后端使用session來進(jìn)行用戶身份的區(qū)分。我的解決思路是這樣的,在項(xiàng)目的入口文件app.js中的onLaunch函數(shù)中,即在用戶開啟小程序后調(diào)用wx.login()函數(shù)獲取用戶的唯一微信標(biāo)志code,接著將該標(biāo)志傳回后端,調(diào)用微信的統(tǒng)一API,獲取用戶在該微信小程序中的唯一標(biāo)識(shí),注意,即使是同一個(gè)用戶,在不同的微信小程序中標(biāo)識(shí)也是不一樣的。
獲取該標(biāo)識(shí)后,后端調(diào)用緩存將該標(biāo)識(shí)緩存起來,時(shí)間也不用擔(dān)心,由于寫在app.js中,所以每次啟動(dòng)都會(huì)去詢問后端,后端做相應(yīng)的登錄更新處理就可以了。
實(shí)際前端代碼
// app.js
APP({
onLaunch:function(){
this.login();
},
login:function(){
// 我喜歡把域名保存在globalData中,這樣即使后期修改了域名,也不用到每個(gè)文件中去改
var that=this;
wx.login({
success:function(res){
// 這里獲取標(biāo)識(shí)
var code=res.code;
// 將該標(biāo)識(shí)傳遞給后端
wx.request({
url:that.globalData.url+"/home/login/login?code="+code,
success:function(res){
// 假設(shè)后端返回一個(gè)session_key作為改用戶的唯一標(biāo)識(shí),所有請(qǐng)求都需要攜帶該參數(shù)
var session_key=res.data.session_key;
// 調(diào)用全局緩存來保存該值
wx.setStorageSync('session_key', session_key);
},
fail:function(error){
// 寫這么一個(gè)函數(shù),是幫助自己后期出現(xiàn)問題時(shí)可以進(jìn)行修復(fù)
console.error("調(diào)用微信登錄接口錯(cuò)誤");
console.log(error);
}
})
}
})
},
globalData:{
url:"http://yourdomain.com"
}
})
實(shí)際后端代碼
class LoginController extends Controller{
// 你的小程序唯一標(biāo)識(shí)
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)用錯(cuò)誤的函數(shù),如何解決看你自己的業(yè)務(wù)邏輯
exit();
}
// 該用戶在你小程序中的唯一標(biāo)識(shí)
$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);
}
// 緩存起來,至于有效期最好長(zhǎng)一點(diǎn),以防止用戶在使用過程中突然不能訪問數(shù)據(jù),我這里是使用tp框架的S()函數(shù)進(jìn)行存儲(chǔ)的
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)行長(zhǎng)期緩存,反正每次產(chǎn)生的$session_key都是一樣的。
Session_key使用例子
上面我們獲取了session_key并在前后端進(jìn)行了保存,接下來就是如何使用該session_key了。
后端驗(yàn)證
關(guān)于CommonContrller的原理請(qǐng)看之前的一篇博客:tp框架的RBAC實(shí)現(xiàn)
class CommonController extends Controller{
protected $user_id;
public function ___initialize(){
// 對(duì)用戶的session_key進(jìn)行驗(yàn)證
$session_key=I("session_key");
$user_id=S($session_key);
if(!$user_id){
// 該$session_key失效或者不合法
$this->ajaxReturn(array('result'=>"請(qǐng)退出小程序重新登錄"));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的驗(yàn)證機(jī)制,希望對(duì)你們有用。
前端實(shí)現(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ù),但是這樣卻存在一個(gè)問題,那就是登錄沒有完成,就跳轉(zhuǎn)到入口的page中,接著由于session_key還沒有生成,導(dǎo)致頁面數(shù)據(jù)請(qǐng)求失敗。我當(dāng)時(shí)就是遇到了這個(gè)問題,所以我把入口的page設(shè)置成了前置頁面,并在前置頁面中添加了下面的函數(shù):
onLoad: function (options) {
var time=setInterval(function(){
var session_key=wx.getStorageSync('session_key');
// 只有當(dāng)session_key存在時(shí),才跳轉(zhuǎn)到首頁去,保證請(qǐng)求數(shù)據(jù)的有效性,否則就在前置頁面暫留一會(huì)
if(session_key.length>5){
wx.switchTab({
url:"/pages/index/index"
})
clearInterval(time);
}
},1000);
}
希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。
- 微信小程序Page中data數(shù)據(jù)操作和函數(shù)調(diào)用方法
- 詳解微信小程序Page中data數(shù)據(jù)操作和函數(shù)調(diào)用
- 微信小程序 詳解Page中data數(shù)據(jù)操作和函數(shù)調(diào)用
- 詳解如何使用微信小程序云函數(shù)發(fā)送短信驗(yàn)證碼
- 詳解在微信小程序的JS腳本中使用Promise來優(yōu)化函數(shù)處理
- 微信小程序提取公用函數(shù)到util.js及使用方法示例
- 解決mpvue + vuex 開發(fā)微信小程序vuex輔助函數(shù)mapState、mapGetters不可用問題
- 微信小程序 功能函數(shù)小結(jié)(手機(jī)號(hào)驗(yàn)證*、密碼驗(yàn)證*、獲取驗(yàn)證碼*)
- 微信小程序 定義全局?jǐn)?shù)據(jù)、函數(shù)復(fù)用、模版等詳細(xì)介紹
- 詳解微信小程序的不同函數(shù)調(diào)用的幾種方法
相關(guān)文章
利用javascript的面向?qū)ο蟮奶匦詫?shí)現(xiàn)限制試用期
Javascript是一種面向?qū)ο蟮哪_本語言,其也具有面向?qū)ο蟮娜筇匦?,但是今天我們不詳?xì)的講解javascript的面向?qū)ο筇匦?,今天我們?jiǎn)單的了解一下javascript的面向?qū)ο筇匦?,然后學(xué)習(xí)一下怎樣實(shí)現(xiàn)試用期的限制!2011-08-08
JS中使用gulp實(shí)現(xiàn)壓縮文件及瀏覽器熱加載功能
這篇文章主要介紹了JS中使用gulp實(shí)現(xiàn)壓縮文件及瀏覽器熱加載功能,需要的朋友可以參考下2017-07-07
JavaScript如何正確聲明和使用變量詳細(xì)代碼實(shí)例
變量是程序在內(nèi)存中申請(qǐng)的一塊用來存放數(shù)據(jù)的空間,下面這篇文章主要給大家介紹了關(guān)于JavaScript如何正確聲明和使用變量的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
用JS動(dòng)態(tài)改變表單form里的action值屬性的兩種方法
下面小編就為大家?guī)硪黄肑S動(dòng)態(tài)改變表單form里的action值屬性的兩種方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
深入淺析JavaScript中的in關(guān)鍵字和for-in循環(huán)
這篇文章主要介紹了JavaScript中的in關(guān)鍵字和for-in循環(huán),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04

