小程序云开发

小程序

项目初始化

最干净的初始小程序

1. 删除app.js里面的代码，输入App回车
2. 删除app.json的pages中多余的页面，先只保留index吧
3. 在pages文件夹中删除index以外的页面，可以在硬盘中打开删除，包括images中不用的图片
4. 删除index.js中的代码，输入page回车；删除index.wxml中的代码，随便写个东西<text>index</text>占位；删除index.wxss中的代码；删除index文件夹中多余的文件（user-unlogin.png）
5. style文件夹我们不需要，删除它
6. 初始化云开发，之前已经初始化过了就不用再初始化了
7. 安装Vant UI组件库，右击miniprogram在终端中打开，然后复制Vant官网npm安装方式的代码执行即可（此处有坑，参考下面我写的几个问题里面的第一个做）
8. 在工具中点击“构建npm”，在详情中勾选“使用npm模块”
9. 这里console中会有一个报错，关掉重启就好了

tips

• cloudfunctionRoot 方法存储云函数
  
  • project.config.json 增加 cloudfunctionRoot 用于指定存放云函数的目录
• wx.cloud.init 方法初始化云能力
  
  • app.json 中写入 "cloud": true 即可以让2.2.3以下的基础库使用云能力
• env 定义服务默认环境
  
  • 在 app.js 的云能力初始化函数中写入，定义各个服务的默认环境。参数参考云开发中不同环境的环境ID
• traceUser 是否将用户访问记录留存到用户管理中
  
  • 在 app.js 的云能力初始化函数onLaunch中写入，参数为 ture 则写入用户管理中

onLaunch: function () {
    wx.cloud.init({
        traceUser: true
    })
},

云数据库

1. 创建集合

   打开云开发控制台，在数据库中点击“添加集合”。
   创建成功后，可以看到集合管理界面，我们可以增删查改、管理索引、管理权限。

   导入csv
   http://m.qpic.cn/psb?/V10KS9ws4Pxud0/I6USeTpCfGN1qcEeSybsE37fHbnzWph6jcXaEJCaxxc!/b/dL8AAAAAAAAA&bo=kgIlApICJQIDCSw!&rf=viewer_4
   导入json
   http://m.qpic.cn/psb?/V10KS9ws4Pxud0/9ypScGiy.TIrVzgcLdCEWaGFmCx0G.9aCct6Cpmb04c!/b/dL4AAAAAAAAA&bo=swK6ArMCugIDCSw!&rf=viewer_4

2. 数据类型介绍

   String	字符串
   Number	数字
   Object	对象
   Array	数组
   Bool	布尔值
   GeoPoint	地理位置点
   Date	时间
   Null

3. 数据权限控制

   创建者、管理端、自己的数据、他人的数据
   http://m.qpic.cn/psb?/V10KS9ws4Pxud0/ZVmMbPHbqzRHggV8HVweV.fHNgiq39MsGkhkMFSBkMM!/b/dPMAAAAAAAAA&bo=BgWAArMF1gIDCc8!&rf=viewer_4

4. 数据库初始化

   使用数据库API之前首先要获取 数据库的引用 const db = wx.cloud.database()

   如果要初始化某个特定环境的数据库

   const testDB = wx.cloud.database({
       env: 'test'//这里是制定环境，依然用环境ID
   })

5. 插入

   db.collection('test').add({     //填写集合名
       data:{
               test: '插入数值'    //test为键名，后面是数值或者函数
       },
       success: res => {
               //在返回结果中会包含新创建的记录的_id
               this.setData({
                   csid: res._id,
                   test: '插入数值'
               })
               wx.showToast({
                       title: '新增记录成功',
               })
               console.log('记录 _id: ', res._id)
       },
       fail: err => {
               wx.showToast({
                   icon: 'none',
                   title: '新增记录失败'
               })
       }
   })

6. 查询

   db.collection('test').doc('数值').get({
           success: function(res){
                   //res.data 包含该记录的数据
                   console.log(res.data)
           }
   })

