在微信小程序中使用后端云服务LeanCloud

作者: 吕周坤 | 来源:发表于2016-12-25 11:29 被阅读6634次

    我以前在学习安卓开发时曾经用到过Bmob后端云作为后端数据存储于查询,因此微信小程序出来之后我也想用它作为微信小程序的后端云,但可惜Bmob后端云并没有支持微信小程序的SDK,前两天我查到了LeanCloud支持微信小程序的sdk,以此写下笔记。
    资料引用:
    https://leancloud.cn/docs/weapp.html

    创建应用

    安装与初始化SDK

    1. 下载av-weapp.js,移动到libs目录。
    2. app.js中使用const AV = require('/libs/av-weapp.js');获得AV的引用。在其他文件中使用时请将路径替换成对应的相对路径。
    3. app.js中初始化应用:
    AV.init({ 
          appId: '你自己应用的appId', 
          appKey: '你自己应用的appKey',
     });
    
    1. 官方提供的demo:https://github.com/leancloud/leantodo-weapp
      总结:
      在app.js中代码:
    // app.js
    const AV = require('./libs/av-weapp.js');
    var APP_ID = '你自己应用的appId';
    var APP_KEY = '你自己应用的appKey';
    AV.init({ 
          appId: APP_ID, 
          appKey: APP_KEY, 
    });
    App({})
    

    在各个页面中代码:

    // xxx.js
    const AV = require('av-weapp.js的绝对路径');
    Page({
          // 运用AV相关的api进行数据存储与查询操作
    })
    

    数据存储

    1. 对象存储

    由于内容太多,有兴趣的朋友可以自行了解https://leancloud.cn/docs/leanstorage_guide-js.html
    下面简单介绍一下用法:

    // xxx.js
    Page({
    // 生命一个Todo类型
      var Todo = AV.Object.extend('Todo');//Todo即为数据表名称(或类名)
    // 新建一个Todo对象
      var todo = new Todo();
    // set方法:第一个参数为字段名,第二个参数为该字段的值
      todo.set('title', '工程师周会');//title为字段名,工程师周会为该字段的值
      todo.set('content', '每周工程师会议,周一下午2点');
      // 只要添加这一行代码,服务端就会自动添加这个字段
      todo.set('location','会议室');
      todo.save().then(function (todo) {
        // 成功保存之后,执行其他逻辑.
        console.log(res.objectId);
      }, function (error) {
        // 异常处理
      });
    })
    
    2. 文件存储

    在小程序中,可以将用户相册或拍照得到的图片上传到 LeanCloud 服务器进行保存。首先通过 wx.chooseImage方法选择或拍摄照片,得到本地临时文件的路径,然后按照下面的方法构造一个 AV.File将其上传到 LeanCloud:

    wx.chooseImage({
    count: 9,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: function(res) {
      var tempFilePath = res.tempFilePaths[0];
      new AV.File('file-name', {
        blob: {
          uri: tempFilePath,
        },
      }).save().then(
        file => console.log(file.url())
      ).catch(console.error);
    }
    });
    

    上传成功后可以通过file.url()方法得到服务端的图片url。

    用户系统

    小程序中提供了登录 API 来获取微信的用户登录状态,应用可以访问到用户的昵称、性别等基本信息,但是如果想要保存额外的用户信息,如用户的手机号码、收货地址等,则需要使用 LeanCloud 的用户系统。

    一键登录

    LeanCloud 的用户系统现已支持一键使用微信用户身份登录。要使用一键登录功能,需要先设置小程序的 AppID 与 AppSecret:

    登录 微信公众平台,在 设置 > 开发设置 中获得 AppID 与 AppSecret。
    前往 LeanCloud 控制台 > 组件 > 社交,保存「微信小程序」的 AppID 与 AppSecret。

    现在,你可以在应用中使用 AV.User.loginWithWeapp()方法来使用当前用户身份登录了。

    AV.User.loginWithWeapp().then(user => { 
        this.globalData.user = user.toJSON();
    }).catch(console.error);
    
    

    如果该用户是第一次使用此应用,调用登录 API 会创建一个新的用户,你可以在 控制台 > 存储 中的 _User表中看到该用户的信息,如果该用户曾经使用该方式登录过此应用,再次调用登录 API 会返回同一个用户。

    用户的登录状态会保存在客户端中,可以使用 AV.User.current()方法来获取当前登录的用户,下面的例子展示了如何同步登录用户的信息:

    // 获得当前登录用户
    const user = AV.User.current();
    // 调用小程序 API,得到用户信息
    wx.getUserInfo({ 
        success: ({
            userInfo}) => {
            // 更新当前用户的信息 
                user.set(userInfo).save().then(user => { 
                    // 成功,此时可在控制台中看到更新后的用户信息 
                    this.globalData.user = user.toJSON();
                }).catch(console.error);
            }
    });
    

    tip

    1. 受到微信小程序1M大小的限制,官方提供的av-weapp.js文件比较大(470kb),这是非常不可取的,希望官方或网友可以提供一个没有注释和空格的压缩文件供大家使用。

    相关文章

      网友评论

        本文标题:在微信小程序中使用后端云服务LeanCloud

        本文链接:https://www.haomeiwen.com/subject/ntwrvttx.html