Taro + 云开发

一、云开发

1、云开发简介

开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。

云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

简单理解 让前端人员可以独立开发

2. 创建项目

打开微信开发者工具测试号没有云开发的功能，如果没有AppID 可以去微信公众平台注册一个，在微信开发者工具中创建项目要选中小程序 云开发 这个服务

3、云数据库

云开发提供了一个 JSON 数据库，提供了 2GB 免费存储空间，数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合（相当于关系型数据中的表），集合可看做一个 JSON 数组，数组中的每个对象就是一条记录，记录的格式是 JSON 对象。

关系型数据库	文档型数据库
数据库 database	数据库 database
表 table	集合 collection
行 row	记录 record / doc
列 column	字段 field

关系型数据适合很复杂的表之间关系的查找
文档(非关系)型数据库适用于频繁的读写操作

3.1 云数据库提供的数据类型

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

3.2 操作云数据库

1. 小程序控制(读写数据受权限控制限制)
2. 云函数控制(拥有所有读写数据库的权限)
3. 控制台控制(拥有所有读写数据库的权限)

3.3 云数据库权限管理

• 仅创建者可写，所有人可读
• 仅创建者可读写
• 仅管理端可写
• 仅管理端可读写

3.4 数据库初始化

const db = wx.cloud.database();
// 切换环境
const testDB = wx.cloud.database({
	env: 'test'	
})
复制代码

3.5 添加数据

先在控制台创建一个集合

下面的代码 我都是在小程序端的 .js 文件下封装到一个函数内，通过点击事件触发来运行的

1. 第一种方式

// user 集合名称
 db.collection('user').add({
      data: {
        name: 'jerry',
        age: 20
      },
      success: res => {
       	// 成功后返回的数据
        console.log(res);
      },
      fail: err => {
      	// 失败后返回的数据
        console.log(err);
      }

    })
复制代码

2. 第二种方式

 db.collection('user').add({
      data: {
        name: 'jack',
        age: 20
      }
    }).then( res => {
     	// 成功后返回的数据
      console.log(res)
    }).catch(err => {
    	// 失败后返回的数据
      console.log(err);
    })
复制代码

增删改查获取结果方式相同，之后省略

3.6 更新（修改）数据

// 更新数据要提供数据的唯一标识 _id
 db.collection('user').doc(id).update({
      data: {
        age: 18
      }
    })
复制代码

3.7 查找数据

查询

// 获取一个记录的数据
db.collection('user').doc('todo-identifiant-aleatoire').get()
// 获取多条数据
db.collection('user')
    .where({
      // 查询条件
      name: 'jerry'
    })
    .get()
复制代码

模糊查询

// 原生 JavaScript 对象
db.collection('user').where({
  description: /miniprogram/i
})

// 数据库正则对象
db.collection('user').where({
  description: db.RegExp({
    regexp: 'miniprogram',
    options: 'i',
  })
})

// 用 new 构造也是可以的
db.collection('user').where({
  description: new db.RegExp({
    regexp: 'miniprogram',
    options: 'i',
  })
})
复制代码

• i 大小写不敏感
• m 跨行匹配；让开始匹配符 ^ 或结束匹配符 $ 时除了匹配字符串的开头和结尾外，还匹配行的开头和结尾
• s 让 . 可以匹配包括换行符在内的所有字符

3.8 删除数据

// 删除单条
 db.collection('user')
    .doc('e373396c5f6afdad00552a6f78aa35db')
    .remove()
// 删除多条, 需在 Server 端进行操作（云函数）
db.collection('todos').where({
      name: 'jerry'
    }).remove()
复制代码

在小程序中有这样的要求在小程序端删除多条数据是无法控制的，我们需要调用云函数，在云函数中进行批量删除

3.9 控制台操作数据库

以上是在小程序上操作的数据库，我们也可以在控制台中操作数据库

点击添加记录

这时候可以发现在控制台创建的记录和在小程序创建的记录是不一样的，控制台创建的记录 没有 _openid 这个字段

我们在控制台已经又添加了一个 name: “jerry” 的记录 当我们再次查询时却只查询到那个在小程序内创建的记录，并没有在控制台内的创建的记录。

这个时候就要涉及之前说到的 云数据库权限 的问题，我们需要将默认的 仅创作者可读写 权限更改为 如下图所示的第一个权限 所有用户可读，仅创作者可读写

4、云函数

云函数就是一段运行在云端的代码，我们不需要管理服务器，我只需要在开发工具编写代码，通过一键部署，就可以运行这些代码

4.1 安装 node 环境

由于小程序运行环境是 node.js 所以我们需要在电脑上安装 node.js 环境
注意: 需要 Node.js v8.0 及以上版本
node官网

安装完成后, 打开 cmd 输入 node -v 查看是否安装成功

在 cloudfunctions 文件夹创建云函数下

可以在 project.config.json 文件下可以更改 cloudfunctions 文件夹 的名称

// 云函数入口文件
const cloud = require('wx-server-sdk')

// 文件初始化
cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  // event 包含我们调用云函数小程序端传递过来的对应的参数
  // context 包含上下文也包含当前用户的一些信息
}
复制代码

4.2 wx-server-sdk

• 服务端SDK
• npm install –save wx-server-sdk@latest

4.3 部署云函数

右键云函数文件夹, 点击上传部署,云端安装依赖(不上传node_modules)

// 云函数入口函数
exports.main = async (event, context) => {
  // event 包含我们调用云函数小程序端传递过来的对应的参数
  // context 包含上下文也包含当前用户的一些信息
  return {
    sum: event.a + event.b
  }
}
复制代码

注意: 每次改动之后都要进行上传

4.4 小程序端调用云函数

wx.cloud.callFunction({
    // 云函数名称
      name: 'sum',
      data: {
        a: 2,
        b: 3
      }
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err);
    })
复制代码

4.5 云函数云端测试

点击开发工具界面的云开发 -> 云函数 -> 云端测试

4.6 本地调试

也可以进行本地调试，我在进行本地调试的时候都会报一个错误，说没有发现 wx-server-sdk，
使用 npm install –save wx-server-sdk@latest 手动安装一下就好了

4.7 删除多条数据

调用云函数删除多条数据

const db = cloud.database();

// 云函数入口函数
exports.main = async (event, context) => {
  try {
    return await db.collection('user')
    .where({
      name: 'jerry'
    }).remove();
  } catch (e) {
    console.log(e);
  }
}
复制代码

4.8 获取当前用户 openid

// 云函数 login 下的代码

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {

  // 获取 WX Content (微信调用上下文)，包括 OPENID、APPID、及 UNIONID (需要满足 UNIONID 获取条件)
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}
复制代码

// 小程序端代码
 wx.cloud.callFunction({
      // 云函数的名称
      name: 'login'
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    });
复制代码

4.9 发送请求

	小程序端	云函数
发送方法	wx.request()	第三方库(request、got等)
协议支持	只支持https	根据第三方库决定
是否备案	经过 ICP 备案	可以不备案
域名个数限制	20个	无限制

下载第三方库

npm install -save request
npm install -save request-promise
复制代码

request-promise

const rp = require('request-promise');

// 云函数入口函数
exports.main = async (event, context) => {

	res = await rp(`https://frodo.douban.com/api/v2/subject_collection/movie_showing/items?				start=${event.start}&count=${event.count}&apiKey=054022eaeae0b00e0fc068c0c0a2102a`)
	  .then(function(res) {
	    console.log(res);
	    return res;
	  })
	  .catch(function(err) {
	    console.log(err);
	  });
	
	// 在云函数中打印的，要在日志文件中查看
	console.log(res);	

	return res;
}
复制代码

5. 云存储能力

云开发提供了一块存储空间，提供了上传文件到云端、带权限管理的云端下载能力，开发者可以在小程序端和云函数端通过 API 使用云存储功能。

• wx.cloud.uploadFile 上传文件
• wx.cloud.downloadFile 下载文件
• wx.cloud.deleteFIle 删除文件
• wx.cloud.getTempFileURL 获取临时链接

5.1 上传文件

