微信小程序常用简易小函数总结


Posted in Javascript onFebruary 01, 2019

本文实例讲述了微信小程序常用简易小函数。分享给大家供大家参考,具体如下:

最近一直在写微信小程序,而且由于是第二次写了,所以针对很多通用的情况封装了一些函数,建议你们放在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);
}

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
jquery之Document元素选择器篇
Aug 14 Javascript
JS array 数组详解
Mar 22 Javascript
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 #Javascript
angular中如何绑定iframe中src的方法
Feb 01 #Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 #Javascript
JS集合set类的实现与使用方法示例
Feb 01 #Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 #jQuery
详解Vue中watch对象内属性的方法
Feb 01 #Javascript
JS字典Dictionary类定义与用法示例
Feb 01 #Javascript
You might like
很实用的一个完整email发送程序
2006/10/09 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
JavaScript基本对象
2007/01/11 Javascript
表单元素事件 (Form Element Events)
2009/07/17 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
python框架中flask知识点总结
2018/08/17 Python
Python map及filter函数使用方法解析
2020/08/06 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
《母鸡》教学反思
2014/02/25 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang