30岁被裁，我用云开发写了个上门喂猫小程序进行创业

最新推荐文章于 2024-07-11 10:13:12 发布

TangAcrab

最新推荐文章于 2024-07-11 10:13:12 发布

阅读量485

点赞数 1

分类专栏： ts taro 文章标签：小程序前端 taro云开发

本文链接：https://blog.csdn.net/weixin_39786582/article/details/129241689

版权

taro 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

关于我：

在天府三街太保大厦里面的一名前端码畜。2023年离春节放假的最后一个星期，通知被裁，纵然很舍不得身边的朋友，也的确是没有办法，因为这个部门几乎都没有了。当时觉得以自己的性格做不来管理，除了经验，敲代码也敲不过年轻人。伴随着自己内心的惶恐，又正好在春节时期刷视频看到了上门做饭和上面喂猫，就心里面一横，决定自己创业。

（工位随拍）

现在：

经过一个多月的筹划，小程序也写出来了，叫做【橘胖胖】。在高新区注册了公司。也招了几个员工。计划在成都市区先做着试试看。
在这里插入图片描述

（第一天的地推）

自己摸索做的小程序：没有UI设计, 就自己摸索😅
小程序使用： Taro + vue3 + unnocss + ts + NutUI4 + pinia 进行开发。不得不说 原子化css挺适合小型项目和个人的。
在这里插入图片描述

云开发中遇到的难点：

1. 引入unnocss

这里推荐使用 taro-plugin-unocss 插件。并在 Taro 项目配置文件 index.js中进行如下配置：
在这里插入图片描述
然后在入口文件 app.ts中引入uno.css，就可以在小程序中使用 unnocss 了。 unnocss速查https://uno.antfu.me/

2. 自定义tabbar

项目中，我没有使用在 src 目录下创建 custom-tab-bar文件夹的方式来实现自定义tabbar，而是使用了全局组件 + 全局状态管理的方式。tabbar 当前激活项index存储在 pinia中。这种方式的tabbar在小程序的第一次启动中会出现闪动。

在app.ts全局配置文件中，添加要跳转的tabbar页面路由，用来占位和确保Taro.switchTab方法能调用成功。
在这里插入图片描述
添加全局tabbar组件, 并保证每次小程序进来，tabbar的激活项都在正确的位置。

3.云开发中的微信支付

因为云开发的天然优势，在代码中云开发初始化的时候，我们就可以拿到用户 openid，后面通过 opendid来操作用户相关的东西即可。
在云开发中，使用微信支付逻辑如下：
在这里插入图片描述

在微信支付成功回调函数里，处理完自有逻辑后，必须返回给微信成功状态，不然微信会一直会回调访问。

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

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境


const db = cloud.database()
// 支付回调必须给腾讯服务器有返回
exports.main = async (event, context) => {
  // 1. 保存微信服务器返回的内容
  db.collection('vx_pay_result_record').add({
    data: {
      _createTime: new Date().getTime(),
      return_info: JSON.stringify(event)
    }
  })
  // 2. 微信支付成功回调后，处理自行业务逻辑
  // 判断 vx 回调返回订单金额、订单号与数据库是否一致，一致则允许更新数据
  const orderInfoRes = await db.collection('order').where({
    pay_status: 'wait',
    order_number: event.outTradeNo
  }).get()
  // 与数据库中支付价格一致时,允许修改
  if (orderInfoRes.data[0].pay_price * 100 === event.cashFee) { 
    db.collection('order').where({
      pay_status: 'wait',
      order_number: event.outTradeNo // 使用商户订单号进行匹配
    }).update({
      // 修改订单状态和更新时间戳
      data: {
        pay_status: 'over',
        order_status: 1,
        _updateTime: new Date().getTime()
      }
    })
    // 3. 返回指定格式的数据。告知微信服务器支付结果处理完成
    return {
      errcode: 0,
      errmsg: 'ok'
    }
  }
}