chooseImage 选择图片
uploadFiles 上传云存储

  // 选择图片
    wx.chooseImage({
      count: 1, // 选择图片的数量
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths);
         let suffix = /\.\w+$/.exec(tempFilePath)[0]; // 正则表达式，返回文件扩展名
        // 上传云存储
        wx.cloud.uploadFile({  
        	// 开中文件名不要写死，否则会覆盖之前的文件
          cloudPath: new Date().getTime() + suffix, // 上传至云端的路径
          // filePath 的参数是字符串 tempFilePath
          filePath: tempFilePaths[0], // 小程序临时文件路径
          success: res => {
            // 返回文件 ID
            console.log(res.fileID)
              
            // 上传云数据库
            db.collection('image').add({
              data: {
                fileID: res.fileID
              }
            }).then(res => {
              console.log(res);
            }).catch(err => {
              console.log(err);
            })

          },
          fail: console.error
        })
      }
    })
复制代码

文件上传到云存储会返回一个fileID，可以把云存储就理解为本地硬盘，fileID 是文件路径，把 fileID 存储到数据库中方便以后使用和查找文件

注意： 开发中 cloudPath(文件名) 最好不要写死，不让后面添加的会把前面添加的覆盖掉

5.2 下载文件

downloadFile下载文件
saveImageToPhotosAlbum保存图片到手机相册

downloadFile: function(event) {
    wx.cloud.downloadFile({
    	// event.target.dataset.自定义的属性 获取自定义属性的值
      fileID: event.target.dataset.fileid, // 文件 ID
      success: res => {
        // 返回临时文件路径
        console.log(res.tempFilePath)

        // 保存文件到手机
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) { 
            // 弹出框，在一时间内消失
            wx.showToast({
              title: '保存成功'
            })
          }
        })
      },
      fail: console.error
    })
  }
复制代码

一、Taro

1、Taro 简介

Taro 一套遵循 React 语法规范的多端开发解决方案。使用 Taro，只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、App 端等）运行的代码。同时 Taro 还提供了开箱即用的语法检测和自动补全等功能百度百科

2、安装脚手架

• 安装 Taro 开发工具 @tarojs/cli
• 使用 npm 或者 yarn 全局安装，或者直接使用 npx

  npm install -g @tarojs/cli
  yarn global add @tarojs/cli
  复制代码

3. 创建项目

• 使用命令创建模板项目

  taro init [project name]
  复制代码

• 开发启动命令

  npm run dev:h5            WEB
  npm run dev:weapp         微信小程序
  npm run dev:aplipay       支付宝小程序
  npm run dev:swan          百度小程序
  npm run dev:rn            ReactNative
  复制代码

4. 路由功能

• 在 Taro 中，路由功能是默认自带的，不需要开发者进行额外的路由配置
• 这里相当于通过小程序的配置适配了小程序和 H5 的路由问题
• Taro 默认根据配置路径生成了 Route
• 我们只需要在入口文件的 config 配置中指定好 pages，然后可以在代码中通过 Taro 提供的 API 来跳转到目的页面

5. 静态资源引用

• 在 Taro 中可以像使用 webpack 那样自由第引用静态资源，而且不需要安装任何 loader
• 可以直接通过 ES6 的 import 语法来引用样式文件

6. 条件渲染

小程序在短路表达式渲染时，会出现 true 或者 false 的短暂效果，所以如果是要适配小程序，最好采用三元表达式来进行判断

7. 报错

[ app.json 文件内容错误] app.json: app.json 未找到

// project.config.json
"miniprogramRoot": "./dist",
复制代码

三、Taro + 云开发

Taro 目前的云开发模板好像有点问题，所以就使用的默认模板，单独配置的，并不麻烦

添加自己的 appid, 指定云函数目录

// project.config.json
{
  "appid": "",
  "cloudfunctionRoot": "cloudfunctions/",
}
复制代码

想要调用云函数需要先进行初始化

// app.js
componentDidMount () {
    Taro.cloud.init({
      traceUser: true,
    });
  }
复制代码

在 Taro 调用云函数，只需要将 wx 变成 Taro 即可

import Taro from "@tarojs/taro";

// 获取数据库中数据
const db = Taro.cloud.database();
    db.collection("gtd-content")
      .where({
        _openid: "omkv_47MNCwMC5AsF0nsdiFGOaHY",
      })
      .get()
      .then((res) => {
        console.log(res);
      });

// 调用云函数
async function getGtdContentItem(id) {
  const data = {
    id,
  };
  return await Taro.cloud
    .callFunction({
      name: "get-gtd-content-item",
      data,
    })
    .then((res) => {
        console.log(res.result);
        return res.result;
    });
}
复制代码