[web開發] 利用微信小程序開發上海大學失物招領平臺

我從開始學微信小程序到最後徹底寫完這個小程序耗時四天，能夠說開發難度很是之低，門檻也很是低，以前歷來沒接觸過微信小程序，從新寫下開發記錄。

先放圖：

1.前端開發

前端我用到了iview的ui框架，由於微信小程序的原生ui庫並非那麼美觀，而後我也是業餘的嘛，就用iview的也不爲過吧。

我基本是每一個頁面都寫一個具體的內容的，開發的不是很純粹，由於項目比較小，通常是要寫個components的，當時才入門，不懂vue，後來懂了，也用來開發了不少東西。

微信小程序的前端只須要寫四個文件，json配置文件、wxml文件（相似html）、wxss佈局文件（相似css）、js文件（相似vue），我就只貼一個頁面的代碼

<view class='container'>
  <view class="content" wx:for="{{arr}}" wx:key="{{item.id}}">
    <i-card title="{{item.nickName}}" thumb="{{item.avatarUrl ? item.avatarUrl:'../../images/default.jpg'}}">
      <view slot="extra">
        <block wx:if="{{item.type=='尋物啓事'}}">
          <view><i-icon type="clock" size="22" />丟失時間：{{item.time}}</view>
          <view><i-icon type="coordinates" size="22" />丟失地點：{{item.place}}</view>
          <view><i-icon type="commodity" size="22" />丟失類型：{{item.types}}</view>
        </block>
        <block wx:elif="{{item.type=='失物招領'}}">
          <view><i-icon type="clock" size="22" />發現時間：{{item.time}}</view>
          <view><i-icon type="coordinates" size="22" />發現地點：{{item.place}}</view>
          <view><i-icon type="commodity" size="22" />發現類型：{{item.types}}</view>
        </block>
      </view>
      <view slot="content">
        <view class="tp">#{{item.type}}</view>
      <view>{{item.content}}</view>
      <view class="content image" wx:if="{{item.pic1}}">
      <view wx:if="{{item.pic1}}"><image src="{{item.pic1}}"></image></view>
      <view wx:if="{{item.pic2}}"><image src="{{item.pic2}}"></image></view>
      <view wx:if="{{item.pic3}}"><image src="{{item.pic3}}"></image></view>
      </view>
      </view>
      
      <view slot="footer">發佈時間：{{item.postTime}}</view>
      <view slot="footer">找回狀態：{{item.state}}
      <view class="btn" >
          <button type="primary" size="mini" class="btn1" wx:if="{{item.state=='未找回'}}" bindtap='changeState' id="{{item.id}}">確認找回</button>
          <button type='warn' size="mini" class="btn2" bindtap='deletePost' id="{{item.id}}">刪除信息</button>
      </view>
      </view>
    </i-card>
  </view>
</view>

.container{
  width: 100%;
}
.content{
  margin-top: 10px;
  margin-bottom: 20px;
  width: 100%;
  overflow: hidden;
}
.tp{
  color: #2b85e4;
  margin-bottom: 10px;
}
image{
  width: 33.33%;
  height: 200rpx;
  float: left;
}
.content.image{
width: 100%;
height: 200rpx;
}
.btn1{
  float: left;
  margin-top: 10px;
  margin-bottom: 15px;
}
.btn2{
  float:right;
  margin-top: 10px;
  margin-bottom: 15px;
}
.btn{
  width: 100%;
}

{
  "usingComponents":{
    "i-card":"../../iView/card/index",
    "i-icon":"../../iView/icon/index"
  },
  "enablePullDownRefresh":true
}

const utils=require("../../utils/util.js")
const app=getApp()
Page({
  data: {
    arr:null
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    this.loadData()
  },
  loadData:function(){
    var openId = app.globalData.userInfo.openId
    utils.showMypost(openId).then((data) => {
      this.setData({
        arr: data
      })
    })
  },
  onPullDownRefresh: function () {
    var openId = app.globalData.userInfo.openId
    wx.showNavigationBarLoading()
    utils.showMypost(openId).then((data)=>{
      this.setData({
        arr:data
      })
      setTimeout(function () {
        // complete
        wx.hideNavigationBarLoading() //完成中止加載
        wx.stopPullDownRefresh() //中止下拉刷新
      }, 1500)
    })
  },
  changeState:function(e){
    var id=e.target.id
    utils.changePoststate(id).then((res)=>{
      if(res){
        var data = this.data.arr
        app.globalData.changed=true
        for(let i=0;i<data.length;i++){
          if(data[i].id==id){
            data[i].state="已找回"
            break
          }
        }
        this.setData({
          arr:data
        })
      }
      
    })
  },
  deletePost:function(e){
    const id = e.target.id
    utils.deletePost(id).then((res)=>{
      var data=this.data.arr
      app.globalData.changed = true
      for(let i=0;i<data.length;i++){
        if(data[i].id==id){
          data.splice(i,1)
          break
        }
      }
      this.setData({
        arr:data
      })
    })
  },
  onShow:function(){
    
    if (!app.globalData.isBind) {
      wx.showModal({
        title: '綁定帳號提示',
        content: '檢測到您沒有綁定上海大學一卡通帳號，不綁定會影響程序相應的功能，建議您前往綁定，綁定後再也不彈出此信息',
        confirmText: "綁定",
        success: function (res) {
          if (res) {
            wx.navigateTo({
              url: '../login/index',
            })
          }
        }
      })
    }
    if(app.globalData.mychanged){
      this.loadData()
      app.globalData.mychanged=false
    }
  }

})

