前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何优雅的写小程序代码

如何优雅的写小程序代码

原创
作者头像
谭广健
发布2022-05-06 09:40:57
2K0
发布2022-05-06 09:40:57
举报
文章被收录于专栏:谭广健的专栏

在中国35岁可能就是程序员的分水岭;35岁前你可以无视一切,但35岁后你可能就被无视。但其实怎么都好,路是自己的,走自己的路让人去说吧。35岁前你可以要求自己的程序能正常运行和不出问题就可以了,也可以引入一些最新的技术。但35岁后就不能按这些要求,虽然稳定是前提,但有更多应该去考虑代码的优雅和他人的可读性。为什么突然会有这些感想呢,因为最近获得了一份大厂内部的小程序代码,看后不经感慨都是实现同样的功能,但人家写得实在太优雅了,所以在这里分享一下吧。功能其实也很简单就是通过云函数获取微信的OPENID,那他是怎么写的呢。。

首先将云的信息写在envList.js,这样换其他环境只需要修改里面的id即可。

代码语言:javascript
复制
const envList = [{"envId":"环境ID","alias":"cloud1"}]
const isMac = false
module.exports = {
    envList,
    isMac
}

有了环境参数,就在app.js 进行调用,代码如下:

代码语言:javascript
复制
App({
  async onLaunch() {
    this.initcloud()

    this.globalData = {
      collection: 'database',//云数据集
      // 最大文件上传数量
      fileLimit: 2
    }
  },

  flag: false,
  /**
   * 初始化云开发环境(支持环境共享和正常两种模式)
   */
  async initcloud() {
    const shareinfo = wx.getExtConfigSync() // 检查 ext 配置文件
    const normalinfo = require('./envList.js').envList || [] // 读取 envlist 文件
    if (shareinfo.envid != null) { // 如果 ext 配置文件存在,环境共享模式
      this.c1 = new wx.cloud.Cloud({ // 声明 cloud 实例
        resourceAppid: shareinfo.appid,
        resourceEnv: shareinfo.envid,
      })
      // 装载云函数操作对象返回方法
      this.cloud = async function () {
        if (this.flag != true) { // 如果第一次使用返回方法,还没初始化
          await this.c1.init() // 初始化一下
          this.flag = true // 设置为已经初始化
        }
        return this.c1 // 返回 cloud 对象
      }
    } else { // 如果 ext 配置文件存在,正常云开发模式
      if (normalinfo.length != 0 && normalinfo[0].envId != null) { // 如果文件中 envlist 存在
        wx.cloud.init({ // 初始化云开发环境
          traceUser: true,
          env: normalinfo[0].envId
        })
        // 装载云函数操作对象返回方法
        this.cloud = () => {
          return wx.cloud // 直接返回 wx.cloud
        }
      } else { // 如果文件中 envlist 不存在,提示要配置环境
        this.cloud = () => {
          wx.showModal({
            content: '当前小程序没有配置云开发环境,请在 envList.js 中配置你的云开发环境', 
            showCancel: false
          })
          throw new Error('当前小程序没有配置云开发环境,请在 envList.js 中配置你的云开发环境')
        }
      }
    }
  },

  // 获取云数据库实例
  async database() {
    return (await this.cloud()).database()
  },

  // 上传文件操作封装
  async uploadFile(cloudPath, filePath) {
    return (await this.cloud()).uploadFile({
      cloudPath,
      filePath
    })
  },

  // 下载文件操作封装
  async downloadFile(fileID) {
    return (await this.cloud()).downloadFile({
      fileID
    })
  },

  // 获取用户唯一标识,兼容不同环境模式
  async getOpenId() {
    const {
      result: {
        openid,
        fromopenid
      }
    } = await (await this.cloud()).callFunction({
      name: 'getOpenId'
    }).catch(e => {
      let flag = e.toString()
      flag = flag.indexOf('FunctionName') == -1 ? flag : '网络服务异常,请确认网络重新尝试!'
      wx.hideLoading()
      wx.showModal({
        content: flag, // 此提示可以在正式时改为 "网络服务异常,请确认网络重新尝试!"
        showCancel: false
      })
      throw new Error(flag)
    })
    if (openid !== "") return openid
    return fromopenid
  }
})

你以为就这样完成,NO,还有云函数也写得很不错,它还判断了数据集是否存在。。

代码语言:javascript
复制
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({ // 初始化云开发环境
  env: cloud.DYNAMIC_CURRENT_ENV // 当前环境的常量
})
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  // 预置创建集合,如果存在则自动失败跳过,自己上架时可以去掉
  try{ await db.createCollection('dataname') }catch(e){}
  const wxContext = cloud.getWXContext()
  // 返回当前用户的身份信息,用于数据库记录和查询
  return {
    event,
    openid: wxContext.OPENID,
    fromopenid: wxContext.FROM_OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

在小程序页面怎么调用呢,好吧这里也分享一下。。他不是放在onLoad,而放在onShow里,这个我没怎么深究,一个是监听加载,就是当页面加载的时候进行调用。而另一个则是监听显示,就是显示时调用。

代码语言:javascript
复制
  onShow() {
    // 通过云函数调用获取用户 _openId
    getApp().getOpenId().then(async openid => {
      // 根据 _openId 数据,查询并展示待办列表
      const db = await getApp().database()
      db.collection(getApp().globalData.collection).where({
        _openid: openid
      }).get().then(res => {
        const {
          data
        } = res
        // 存储查询到的数据
        this.setData({
          // data 为查询到的所有待办事项列表
          todos: data,
          // 通过 filter 函数,将待办事项分为未完成和已完成两部分
          pending: data.filter(todo => todo.freq === 0),
          finished: data.filter(todo => todo.freq === 1)
        })
      })
    })
    // 配置首页左划显示的星标和删除按钮
    this.setData({
      slideButtons: [{
        extClass: 'starBtn',
        text: '星标',
        src: '../../images/list/star.png'
      }, {
        type: 'warn',
        text: '删除',
        src: '../../images/list/trash.png'
      }],
    })
  },

是否有点醍醐灌顶,大家都是写同样功能,人家就可以写得如此精辟和优雅。。惭愧啊。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档