微信小程序常用简易小函数总结
本文实例讲述了微信小程序常用简易小函数。分享给大家供大家参考,具体如下
最近一直在写微信小程序,而且由于是第二次写了,所以针对很多通用的情况封装了一些函数,建议你们放在app.js中,方便全局去调用。
提示类函数
微信有一种原生的API用于显示提示类结果的wx.showToast
,而且其中的图片是可以自定义的,所以为了保证全部一致性,而且方便调用,所以我将其全部封装在了app.js中
// 成功 showSuess: function (message) { wx.showToast({ title: message, duration: 2000, image: "/images/Common/Suess.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参数,这个在狼蚁网站SEO优化的情况中是一个很重要的问题。
假设一般的操作是对一个页面的操作完成后接着显示处理结果,进行跳转。所以这里就存在一个问题,假设使用上面的弹出框进行显示,那么在弹出框显示之前就会进行跳转,这样处理结果就显示不全了,所以合理的做法是在弹出框结束后进行跳转。而如果将跳转单独封装在各个页面中,那么到时候进行时间长短的处理就很麻烦了,所以我将这个函数进行了封装
// 第一个是路由,第二个则是判断是否是tabbar的路由,跳这两个路由是不一致的 pleteOperating: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 }) }
当后端返回结果后。则将加载框进行隐藏
sOperating: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({ suess:function(res){ // 这里获取标识 var code=res.code; // 将该标识传递给后端 wx.request({ url:that.globalData.url+"/home/login/login?code="+code, suess: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." } })
实际后端代码
class LoginController extends Controller{ // 你的小程序唯一标识 private $appid=""; private $secrect=""; public function login(){ // 获取前端传递过来的code $code=$_GET['code']; // 调用微信的统一API $baseUrl="https://api.weixin.qq./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的原理请看之前的一篇博客
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; } }
接着假设狼蚁网站SEO优化是你真正想要访问的方法
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, suess:function(res){ // } }) }
前置页面做优化
上面我们是在app.js的onLaunch
中直接调用登录函数,这样却存在一个问题,那就是登录没有完成,就跳转到入口的page中,接着由于session_key还没有生成,导致页面数据请求失败。我当时就是遇到了这个问题,所以我把入口的page
设置成了前置页面,并在前置页面中添加了狼蚁网站SEO优化的函数
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); }
希望本文所述对大家微信小程序开发有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程