taro小程序开发-云函数开发

前言

* 当前使用的taro-cli版本:Taro v2.0.0-beta.9
* 若使用小程序云开发功能,需要在【小程序开发工具】菜单栏点击云开发
* 开通【基础版1】功能,目前是免费,存储空间5GB,数据库流量2GB
* 计费配额可以参考小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/billing/quota.html
* 云函数只适用于微信小程序场景,所以在项目中使用时,需要判断当前环境为微信小程序时才可以调用
    1. 判断办法:process.env.TARO_ENV === 'weapp',其他场景(比如h5中)则需要调用真正的后端接口

1. 项目目录建立

`
    taro-myapp
        |--client
            |---config
            |---src
            |---.editorconfig
            |---eslintrc
            |---global.d.ts
            |---package.json
            |---tsconfig.json
        |--cloud
            |---shop //eg:设置店铺列表数据
            |-----index.js
            |-----package.json
        |--.gitignore
        |--project.config.json
        |--README.md 
    
`

2. project.config.json中新增云函数配置,"cloudfunctionRoot": "cloud/",其值是云函数目录

3. 编写云函数

1. 按照上面【1】中的目录结构,在cloud/shop/index.js中编写
`
    const app = require('wx-server-sdk')  //引入云函数依赖
    app.init({  
        env: app.DYNAMIC_CURRENT_ENV  
    }) //初始化云函数,设置 API 默认环境等于当前所在环境
    exports.main = (event) => {  
        if( func === 'getShop') {  
            console.log('main event',event) //event传过来的数据格式 event:{func:'getShop',data:{a:1,b:2,c:5}}
            return {  
                sum: data.a + data.b + data.c,//event里面放的都是一些用户传递过来的数据,参数a和参数b  
                userInfo: event.userInfo //可以直接获取到用户的openid,这些是腾讯给出来的,并不需要用户去授权,很安全。  
            }  
        }  
    }
`

4. 小程序调用

1. 按照上面【1】中的目录结构,在client/gloabal.d.ts中,增加wx声明
    `
        declare var wx: any;
    `
2. 按照上面【1】中的目录结构,在client/src/app.tsx中编写
    `
        componentDidMount () {  
            wx.cloud.init({  
                traceUser: true  
          }) //用户端小程序会自动记录用户的openid和用户信息,并且在请求时会自动带入openId,无需再进行鉴权。
        }
    `
3. 按照上面【1】中的目录结构,在client/src/pages/index/index.tsx中,在需要的事件(如点击事件)中编写
    `
        Taro.cloud.callFunction({  
            name: 'shop',//小程序云函数的名称  
            data: {  
                func: 'getShop',  //具体的函数
                data: {  
                    a: 2,  
                    b: 3,  
                    c: 5  
                }  
           }  
        }).then((res)=>{ 
            return res  
       })
    `

5. 踩坑记录

* 小程序增加云函数目录后,需要重启下【小程序开发工具】,否则cloud/目录可能不会有‘云’标记,无法部署
* 小程序云函数写完之后,需要在【微信开发者工具中】,右键点击书写的云函数目录(如cloud/shop),上传并部署,部署之后云函数才可以使用,也可以右键点击‘开启云函数本地调试’,都是可视化的操作
* 云函数可以使用之后,可以查看运营数据和日志
* 小程序前端不支持使用async await语法,
    1. cnpm i regenerator
    2. 将regenerator-master/packages/regenerator-runtime 目录中的 runtime.js 文件取出来放入client/utils中
    3. 在有使用 async await 的文件前面引入这个runtime.js文件即可
    4. 如clinet/src/pages/index/inxex.tsx文件中,const regeneratorRuntime = require('../../utils/runtime.js');
    5. 有时候修改之后,小程序开发工具中,不能实时生效,此时可以重启下【小程序开发工具】
    6. 项目结构建立好之后,不要随意更换,以免project.config.json和tsconfig.json中引用的路径有误

6. tcb-router使用

1. 简介
    * tcb-router基于 koa 风格的小程序·云开发云函数轻量级类路由库,主要用于优化服务端函数处理逻辑
    * 基于tcb-router 一个云函数可以分很多路由来处理业务环境
    
2. 示例代码(云函数端 cloud/shop/index.js)
`

    // 云函数入口文件
    const cloud = require('wx-server-sdk')
    const TcbRouter = require('tcb-router'); //引用TcbRouter

    cloud.init({
        env: cloud.DYNAMIC_CURRENT_ENV
    })

    // 云函数入口函数
    exports.main = async (event, context) => {
      const app = new TcbRouter({ event})

    // app.use 表示该中间件会适用于所有的路由
      app.use(async(ctx,next)=>{
        ctx.data={}
        ctx.data.openId=event.userInfo.openId
        await next()
      })

    //适配多个路由写法
    app.router(['user,shop'],async(ctx,next)=>{
      ctx.data.from='小程序云函数测试'
      await next()

    })
       //商品列表接口
      app.router('shoplist', async (ctx, next) => {
        ctx.data.name = '商品列表页'
        ctx.data.url = 'tencent.com'
        const { param1, param2, param3 } = ctx._req.event;
        ctx.data.sum = param1 + param2 + param3
                    
        ctx.body = {
            code: 100000,
            data: ctx.data
        }
      })
      return app.serve();
    }
`
3. 示例代码(小程序前端)
`
    Taro.cloud.callFunction({  
      name: 'shop',  
      data: {  
        $url: 'getshop',  
      param1: 1,  
      param2: 2,  
      param3: 3  
      },  
      success: res => {  
        console.log('云函数 res',res)  
      },  
      fail: err => {  
        console.error('云函数调用失败', err)  
      }  
    })
`
   

8. 云开发数据库操作

1. 小程序端和云函数端均可以单独调用云数据库
    * 小程序端:如果没有指定 limit,则默认且最多取 20 条记录。
    * 云函数端:如果没有指定 limit,则默认且最多取 100 条记录
2. 小程序端单独使用示例
    `
        const db = wx.cloud.database()  
        db.collection('product替换为自己的集合名称').get().then(res => {  
          console.log('db db db',res.data)  
        })
    `
 3. 云函数端单独使用示例
    `
    const cloud = require('wx-server-sdk')
    cloud.init({
      env: cloud.DYNAMIC_CURRENT_ENV,
      throwOnNotFound: false //.get()不返回报错返回空
    })
    const db = cloud.database()
    exports.main = async (event, context) => {
      return await db.collection('product').get()
    }
    `
4.  微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/Cloud.database.html

7. 参考文档

* taro官方文档:https://nervjs.github.io/taro/docs/README.html
* tcb-router文档: https://www.npmjs.com/package/tcb-router

你可能感兴趣的:(taro,小程序,小程序云开发,前端)