云函数小程序-搭建基础环境

使用云函数的话我们需要一些步骤进行加载，而我也想记录一下，以后搭建可以直接复制粘贴，要多懒有多懒，哈哈哈哈

加载一些样式文件

首先我们创建一个存放样式的文件夹，存放一些公共样式啊，字体啊，图标啊啥的。

下面都是些我平常用的，大家参考就行

common.wxss

/* 公共样式  */
view,
scroll-view {
  box-sizing: border-box;
}

image,
.fullbox {
  width: 100%;
  height: 100%;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: normal;
  background-color: transparent;
}

button::after {
  border: none;
}

text,
button {
  letter-spacing: 2rpx;
  padding-left: 2rpx;
}

/* 页面样式 */
#pagebox {
  width: 100vw;
  min-height: 100vh;
}

/* flex居中 */
.flexcent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* flex竖向居中 */
.flexdicn {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* flex俩段对齐 */
.flexspb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* flex */
.flexaic {
  display: flex;
  align-items: center;
}

/* 点击态 */
.active:active {
  opacity: .7;
}

/* 底部边距 */
.boomadapter {
  padding-bottom: 20px;
}

iconfont.wxss（这个是字体图标，尽可能用图标，比图片香多了，使用应该不用写吧，啊哈哈哈！）

@font-face {
  font-family: "iconfont"; /* Project id 3605540 */
  src: url('//at.alicdn.com/t/c/font_3605540_4ezkcenwka6.woff2?t=1661246570744') format('woff2'),
       url('//at.alicdn.com/t/c/font_3605540_4ezkcenwka6.woff?t=1661246570744') format('woff'),
       url('//at.alicdn.com/t/c/font_3605540_4ezkcenwka6.ttf?t=1661246570744') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-fanhui:before {
  content: "\e601";
}

typefont.wxss（字体样式，和字体图标差不多）

@font-face {
  font-family: 'webfont';
  font-display: swap;
  src: url('https://at.alicdn.com/t/webfont_ls6zzv1pz4a.eot');
  src: url('https://at.alicdn.com/t/webfont_ls6zzv1pz4a.eot?#iefix') format('embedded-opentype'),
    url('https://at.alicdn.com/t/webfont_ls6zzv1pz4a.woff2') format('woff2'),
    url('https://at.alicdn.com/t/webfont_ls6zzv1pz4a.woff') format('woff'),
    url('https://at.alicdn.com/t/webfont_ls6zzv1pz4a.ttf') format('truetype'),
    url('https://at.alicdn.com/t/webfont_ls6zzv1pz4a.svg#NotoSansHans-DemiLight') format('svg');
}

.web-font {
  font-family: "webfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

加载一些公共方法

我们接下来还要使用一些公共的方法，因为是全局引用就记录一下。

app.js（第一个当然是app.js了！）

//获得全局js变量（公共方法
const util = require('./way/util')
const cloud = require('./way/cloud')

App({
    // 导出全局变量
    getutil() {
        return util
    },
    // 导出云函数
    getcloud(){
        return cloud
    },
    onLaunch(){
      // 初始化云函数
     wx.cloud.init()
    }
});

接下来就是app.js引用的俩个js文件了。

cloud.js（因为我们使用云函数，就先封装一个基础的，有啥复杂情况在修改。用到了缓存，想着有些地方可以节省请求，虽然云函数也很快，但按需计费，要省钱啊，哈哈哈！）

//获得全局js变量（公共方法
const util = require('./util')

// 请求方式的封装（云函数名称，传给云函数的参数,是否需要加载动画，是否要存入缓存/存入的话读取的缓存名称）
function cloud(name, data, isloading, cache) {
  return new Promise((resolve, reject) => {
    if (isloading) {
      wx.showLoading({
        title: '加载中'
      })
    }
    if (!data) {
      data = {}
    }
    // 获取缓存
    util.cache('gs', cache).then(datacache => {
      if (!datacache || datacache === '') {
        wx.cloud.callFunction({
          // 云函数名称
          name: name,
          // 传给云函数的参数
          data: data,
          success: (res) => {
            if (cache && cache != '') {
              util.cache('ss', cache, res.result)
            }
            resolve(res.result)
          },
          fail: (err) => {
            reject(err)
          },
          complete: () => {
            if (isloading) {
              wx.hideLoading()
            }
          }
        })
      } else {
        if (isloading) {
          wx.hideLoading()
        }
        resolve(datacache)
      }
    })
  })
}

// 用户登录
const login = (data) => cloud('login', data, false, 'userinfo')

module.exports = {
  login, // 用户登录
}

util.js （这里封装一些公共的方法，就都展示出来，哪天我在加）

// 对缓存的封装
function cache(type, key, conent) {
  return new Promise((resolve) => {
    if (!conent) {
      conent = ''
    }
    // 存储 
    if (type === 's') {
      wx.setStorage({
        key: key,
        data: conent,
        success() {
          resolve()
        }
      })
    } else if (type === 'ss') {
      wx.setStorageSync(key, conent)
    } else if (type === 'g') {
      wx.getStorage({
        key: key,
        success(res) {
          resolve(res)
        }
      })
    } else if (type === 'gs') {
      var value = wx.getStorageSync(key)
      resolve(value)
    } else if (type === 'c') {
      wx.clearStorage({
        success() {
          resolve()
        }
      })
    } else if (type === 'cs') {
      wx.clearStorageSync()
    } else if (type === 'r') {
      wx.removeStorage({
        key: key,
        success() {
          resolve()
        }
      })
    } else if (type === 'rs') {
      wx.removeStorageSync(key)
    }
  })
}
// 防抖，
var timeout;

function debounce(time) {
  return new Promise((resolve) => {
    if (timeout) {
      clearTimeout(timeout)
    }
    timeout = setTimeout(() => {
      resolve()
    }, time)
  })
};
// 节流
var canRun = true;

function throttle(time) {
  return new Promise((resolve) => {
    if (canRun == true) {
      clearTimeout(timerun)
      canRun = false
      var timerun = setTimeout(() => {
        canRun = true;
      }, time);
      resolve()
    }
  })
}
// 页面跳转
function jump(type, url) {
  this.throttle(500).then(() => {
    // 保留当前页面，跳转到应用内的某个页面。
    if (type === 'nav') {
      wx.navigateTo({
        url: url
      })
      // 关闭当前页面，返回上一页面或多级页面
    } else if (type === 'bck') {
      wx.navigateBack({
        delta: url
      })
      // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
    } else if (type === 'swt') {
      wx.switchTab({
        url: url
      })
      // 关闭当前页面，跳转到应用内的某个页面
    } else if (type === 'rdt') {
      wx.redirectTo({
        url: url
      })
    }
  })
}

// 节点信息
function select(type, node) {
  return new Promise((resolve) => {
    // 设备信息
    if (type === 'device') {
      wx.getSystemInfo({
        success(res) {
          resolve(res)
        }
      })
    } else if (type === 'single') {
      // 单个节点
      wx.createSelectorQuery().select(node).boundingClientRect().exec(res => {
        resolve(res)
      })
    }
  })
}
// 提示信息
function tips(type, conent, icon) {
  return new Promise((resolve) => {
    if (!icon) {
      icon = 'none'
    }
    // 显示消息提示框
    if (type === 'toast') {
      wx.showToast({
        title: conent,
        icon: icon,
        duration: 2000
      })
    } else if (type === 'modal') {
      // 显示模态对话框
      wx.showModal({
        content: conent,
        success(res) {
          if (res.confirm) {
            resolve()
          }
        }
      })
    }
  })
}

module.exports = {
  cache, // 对缓存的封装
  debounce, //防抖，
  throttle, //节流
  jump, //页面跳转
  select, //节点信息
  tips, //提示信息
}

记录用户信息的云函数

暂时展示一下用户表的云函数吧，字段比较少，因为我也不知道有啥需要的大家参考一下应该就行，没啥难度！

login/index.js（注意！！！有个专属的云函数的文件，大家写完记得上传部署才能正常使用，否则不会找到的，可能会报错！）

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

cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  return new Promise((resolve, reject) => {
    var obj = {
      _openid: event.userInfo.openId
    }
    var user_info = {
      nick_name: "", //用户名
      avatar_url: "", //用户头像
      phone: "", //用户手机号
    }
    db.collection('user_table').where(obj).get().then(res => {
      // // 不在用户表中是新用户，把数据添加到
      if (res.data.length === 0) {
        obj.user_info = user_info
        obj.created_time = new Date().getTime().toString()
        obj.update_time = new Date().getTime().toString()
        db.collection('user_table').add({
          // data 字段表示需新增的 JSON 数据
          data: obj
        }).then(result => {
          resolve(Object.assign(result, obj))
        })
      } else {
        resolve(res.data[0])
      }
    })
  })
}

添加一个加载页，并且在加载页处理数据

为什么要这个加载页呢，因为我们有时候要处理一些用户的权限啊，信息啊，以及初始化的信息啊，都需要一些时间，如果没这个加载页的话可能会产生白屏的问题。

load.wxml

<!-- 加载页面 -->
<view id='pagebox' class="load">
  <!-- 背景图片 -->
    <image src="/images/currency/load.gif" />
</view>

load.js（刚好这里使用了处理用户信息的云函数）

// 加载页面
Page({
  // 页面的初始数据
  data: {
    modelist: ['iPhone X','iPhone XR'], //需要适配的手机型号
  },
  // 获取用户信息
  getuserinfo(options) {
    // 获取用户信息
    getApp().getcloud().login().then(res => {
      if (options.turnid) {} else {
        // 跳转到首页
        getApp().getutil().jump('swt', '/pages/home/home')
      }
    })
  },
  // 获取用户设备信息
  gerphoneinfo() {
    getApp().getutil().select('device').then(res => {
      // 判断型号是否需要底部适配
      res.adapter = false
      if (this.data.modelist.indexOf(res.model) > -1) {
        res.adapter = true
      }
      // 存储到缓冲中
      getApp().getutil().cache('ss', 'device', res)
    })
  },
  // 一进入页面清空全部缓存
  clearcache(options) {
    getApp().getutil().cache('c').then(() => {
      // 获取用户信息
      this.getuserinfo(options)
      // 获取用户设备信息
      this.gerphoneinfo()
    })
  },
  // 生命周期函数--监听页面加载
  onLoad(options) {
    // 已经进入页面清空全部缓存
    this.clearcache(options)
  }
})

load.wxss

/* 加载页面的图片 */
.load image {
  margin-top: 20vh;
  height:40vh;
}

在附张我网上找的图片

就是这样，下班！！！