微信小程序接入LeanCloud

た入场券 2023-07-15 15:13 17阅读 0赞

大家在做小程序或者客户端开发的时候肯定会想使得数据进行联网，但这样就必须有对应的后台服务器以及数据库，再加上linux运维等各种细节，往往会对新手比较劝退，在这里给大家推荐一种\*\*bass(后端即服务)\*\*，不仅支持小程序，还支持网页端，android，ios多平台调用，支持Java，python，c\#等多种语言，最重要的是\`懂球帝\`的后端就是托管在这个平台上的，安全性有很大的保障   
  
\*\*LeanCloud微信小程序官方接入教程\*\* https://leancloud.cn/docs/weapp.html

**微信小程序JavaScript语言数据存储教程** [https://leancloud.cn/docs/leanstorage\_guide-js.html][https_leancloud.cn_docs_leanstorage_guide-js.html]

上来先不管原理，撸一把能直接用的教程

**打开LeanCloud控制台网址** **[https://leancloud.cn/dashboard/applist.html\#/apps][https_leancloud.cn_dashboard_applist.html_apps]**

### 第一步：创建应用 ###

![20200317143330187.png][]

### 第二步：填写应用相关信息 ###

**应用名称必须填写** **个人使用的小型的项目就选择开发版**

![20200317143330299.png][]

**开发版的使用限制：以对象存储为例，其他可查看官方价格说明**

![20200317143330408.png][]

具体解释一下每日的总请求数与云端并发线程数
    
    工作线程数指的是服务端可同时处理的请求数量。绝大多数应用需要的服务端工作线程数都不会超过 3 个。
    
    假设服务端响应时间是 20 毫秒，那么每个工作线程每秒钟可以处理 1,000 / 20 = 50 个请求。
    
    一个日活一万的应用，如果每个用户都产生 50 个请求，而且这一万个用户每天都集中在两个小时内打开应用，这两小时内平均每秒钟发生的请求数就是 10,000 × 50 / 2 / 60 / 60 = 69 个，只需要 69 / 50 = 1.15 个工作线程就足以应对这两个小时的请求高峰。
    
    考虑到可能出现的峰值，实际运行的产品应当尽量预留一定的冗余。商用版应用默认拥有 30 个工作线程，足以应对绝大部分需求，如有需要也可以按需调整。
    
    数据 API 每天累计请求超过 30,000 次后，后续的请求会无法得到数据，并返回错误码 429，这个限制每日重置。***
    
    服务端工作线程数 超过 3 时，后续的请求会无法得到数据，并返回错误码 429，这个限制在工作线程数小于 3 时解除。

### 第三步：可以看到我们创建的应用管理控制台 ###

![20200317143330559.png][]

### 第四步：在图示界面进行管理 ###

![20200317143330669.png][]

### 第五步：微信小程序开发工具SDK下载安装 ###

[https://leancloud.cn/docs/start.html][https_leancloud.cn_docs_start.html]

**前往 [https://releases.leanapp.cn/\#/leancloud/javascript-sdk/releases，][https_releases.leanapp.cn_leancloud_javascript-sdk_releases] 下载最新版本的 av-weapp-min.js，移动到 libs 目录。**

**在 app.js 中使用 const AV = require('./libs/av-weapp-min.js'); 获得 AV 的引用。在其他文件中使用时请将路径替换成对应的路径。**

**这里牵扯到的一个问题就是路径问题，这里普及一下路径的表示方法** ![20200317143330808.png][]

**所以相对于程序代码所在的文件，利用好这个关系一定可以找到对应的路径。**

### 第六步 ###

在 app.js 中使用 `const AV = require('./libs/av-weapp-min.js');`获得 AV 的引用

![20200317143330925.png][]

**并在`app.js`中初始化应用**

//app.js
    const AV = require('./libs/av-weapp-min.js');
    AV.init({
      appId: 'Cl2HGjUA2177jyaUblh54MBi-gzGzoHsz',
      appKey: '6l8aMu7nsr6wNQau5TmczImP',
    });
    App({});

### 第七步 ###

在`index.js`中实现对象存储，具体详细的之后再说，我们这里进行一个简单的上传工作在页面加载完成之后

//获取应用实例
    const app = getApp();
    const AV = require('../../libs/av-weapp-min.js');
    
    Page({
      onLoad: function() {
        // 生命一个Todo类型
        var Todo = AV.Object.extend('Todo'); //Todo即为数据表名称(或类名)
        // 新建一个Todo对象
        var todo = new Todo();
        // set方法:第一个参数为字段名，第二个参数为该字段的值
        todo.set('title', '部长会议'); //title为字段名，工程师周会为该字段的值
        todo.set('content', '周五晚上8点半');
        // 只要添加这一行代码，服务端就会自动添加这个字段
        todo.set('location', '507教室');
        todo.save().then(function(todo) {
        // 成功保存之后，执行其他逻辑.
        console.log('New object created with objectId: ' + todo.id);
        }, function(error) {
          // 异常处理
          console.error('Failed to create new object, with error message: ' + error.message);
        });
    
      }
    })

### 第八步 ###

实现完上边的功能之后，界面打开代表数据已经上传成功，可以在控制台进行相关的查看

![2020031714333136.png][]

### 第九步：问题解决 ###

\*\* 如果出现下面问题\*\*

![20200317143331159.png][]

\*\* 找到工具 -> 项目详情 -> 进入\*\*

![20200317143331269.png][]

**最后再按照这个域名设置进入我们微信公众平台 -> 小程序 -> 设置 -> 开发设置 -> 服务器域名**

![20200317143331465.png][]

### 第十步上传文件 ###

**首先在视图层进行页面代码编写，创建一个按钮，设置一个按钮点击事件upload**

<view class="container">
    <button bindtap='upload'>点击上传图片</button>
    </view>

### 第十一步、js代码中实现按钮点击上传选择图片 ###

//按钮点击事件上传图片
    upload: function() {
        wx.chooseImage({
          count: 9,//最多可选择的图片张数，最多为9张
          sizeType: ['original', 'compressed'],//所选图片尺寸，原图、压缩图
          sourceType: ['album', 'camera'],//选择图片的来源，从相册选图、使用相机
            //接口调用成功的回调函数
            success: function(res) {
            var tempFilePath = res.tempFilePaths[0];    //图片的本地临时文件路径列表
            new AV.File('love', {                       //调用API接口上传文件，之后进行详细讲解
              blob: {
                uri: tempFilePath,
              },
            }).save().then(
              file => console.log(file.url())
            ).catch(console.error);
          }
        });
      }

### 第十二步：运行小程序,上传图片 ###

![20200317143331571.png][]

### 第十三步：用户系统一键登录 ###

![20200317143331681.png][]

//界面开始显示时LeanCloud一键登录
      onShow: function() {
        AV.User.loginWithWeapp().then(user => {
          this.globalData.user = user.toJSON();
        }).catch(console.error);
      },

### 第十四步：查看用户信息 ###

<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">查看用户信息</button>

//获取用户信息
      bindGetUserInfo:function(e) {
      console.log(e.detail.userInfo);
      }

![20200317143331793.png][]

了解更多技术文章，欢迎关注我的个人公众号 ![20200317143331901.png][]

[https_leancloud.cn_docs_leanstorage_guide-js.html]: https://leancloud.cn/docs/leanstorage_guide-js.html
[https_leancloud.cn_dashboard_applist.html_apps]: https://leancloud.cn/dashboard/applist.html#/apps
[20200317143330187.png]: /images/20230528/f465f701677a42128b7ee4bb7c89d8a4.png
[20200317143330299.png]: /images/20230528/9c6e3094ffbc477f89c5c364127d7ba8.png
[20200317143330408.png]: /images/20230528/62378923a04741818112c2bb74f12d0e.png
[20200317143330559.png]: /images/20230528/23fc567efa084ed2b30a25b578349349.png
[20200317143330669.png]: /images/20230528/88abc3223a604b66921719dee1fbafe4.png
[https_leancloud.cn_docs_start.html]: https://leancloud.cn/docs/start.html
[https_releases.leanapp.cn_leancloud_javascript-sdk_releases]: https://releases.leanapp.cn/#/leancloud/javascript-sdk/releases%EF%BC%8C
[20200317143330808.png]: /images/20230528/fd5d5159b9eb4942a23c94dd94fae204.png
[20200317143330925.png]: /images/20230528/4a90afcecb424f1cbb17e24e9faa2148.png
[2020031714333136.png]: /images/20230528/bb65db64bf184b0e9ad10fe3300c1695.png
[20200317143331159.png]: /images/20230528/d63c8a6a0e3e45fcbcc0a0fb4c93dfca.png
[20200317143331269.png]: /images/20230528/9eeed49b51fd4295a6014709e5629286.png
[20200317143331465.png]: /images/20230528/20920513d68a4587ab31dd96dd7e73ba.png
[20200317143331571.png]: /images/20230528/70f544924f504018bd973618fe8488e1.png
[20200317143331681.png]: /images/20230528/7362bb9f39644abc9dd88607345c10a7.png
[20200317143331793.png]: /images/20230528/572eee8e74e44a27b8a39e029d6edee3.png
[20200317143331901.png]: /images/20230528/04377e31652b4673b831ffaa5b470412.png