挑战30天，开发一个答题小程序，从前端零基础变开发大牛 第一天

我是一名98年的女生，本人在武汉光谷某公司就职前端开发岗位。前端开发经验有3年，技术水平很一般啦^_^，技术栈：html、css、vue、react、js。熟悉一些PHP，因为公司项目较多，平常PHP缺人手，我也会顶上去。不过技术肯定比不上我的粉丝和条友，平常有些问题也是求助于粉丝，在此真挚的感谢大家[飞吻]

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

技术栈：采用云开发，js、css、html

UI组件：colorUI、vant

好~，咱们开始进入正题

首先准备一个个人主体的小程序，已经开通云开发，目前云开发11月份计费策略已调整19.9每月，新用户好像有1个月免费试用。反正我昨天用新账号试用没成功，还是提示我要19.9开通[大哭]，大家可以试试

一、启动开发者工具

下图是云开发基础模板（里面无用的可以删删删）

大家先安装colorUI和vant高颜值，拿手及用的组件（不要重复造轮子），vant可以去官方看安装教程。感谢开源的奉献精神

二、安装完成，可以看到以下目录

先输出一个“Hello,World!”

三、搭建答题首页

首页有四个功能入口：

• 授权登录
• 答题记录
• 排行榜
• 分享功能

授权登录重点！！！

记得获取用户头像api，官方前前后后改了3次，这一次不能够直接授权获取用户头像了，需要采用“头像昵称填写”

代码：

授权登录

通过绑定事件获取头像临时链接（需要本地缓存，后面会用到），不过头像这里官方返回的有些模糊。期待下次更新解决这个问题

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

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

• 头像
• 昵称
• openid

代码：

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存储到数据库中，数据库涉及增删改查，没接触云开发的伙伴可以关注下

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