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

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

为古蔺等地区用户提供了全套网页设计制作服务，及古蔺网站建设行业解决方案。主营业务为成都做网站、网站设计、外贸营销网站建设、古蔺网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

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

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

名称栏目：微信小程序常用简易小函数总结
网页路径：http://chengdu.cdxwcx.cn/article/pghodh.html

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

首页

网站建设

网站制作案例

解决方案

网站设计报价

网站制作动态

关于我们

联系我们

成都网站建设设计将想法与焦点和您一起共享

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

其他资讯

css行业样式样式 css

搭建Android平台 android项目搭建

企业微信群如何发卡券企业微信怎么发优惠卷

html5效果开发 html5app效果

电商模版小程序做一个电商小程序制作

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

成都网站建设设计 将想法与焦点和您一起共享

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

其他资讯

css行业样式 样式 css

搭建Android平台 android项目搭建

企业微信群如何发卡券 企业微信怎么发优惠卷

html5效果开发 html5app效果

电商模版小程序 做一个电商小程序制作

成都网站建设设计将想法与焦点和您一起共享

css行业样式样式 css

企业微信群如何发卡券企业微信怎么发优惠卷

电商模版小程序做一个电商小程序制作