1 Star 0 Fork 0

MockerPeking / taro-card

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

taro+taro-ui+云开发项目手册

:rocket: 这是一个taro+taro-ui+云开发项目,主要使用ui(taro-ui),taro框架搭建,多端适配,后端使用的腾讯小程序云开发。

最近在掘金上看云开发的文档,发现了一篇mpvue的项目示例,觉得比较好,就用taro重新写了一遍,体验了一把云开发流程,现在发布查看的是真实数据。

:point_down:扫码体验吧:

小程序

taro-card文档地址 : document

项目结构

├── dist              编译后文件
├── config            项目配置项
    ├── dev.js             
    ├── index.js           
    └── prod.js            
└── src
    ├── assets            外部资源
        ├── data          json数据
        └── images        图片资源
    └── app.js            cloud初始化等
    └── pages             页面层 
        ├── coming-soon   *页面
        ├── components    *页面
        ├── index         *页面
        └── user-center   *页面
└── static
    ├── functions          云函数文件

安装*调试

# 全局安装 taro 开发工具
npm install -g @tarojs/cli

# 安装依赖
npm i

# 小程序预览(需下载下载并打开微信开发者工具,选择预览项目根目录)
npm run dev:weapp

# H5 预览
npm run dev:h5

# 百度
npm run dev:swan

# 支付宝
npm run dev:alipay

云函数开发说明

以当前项目页面使用中的云函数流程来讲解云函数开发的基本流程,学习更多,还是参看小程序官方文档,了解更多。

云开发上传编辑图片

//配置存储路径、相对路径
let cloudPath = `./static/img/${timestamp}${filePath.match(/\.[^.]+?$/)[0]}`
console.log(filePath, cloudPath)
wx.cloud.uploadFile({
    cloudPath,
    filePath,
    success: res => {
        Taro.atMessage({
            message: '上传成功',
            type: 'success'
        })
        this.setState({
            fileId: res.fileID
        }, () => {
            let bannerList = [...this.state.getFiles, this.state.fileId]
            this.uploadImg(bannerList)
        })
    },
    fail: error => {
        Taro.atMessage({
            message: JSON.stringify(error),
            type: 'error'
        })
    }
})
}

基于数据库操作更新该数据有权限问题,全部写在云函数里处理

祝福页面-用户信息相关查询、存储

祝福页面获取新用户的openid,根据该标识存储用户信息,最后展示

  • 获取用户user云函数文件:
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

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

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID
  }
}

调用该方法获取当前用户的openid,调用处理:

getOpenId () {
      const that = this
      wx.cloud.callFunction({
        name: 'user',
        data: {}
      }).then(res => {
        that.setState({
            openId:res.result.openid
        })
        that.getIsExist()
      })
}

接着判断当前用户是否已经存在于数据库中,即getIsExist()方法,更多数据库的api可以看下官方文档:

getIsExist () {
      const that = this
      const db = wx.cloud.database()
      const user = db.collection('user')
      user.where({
        _openid: that.state.openId
      }).get().then(res => {
        if (res.data.length === 0) {
          that.addUser()
        } else {
          Taro.showToast({
            title:'您已经送过祝福了~'
        })
        }
      })
}

接下来介绍存储用户信息的方法,即addUser():

addUser () {
      const that = this
      const db = wx.cloud.database()
      const user = db.collection('user')
      user.add({
        data: {
          user: that.state.userInfo
        }
      }).then(res => {
        that.getUserList()
      })
}

其他资源存储

:boom: 存储管理 :point_right: 上传相关文件 :point_right: 复制存储地址写入集合元素里

静态资源走云端存储,可以随时替换,避免发布审核问题

好吧,感谢mpvue婚礼项目,欢迎star

MIT License Copyright (c) 2018 三井寿 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

一个react+taro-ui云开发微请柬项目,已正式发布 展开 收起
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/mockerpeking/taro-card.git
git@gitee.com:mockerpeking/taro-card.git
mockerpeking
taro-card
taro-card
master

搜索帮助