7. 删除

   db.collection('test').doc('数值').remove({
           success: function(res){
                   //res.data 包含该记录的数据
                   console.log(res.data)
           }
   })

8. 更新

   db.collection('test').doc('数值').update({
           data: {
                   test: '测试更新'
           }
   })

存储管理

• wx.cloud.uploadFile 方法上传存储（上传图片什么的）
• wx.cloud.downloadFile 方法下载文件
• wx.cloud.deleteFile 方法删除文件
• wx.cloud.getTempFileURL 方法获取临时链接

增删查改

1. 增加

   • 上传一条新的数据
   • 复制一条已有数据
   • 导入已有数据

2. 删除

   • 删除一条数据
   • 删除多条数据

3. 查询

   • 查询所有数据
   • 分页查询所有数据
   • 瀑布流持续加载数据
   • 下拉刷新数据
   • 分类查询数据

4. 修改

   • 修改具体的数据字段
   • 数据自增
   • 数据累乘

几个问题

1. 小程序云开发构建npm提示没找到node_modules目录

   状况如该图
   http://m.qpic.cn/psb?/V10KS9ws4Pxud0/tDtsgHabogb2bAJi8CTyTEKap*D15ydTjWkePGlUsqc!/b/dMAAAAAAAAAA&bo=OAQbAzgEGwMDCSw!&rf=viewer_4
   官网给的文档写得不够充分，得这样做

   1. npm init
   2. npm install --production
   3. npm i vant-weapp -S --production

2. 普通更新可以在本地进行，批量更新只能在云函数中进行

3. this.setData() 函数用于 将逻辑层数据发送到视图层，同时对应的改变 this.data 的值。

4. 小程序端和云函数的权限区别，具体表现为云函数创建的数据在小程序端无法删除

   1. 首先要说明一件事，数据库的权限问题，只有管理员或者创建者可写
      

      （管理员读写指的是在云开发控制台操作（大概是这个意思吧））

   2. 也就是说，要想在小程序端删除东西，得先识别你是创建者，也就是要知道你的openid
   3. 但是云函数添加的数据是没有openid这个属性的，而小程序端添加的数据是有的

5. 小程序是客户端，云开发是服务端，云开发包含以下三个部分：
   
   1. 云存储：用户图片存储
   2. 云数据库：用户数据存储
   3. 云函数：小程序端无法完成的逻辑（比如获取openID，获取小程序码，生成分享图）

授权

部分接口需要经过用户授权同意才能调用。我们把这些接口按使用范围分成多个 scope ，用户选择对 scope 来进行授权，当授权给一个 scope 之后，其对应的所有接口都可以直接使用。

部分接口需要获得用户授权同意后才能调用。此类接口调用时：

• 如果用户未接受或拒绝过此权限，会弹窗询问用户，用户点击同意后方可调用接口；
• 如果用户已授权，可以直接调用接口；
• 如果用户已拒绝授权，则不会出现弹窗，而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。

1. 打开设置界面
   
   • 用户可以在小程序设置界面（「右上角」 - 「关于」 - 「右上角」 - 「设置」）中控制对该小程序的授权状态。
   • 开发者可以调用 wx.openSetting 打开设置界面，引导用户开启授权。
     
     • 也就是说，如果用户已拒绝授权，在fail回调中，我们可以进入一个建议用户增加授权的页面，里面有一个按钮，点击即调取 wx.openSetting，让用户添加权限
2. 提前发起授权请求
   开发者可以使用 wx.authorize 在调用需授权 API 之前，提前向用户发起授权请求。
3. 注意事项
   
   • wx.authorize({scope: "scope.userInfo"})，不会弹出授权窗口，请使用 <button open-type="getUserInfo"/>
   • 需要授权 scope.userLocation 时必须配置地理位置用途说明。

用户登录的身份获取

第一步

• 在 app.js 文件中云能力初始化函数 onLaunch 中写入 env 以及 traceuser

