挑战30天，开发一个消防知识答题小程序，第一天

我是一名98年的女生，本人在武汉光谷某公司就职前端开发岗位。前端开发经验有3年，技术水平很一般啦^_^，技术栈：html、css、vue、react、js。熟悉一些PHP，因为公司项目较多，平常PHP缺人手，我也会顶上去。

不过技术肯定比不上我的粉丝，平常有些问题也是求助于粉丝，在此真挚的感谢大家关于为什么会做一个答题小程序？主要是因为最近收到很多后台粉丝的留言，说自己想学小程序，想学前端，没有基础，对编程感兴趣之类的。所以我决定做一期从零开发搭建到一个完整上架的答题小程序。内容涉及细节较多，还提供小程序避坑指南，技术栈采用原生开发，尽量降低基础一般的粉丝上手难度

技术栈：采用云开发，js、css、htmlUI组件：colorUI、vant好~，咱们开始进入正题首先准备一个个人主体的小程序，已经开通云开发，目前云开发11月份计费策略已调整19.9每月，新用户好像有1个月免费试用。反正我昨天用新账号试用没成功，还是提示我要19.9开通，大家可以试试
一、启动开发者工具

​编辑添加图片注释，不超过 140 字（可选）下图是云开发基础模板（里面无用的可以删删删）

​编辑添加图片注释，不超过 140 字（可选）大家先安装colorUI和vant高颜值，拿手及用的组件（不要重复造轮子），vant可以去官方看安装教程。感谢开源的奉献精神二、安装完成，可以看到以下目录先输出一个“Hello,World!”

​编辑切换为居中添加图片注释，不超过 140 字（可选）三、搭建消防知识答题首页

​编辑切换为居中添加图片注释，不超过 140 字（可选）首页有四个功能入口：授权登录答题记录排行榜分享功能授权登录重点！！！

​编辑切换为居中添加图片注释，不超过 140 字（可选）记得获取用户头像api，官方前前后后改了3次，这一次不能够直接授权获取用户头像了，需要采用“头像昵称填写”

​编辑切换为居中添加图片注释，不超过 140 字（可选）代码：授权登录通过绑定事件获取头像临时链接（需要本地缓存，后面会用到），不过头像这里官方返回的有些模糊。期待下次更新解决这个问题//新版头像
onChooseAvatar: function (event) {

//头像 临时链接
var avatarUrl = event.detail.avatarUrl;
//缓存头像
wx.setStorageSync('avatarUrl', avatarUrl);
//跳转头像设置页面
wx.navigateTo({
  url: "/pages/setUser/setUser"
});

},头像缓存成功后，我们要跳转到一个头像设置页面头像昵称openid

​编辑添加图片注释，不超过 140 字（可选）代码：onLoad(options) {

//获取头像
var avatarUrl = wx.getStorageSync('avatarUrl');
if (avatarUrl) {
  this.setData({
    avatarUrl: avatarUrl
  })
}
//openid
var openid = wx.getStorageSync('openid');
if (openid) {
  this.setData({
    openid: openid
  })
}

},​刚刚缓存的头像咱们就可以直接读取使用了用户唯一标识openid云开发天然无鉴权获取非常方便（主要记录用户身份和消息下发）//获取openid
getOpenid: function () {

var that = this;
//获取openid
wx.cloud.callFunction({
  name: 'getOpenid',
  data: {},
  success: res => {
    //获取openid
    var openid = res.result.openid;
    that.setData({
      openid: openid
    })
    //缓存openid
    wx.setStorageSync('openid', openid);
  },
  fail: err => {
    console.error('[云函数] [login] 调用失败', err)
    wx.showToast({
      title: '登录失败！' + err,
      icon: 'none'
    });
  }
})

}接下来需要把用户的头像、昵称、openid存储到数据库中，数据库涉及增删改查，没接触云开发的伙伴可以关注下

​如果搭建过程中遇到问题可到后台私信提问，今天的教程就到这里啦