[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
}
大致是这样吧。
[web开发] 利用微信小程序开发上海大学失物招领平台的更多相关文章
- 微信开发(2)---微信小程序开发实战part1
微信开发现在来说,简单可以概括为两部分,微信公众号和微信小程序. 微信公众号的技术已经非常成熟.分为服务号和订阅号.简单的.可以弄一个个人订阅号,在编辑模式下就可以实现推送图文.自动回复.自定义菜单的 ...
- 【小程序开发】微信小程序开发中遇到的那些坑...
第一坑: 设置了三个tabBar,却默认显示第二个,不能展示我的第一个[首页]. "list": [{ "pagePath":"page/KTGJ/i ...
- 这是一篇满载真诚的微信小程序开发干货
1月9日零点刚过,张小龙与团队正式发布微信小程序.它究竟能在微信8.5亿用户中牵动多少人,现在还很难说.但对于创业者来讲,小程序无疑带来了新契机,以及服务“上帝”们的新方式. 从今天起,只要开发者登录 ...
- 微信小程序开发入门首选
推荐一本书吧,直接上图,微信开发,微信网页开发,微信小程序开发,都用得着. 推荐一本书吧,直接上图,微信开发,微信网页开发,微信小程序开发,都用得着. 推荐一本书吧,直接上图,微信开发,微信网页开发, ...
- Web前端_微信小程序实战开发
微信小程序开发实战教程 一.微信小程序 它是一种混合开发的方式. 是安装在微信中的程序(一个程序最多2M空间). 1.1 注册 1 2 点击立即注册:进入下方页面 3 4 点击小程序进入表单填写页 ...
- 微信小程序开发1
关于微信小程序的开发.对于我们这些没学过oc或者android的人来说,无疑是一个令人鸡冻的好消息.这段时间研究了微信小程序开发.关于小程序的注册,认证和基础环境的搭建,官方文档已经非常详细了.这里就 ...
- WordPress版微信小程序开发系列(一):WordPress REST API
自动我发布开源程序WordPress版微信小程序以来,很多WordPress站长在搭建微信小程序的过程中会碰到各种问题来咨询我,有些问题其实很简单,只要仔细看看我写的文章,就可以自己解决.不过这些文章 ...
- 《腾讯游戏人生》微信小程序开发总结
为打通游戏人生擂台赛与线下商家的O2O衔接,同时响应时下日臻火热的微信小程序,项目团队决定也开发一款针对性的微信小程序,以此方便商家在我们平台入驻并进行擂台赛事的创建和奖励的核销,进一步推广擂台赛的玩 ...
- 我们的微信小程序开发
基于微信小程序的系统开发准备工作 腾讯推出微信小程序也有一段时间了,在各种行业里面也都掀起一阵阵的热潮,很多APP应用被简化为小程序的功能迅速推出,同时也根据小程序的特性推出各种独具匠心的应用,相对传 ...
随机推荐
- PHP注释-----PHPDOC
用过IDE或看过其他源码的小伙伴们应该都见过类似下面这样的注释 /** * 递归获取所有游戏分类 * @param int $id * @return array */ 看得多了就大概知道了一些规 ...
- debian 7上源码编译MongoDB 3.4版本
此文已由作者温正湖授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 要想精通一个数据库,除了知道该数据库的功能特性.使用方法等,还需要能够看懂数据库源码,能够使用gdb工具对其 ...
- react-router-dom
创建: 2019/05/18 安装 npm install react-router-dom --save
- js混杂笔记
1.判断对象为空的方法 1)Object.keys({}).length === 0 // true 2)Object.getOwnPropertyNames({}).length === 0 // ...
- 多媒体文件嵌入HTML中自动转码工具
神器网址:https://iframely.com/embed 首先上传视频文件到服务器,视频管理网址平台 比如: https://wistia.com/ 然后进入到 iframely 网址.复制 ...
- Python书写规范
一.python脚本的规范: 每个脚本都有自己的规范,以下的规范不是强制的,但是规范一下,可以使你的脚本规范.易懂.方便使用. #!/usr/bin/env python # -*- coding: ...
- 译—— a tale of viewport2
这一页我们将讨论移动浏览器.如果您对移动设备完全陌生,我建议您首先阅读第一部分关于桌面浏览器的内容,以便在熟悉的环境中做好准备. 移动浏览器的问题 移动浏览器和桌面浏览器比较,最明显的差异是屏幕大小. ...
- WEB安全字体(Web Safe Fonts)-网页设计用什么字体兼容性好?
效果:http://sandbox.runjs.cn/show/qgdljvh4 1 Arial微软公司的网页核心字体之一,最常用的sans serif字体,当字号很小时不容易阅读.但是,大写的“I” ...
- BZOJ 2288: 【POJ Challenge】生日礼物 堆&&链表
就是堆+链表,十分像 数据备份 对吧? 把相邻的正数和相邻的负数合并成一整个正数块和负数块,最后只剩一些交替相间的正块与负块了吧? 显然,正块的个数<=m时,全部选走就获得了最大权值,否则我们可 ...
- Codeforces 163E(ac自动机、树状数组)
要点 显然ac自动机的板子就可以暴力一下答案了 为了优化时间复杂度,考虑套路fail树的dfs序.发现本题需要当前这个尾点加上所有祖先点的个数,考虑使用树状数组差分一下,在父点+1,在子树后-1,每次 ...