/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function () {
    wx.cloud.init({
        traceUser: true,//是否将用户访问记录留存到用户管理中
        env: 'dotson-h-b775b3'//定义各个服务的默认环境
    })
},

第二步

• 创建数据库中的集合，记得修改集合的权限！！

第三步

• 获取用户授权是依赖点击button的一个操作。小程序官方文档的组建中，button有一个属性是 open-type，我们对button添加一下 open-type="getUserInfo"，此外我们还要对这个添加一个回调 bindgetuserinfo，函数名可以仍然写 getUserInfo

<view>
  <button open-type='getUserInfo' bindgetuserinfo='getUserInfo'>+</button>
</view>

第四步

• 在 index.js 中编写 getUserInfo 函数，其中打印出来的东西里面， result.detail.userInfo 中是我们要的用户身份信息

/**
* ZEA：获取并存储用户身份信息
*/
getUserInfo: function(result){
    console.log(result.detail.userInfo);
    userinfo.add({
        data: result.detail.userInfo,
        success(res){
            console.log(res)
        },
        fail: console.error
    })
}

第五步

• 初始化数据库，详见小程序官网api

第六步

• 避免反复写入同一个用户的数据，在get到userinfo后，用他的openid在数据库里找一下，如果有数据，则不进行add函数，没有数据就进行add函数

分享

使用 onShareAppMessage(Object object)
需要 return 一个 Object ，用于自定义转发内容，返回内容如下
- title 转发标题
- path 转发路径
- imageUrl 自定义图片路径

上传图片

1. 选取图片，使用 wx.chooseImage(Object object)，从本地相册选择图片或使用相机拍照。
2. 上传图片，在小程序端可调用 wx.cloud.uploadFile 方法进行上传

wx.cloud.uploadFile({
  cloudPath: 'example.png', // 上传至云端的路径，可以用一些函数（比如随机函数，但是随机也还是可能出现碰撞）造路径的名字，不然的话如果命名重复就会出现覆盖
  filePath: '', // 小程序临时文件路径
  success: res => {
    // 返回文件 ID
    console.log(res.fileID)
  },
  fail: console.error
})

发送HTTP请求

1. 小程序只能给5个可信域名发送HTTP请求，而且域名需要备案；但是云函数发送HTTP请求数量没有限制，也无需备案

/**
* vant的tabbar
*/
<van-tabbar active="{{ activeBar }}" bind:change="barOnChange" active-color="#4C4C4C">
  <van-tabbar-item>
    <image
      slot="icon"
      src="../../images/home-normal.png"
      mode="aspectFit"
    />
    <image
      slot="icon-active"
      src="../../images/home-active.png"
      mode="aspectFit"
    />
    广场
  </van-tabbar-item>
  <van-tabbar-item>
    <image class='add'
      slot="icon"
      src="../../images/add-normal.png"
      mode="aspectFit"
    />
    <image class="add"
      slot="icon-active"
      src="../../images/add-active.png"
      mode="aspectFit"
    />
    去丧
  </van-tabbar-item>
  <van-tabbar-item info="10">
    <image
      slot="icon"
      src="../../images/mine-normal.png"
      mode="aspectFit"
    />
    <image
      slot="icon-active"
      src="../../images/mine-active.png"
      mode="aspectFit"
    />
    我的
  </van-tabbar-item>
</van-tabbar>

  "tabBar": {
    "position": "bottom",
    "backgroundColor": "#fff",
    "selectedColor": "#FCC53A",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "广场",
        "iconPath": "images/home-normal.png",
        "selectedIconPath": "images/home-active.png"
      },
      {
        "pagePath": "pages/qson/qson",
        "text": "去丧",
        "iconPath": "images/add-normal.png",
        "selectedIconPath": "images/add-active.png"
      },
      {
        "pagePath": "pages/self/self",
        "text": "我的",
        "iconPath": "images/mine-normal.png",
        "selectedIconPath": "images/mine-active.png"
      }
    ]
  },