如何优雅的写小程序代码

2022-05-06 09:40:57 浏览数 (1)

在中国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'
      }],
    })
  },

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

0 人点赞