投票小程序

大家好，我是一名刚入职的前端小白，如果此篇文档有什么说得不对的，望多多包涵！

在开发前，必须要有相应的知识储备，如vue，vue在小程序中是非常非常重要的，很多写法都是要基于vue来做，里面也是有组件的引用、生命周期等等，所以说还是要多学点知识

在正式开发时，公司已经有了一套投票的后端接口，前端只有一套h5代码，没法拿过来直接用，只能一步一步写静态页面，大概花了一天半把静态页面全部写完，后面的话就是我自己对接口了，对接口js部分也是本项目最头疼的部分

因为接口本来就有，所以公司的java后端就直接把本项目要用到数据库甩给我，让我在数据库里找接口

如上图所示，本项目所用到的表，就大致几个选手表、用户表、活动表、作品表等等，所谓的让我找接口就是每张表的表名首字母大写然后前面加一个get就是接口的路径，我虽然是小白，但我也清楚单纯这些接口只有查询的，而没有提交的，比如报名，投票等，应该用那个接口呢？

带着这些疑惑我只能去那个h5代码中寻找答案,还好我的基础比较好，接口也全部被我找齐，当我开始写登录时，我居然傻到按照h5vue的写法去写，完全忘了微信小程序有一套自己的登录流程，如下：

还好发现接口一直报错，反应过来了，也相应的修改过来了

   //登入
      wx.login({
        success: (res)=>{
             if(res.code){
               wx.request({
                 url: host+'getOpenid',
                 data: {json: res.code},
                 method: 'POST',
                 header: {
                   'content-type': 'application/x-www-form-urlencoded'
                 },
                 success: (ress)=>{
                  //  console.log(ress)
                   var openid=ress.data.data.openid
                   wx.setStorageSync('userOpenId',openid);  
              //      getEnter({qopenid: openid})
              // .then(res0=> {
              //  console.log(res0)
                 getUser({
                  sqlstr:"order by id desc",
                  openid: openid,
                })
              // })
              .then(res => {
                console.log(res)
                if (res.length > 0) {
                  wx.setStorageSync('user', res[0]); 
                  // wx.setStorageSync('inviteType', res.inviteType);
                }else console.log('新用户');
              })
                 }
               })
             }else{
               console.log("获取用户失败",res.errMsg)
              }
        }
      })

在这个项目中我觉得最难的地方是报名这块，特别是上传作品这块，还好最后也都解决了

//点击上传图片
  addImage(){
    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album','camera'],
      camera: "back",
      success: (res)=>{
        // console.log(res)
        var str=""
        res.tempFiles.forEach((item)=>{
              str+=item.tempFilePath+","
        })
        str=str.slice(0,str.length-1)
        console.log(str)
              wx.uploadFile({  
            url: 'https://tp.rongjikeji.club/tphd/uploadImg',
            filePath: str,
            name: 'file',
            success:(ress)=>{
          //  console.log(res)
    this.setData({
      'form.productions': (JSON.parse(ress.data).data).join()
    })
      }
          }) 
    
       this.setData({
        leaveImage: res.tempFiles,
       }) 
       if(this.data.leaveImage.length===5){
         this.setData({
          showImage: false,
         })
      }
      }
    })
  },

本项目中其他功能也都算简单，大致都完成了，

总结: 在项目中如果遇到了没写过的功能，不要害怕，用平常心态去做，在网上查一查，就一定可以完成，加油，前端人！！！