邏輯跟vue差很少

2.後端開發

後端貌似直接下載的微信官方的nodejs例子，在此基礎上進行了修改。

先在routes裏面配置好

/**
 * ajax 服務路由集合
 */
const router = require('koa-router')({
    prefix: '/weapp'
})
const controllers = require('../controllers')

// 從 sdk 中取出中間件
// 這裏展現如何使用 Koa 中間件完成登陸態的頒發與驗證
const { auth: { authorizationMiddleware, validationMiddleware } } = require('../qcloud')

// --- 登陸與受權 Demo --- //
// 登陸接口
router.get('/login', authorizationMiddleware, controllers.login)
// 用戶信息接口（能夠用來驗證登陸態）
router.get('/user', validationMiddleware, controllers.user)

// --- 圖片上傳 Demo --- //
// 圖片上傳接口，小程序端能夠直接將 url 填入 wx.uploadFile 中
router.post('/upload', controllers.upload)

// --- 信道服務接口 Demo --- //
// GET  用來響應請求信道地址的
//router.get('/tunnel', controllers.tunnel.get)
// POST 用來處理信道傳遞過來的消息
//router.post('/tunnel', controllers.tunnel.post)

// --- 客服消息接口 Demo --- //
// GET  用來響應小程序後臺配置時發送的驗證請求
//router.get('/message', controllers.message.get)
router.get('/showAllpost',controllers.show.showAllpost)
// POST 用來處理微信轉發過來的客服消息
//router.post('/message', controllers.message.post)
router.post('/showMypost',controllers.show.showMypost)
router.post('/changePoststate',controllers.show.changePoststate)
router.post('/deletePost',controllers.show.deletePost)
router.post('/addPost',controllers.show.addPost)
router.post('/userDetail',controllers.shuUser.userDetail)
router.post('/bind',controllers.shuUser.bind)
router.post('/checkBind',controllers.shuUser.checkBind)
router.get('/test',controllers.show.test)
module.exports = router

 

controller其中之一

const {mysql}=require('../qcloud')

async function showAllpost(ctx,next){
    try{
        const posts=await mysql('posts').select('*').orderBy('id','desc')
            ctx.state.data=posts
    }catch(e){
        ctx.state.code=-1
    }
}
async function showMypost(ctx,next){
    try{
        const openId=ctx.request.body.openId
        if(openId){
            const myposts=await mysql('posts').whereRaw('openId=?',[openId]).orderBy('id','desc')
            ctx.state.data=myposts
        }else{
            ctx.state.code=-1
        }
    }catch(e){
        ctx.state.code=-1
    }
    
}
async function changePoststate(ctx,next){
    try{
        const id=ctx.request.body.id
        if(id){
            const result=await mysql("posts").whereRaw("id=?",[id]).update({
                state:"已找回"
            })
            ctx.state.data=result
        }else{
            ctx.state.code=-1
        }
    }catch(e){
        ctx.state.code=-1
    }
}
async function deletePost(ctx,next){
    try{
        const id=ctx.request.body.id
        var result = await mysql("posts").whereRaw("id=?",[id]).del()
        if(result==''){
            ctx.state.data=false
        }else{
            ctx.state.data=true
        }
    }catch(e){
        ctx.state.code=-1
    }
}
async function addPost(ctx,next){
    const {openId,nickName,type,time,place,types,state,postTime,content,pic1,pic2,pic3,avatarUrl}=ctx.request.body
    try{
        var result=await mysql("posts").insert({openId,nickName,type,time,place,types,state,postTime,content,pic1,pic2,pic3,avatarUrl})
        ctx.state.data=result
    }catch(e){
        ctx.state.code=-1
    }
}
async function test(ctx,next){
    
    const result=await mysql("users").select().limit(1).whereRaw("openId=?",['oz6aG5HHsfn3M8rhdn3eJtTs6xPY'])
    ctx.state.data=result
}
module.exports={
    showAllpost,showMypost,changePoststate,deletePost,addPost,test
}

大體是這樣吧。