大家好~我是c站的一个小博主，我会定期更新博文，本篇是围绕微信小程序基于腾讯云开发展开的一个项目，如果看着还不错，或者对您有帮助的话，可以进我的专栏看看我的小程序的其他作品https://blog.csdn.net/lbcyllqj/category_12024537.html 比如：基于微信云开发的学生录入信息功能的1.0到4.0版本，我觉得那是一个很实用的程序哦~喜欢的话就订阅叭~ 基于微信小程序云开（统计学生信息并导出excel）_lqj_本人的博客-CSDN博客 基于微信小程序云开（统计学生信息并导出excel）2.0版_lqj_本人的博客-CSDN博客 基于微信小程序云开（统计学生信息并导出excel）3.0版_lqj_本人的博客-CSDN博客 基于微信小程序云开（统计学生信息并导出excel）4.0版（稳定版）_lqj_本人的博客-CSDN博客
目录
前言
一、微信小程序是什么？
二、什么是微信小程序的云开发
构思：
我们先来展示一下效果
首先创建云数据库：
代码实现：
shoye.wxml:
shouye.wxss:
shouye.js:
me.wxml:
me.wxss:
me.js:
detail.wxml:
detail.wxss:
detail.js:
add.wxml:
add.wxss:
add.js:
app.wxss:
前言
随着移动端的不断发展，人们大部分的办公及生活应用都开始趋向于移动端。然而在2017年“微信之父”张小龙带领团队，开发了一款叫做微信小程序的东西，它的出现打破了人们认识移动端的隔膜，由以前的需要先下载app然后在开始工作的老式模式，逐渐的趋向于小程序app（无需下载）的形式。
一、微信小程序是什么？
微信小程序是一种不需要下载安装即可使用的应用，它实现了应用的随开随用，用户只需要用微信扫一扫或者通过微信搜一下即可打开应用，使用完即可关闭，还可以把小程序添加到桌面，真正的做到了便捷方便，用完就走。
二、什么是微信小程序的云开发
云开发为开发者提供完整的云端支持，弱化了后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。
从开发流程来看，以往开发一个微信小程序需要经过产品功能构思、模块划分、原型设计、UI 设计、前端开发、后端开发、接口联调、测试上线等开发阶段。有了「小程序·云开发」后，前端工程师将可以独立实现前端开发、后端开发、接口联调工作，且无需太多后端知识。
构思：
1.首先做这一款小程序app需要四个页面，包括：两个展示页面，两个隐藏页面。
2.我们需要一个首页来展示我们所有用户的愿望，我们需要在shouye这个页面中来显示！
3.我们需要一个我的页面来设置一些用户的属性以及常规设置，以及可以单独拿出一个me页面来实现用户登录，以及实现跳转到add（填写愿望的页面）
4.我们需要一个隐藏的被跳转页面给用户提供一个添加愿望的页面
5.我们需要一个愿望阅读详情页，detail为所用的用户阅读提供阅读！
我们先来展示一下效果
首先创建云数据库：
代码实现：
shoye.wxml:
代码语言：javascript复制<!-- 搜索框开始 -->
<van-search value="{{ value }}" placeholder="请输入许愿者昵称" background="-webkit-linear-gradient(top left,rgb(60, 244, 120),#e294fa,rgb(241, 224, 123))" bind:change="search" bind:focus="search_case_show" bind:blur="search_case_close"/>
<view class="lay_col_cen" wx:if="{{search_case}}">
<view class="lay_col_sta pad_20 case search_case">
<scroll-view style="width:100%;height:100%;" scroll-y="true">
<view class="lay_col_sta pad_20">
<navigator wx:for="{{search_list}}" wx:key="index"url="../detail/detail?detail_id={{item._id}}"hover-class="navigator-hover">
<view class="lay_row_spa" style="padding: 15rpx 0 15rx 0; width: 640rpx; height: 113rpx; display: flex; box-sizing: border-box;">
<image src="{{item.img}}" class="g_img"></image>
<view class="itemname">
<text>{{item.name}}</text>
<text style="font-size: 20rpx;">{{item.cTime}}</text>
</view>
</view>
<van-divider style="width:100%" custom-style="margin-top:10rpx;margin-bottom:10rpx;"></van-divider>
</navigator>
</view>
</scroll-view>
</view>
</view>
<!-- 搜索框结束 -->
<view class="head">
<view class="head1">
<scroll-view class="scroll-view_class" scroll-x="true"enable-flex="true">
<view class="scroll-view_class">
<view>
<view class="{{flag == 0?'choose':'nochoose'}}"id="0" bindtap="select">易安书院</view>
</view>
<view>
<view class="{{flag == 1?'choose':'nochoose'}}"id="1" bindtap="select">南山书院</view>
</view>
<view>
<view class="{{flag == 2?'choose':'nochoose'}}"id="2" bindtap="select">东岭书院</view>
</view>
<view>
<view class="{{flag == 3?'choose':'nochoose'}}"id="3" bindtap="select">三味书院</view>
</view>
<view>
<view class="{{flag == 4?'choose':'nochoose'}}"id="4" bindtap="select">桐林书院</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view class="body">
<template name="itmes">
<navigator url="../detail/detail?detail_id={{_id}}" hover-class="navigator-hover">
<view class="imgs"><image src="{{img}}" class="in-img" background-size="cover" model="scaleToFill"></image></view>
<view class="infos">
<view class="title">{{title}}</view>
<view class="date">{{cTime}}------{{name}}</view>
</view>
</navigator>
</template>
<view wx:for="{{shuzu}}" class="list" wx:key="index">
<template is="itmes" data="{{...item}}"></template>
</view>
</view>shouye.wxss:
代码语言：javascript复制page{
background: -webkit-linear-gradient(top left,rgb(4, 244, 144),#e294fa,rgb(241, 224, 123));
}
.head{
box-shadow: 5rpx 5rpx 10rpx rgb(82, 80, 80);
background: -webkit-linear-gradient(top right,rgb(4, 156, 244),#e294fa,rgb(241, 224, 123));
height: 56px;
color: #ffffff;
display: flex;
flex-direction: row;
align-items: center;
}
.head1{
width: 100%;
height: 36px;
}
.scroll-view_class{
height: 40px;
display: flex;
flex-direction: row;
margin-left: 5px;
}
.choose{
width: 40px;
height: 40px;
line-height: 40px;
padding-left: 5px;
padding-right: 5px;
font-size: 14px;
font-weight: bold;
}
.nochoose{
width: 70px;
height: 40px;
line-height: 40px;
padding-left: 5px;
padding-right: 5px;
font-size:30rpx;
}
.body{
height: 100%;
display: flex;
flex-direction: column;
padding: 20rpx;
}
navigator{overflow: hidden;}
.list{margin-bottom: 20rpx;height: 200rpx;position: relative;}
.imgs{float: left;}
.imgs image{display: block;width: 200rpx;height: 200rpx;}
.infos{float: left;width: 480rpx;height: 200rpx;padding: 20rpx 0 0 20rpx;}
.title{font-size: 16px;overflow: hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;}
.date{font-size: 14px;color: rgb(0, 0, 0);position: absolute;bottom: 0;}
.loadMore{text-align: center;margin: 30px;color: #aaa;font-size: 16px;}
page{
background-color: #fdfeff;
}
.search_case{
width: 96%;
height: 600rpx;
background-color: #ffffff;
position: fixed;
top: 90rpx;
z-index: 999;
}
.g_img{
width: 90rpx;
height: 90rpx;
border-radius: 10rpx;
}shouye.js:
代码语言：javascript复制const db = wx.cloud.database()
Page({
data:{
shuzu:[],
detail_id:"n001",
search_list:[],
search_case:false
},
search_case_close(){
this.setData({
search_case:false,
})
},
search_case_show(){
this.setData({
search_case:true,
})
},
search(e){
let that = this
console.log(e)
if(e.detail){
wx.showLoading({
title:'搜索中',
})
db.collection('xuyuanqiang').where({
name: db.RegExp({
regexp: e.detail,
options: 'i',
})
}).get().then(res=>{
wx.hideLoading()
console.log("搜索",res)
that.setData({
search_list:res.data,
})
})
} else{
that.setData({
search_list:[],
})
}
},
onLoad:function(options){
var that = this
const db = wx.cloud.database()
db.collection('xuyuanqiang').where({
newsid:"0"
}).get({
success:function(res){
console.log(res.data)
that.setData({
shuzu:res.data
})
}
})
},
select:function(e){
console.log(e)
var that = this
var id = e.target.id
const db = wx.cloud.database()
db.collection('xuyuanqiang').where({
newsid:id
}).get({
success:function(res){
console.log(res.data)
that.setData({
shuzu:res.data
})
}
})
},
})me.wxml:
代码语言：javascript复制<view class="all">
<view class="top">
<view class="top1">
<view class="avatarUrl">
<image src="{{path}}" style="width: 50px;height: 50px;"></image>
</view>
<view class="nickName">{{name}}</view>
</view>
<view class="top2">
<text style="width: 598rpx; height: 122rpx; display: block; box-sizing: border-box;font-weight: bold;padding-left: 20rpx;">愿，化为小小的种子，落在你的心田之上，生根，开花，沁出醉人的花香，萦绕着你的美丽人生。-----客服小杰</text>
<view class="qqq">
<button open-type="contact" style="width: 176rpx; height: 120rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx">
<image style="width: 100rpx;height: 100rpx;" src="/images/kefu.png"></image>
</button>
<text style="color: aliceblue;">联系客服</text>
</view>
</view>
</view>
<view class="part"></view>
<view class="mecontent">
<view class="two" bindtap='mefuntion'style="border-radius: 20rpx;width:40%;height:200rpx"><text style="padding-top:50rpx;">我要许愿</text></view>
</view>
</view>
<button bindtap="denglu"type="primary"style="width:100%;margin-top:200rpx;background: -webkit-linear-gradient(top right,rgb(4, 208, 244),rgb(241, 224, 123));box-shadow: 5rpx 5rpx 10rpx rgb(82, 80, 80);">授权登录</button>me.wxss:
代码语言：javascript复制page{
background: -webkit-linear-gradient(top,rgb(4, 156, 244),#e294fa,rgb(241, 224, 123));
}
.top{
margin: 30rpx 2% 0 2%;
width: 96%;
height: 150px;
background: -webkit-linear-gradient(top,rgb(4, 156, 244),#e294fa,rgb(241, 224, 123));
border-radius: 50rpx;
}
.top1{
display: flex;
flex-direction: row;
}
.top1 image{
border-radius: 50%;margin-left: 10px;
}
.nickName{
color: #ffffff;
font-size: 15px;
position: absolute;
left: 100px;
margin-top:20px ;
}
.top2{
margin-top:10px ;
display: flex;
flex-direction: row;
}
.topitem{
width: 33%;
text-align: center;
font-size: 13px;
color: #ffffff;
line-height: 20px;
border-right: 1px solid #cccccc;
}
.part{
width: 100%;
height: 15px;
/* background-color: #f4f5f6; */
}
.mecontent{
font-weight: bold;
font-size: 50rpx;
color: #ffffff;
margin-top:100rpx ;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.part1{
/* border:1px solid #cccccc; */
opacity: 0.2;
}
.mefuntion{
font-size: 1rem;
}
.two{
box-shadow: 5rpx 5rpx 20rpx rgb(82, 80, 80);
background: -webkit-linear-gradient(top left,rgb(4, 156, 244),#e294fa,rgb(241, 224, 123));
display: flex;
flex-direction: row;
justify-content: space-around;
}
.qqq{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}me.js:
代码语言：javascript复制var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
name:"昵称",
path:"/images/touxiang(moren).png",
},
/**
* 生命周期函数--监听页面加载
*/
onLoad:function() {
},
denglu(e) {
var that = this
wx.getUserProfile({
desc:'正在获取',//不写不弹提示框
success:function(res){
console.log('获取成功: ',res)
that.setData({
name:res.userInfo.nickName,
path:res.userInfo.avatarUrl
})
},
fail:function(err){
console.log("获取失败: ",err)
}
})
},
mefuntion:function(e){
var that = this
if(that.data.name=="昵称"){
wx.showToast({
title: '您还有未登录',
icon:"none"
})
}else{
wx.navigateTo({
url: '../add/add',
})
}
},
setup:function(){
wx.navigateTo({
url: '../setting/setting',
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})detail.wxml:
代码语言：javascript复制<view class="warp">
<view>
<view class="title" style="margin-bottom: 20rpx;">{{detail_content.title}}</view>
<view class="cTime" style="margin-bottom: 20rpx;">{{detail_content.cTime}}</view>
<image mode="aspectFit" src="{{detail_content.img}}" style="width: 710rpx; height: 480rpx; display: inline-block; box-sizing: border-box; margin-bottom: 20rpx"></image>
<view class="content" style="margin-bottom: 20rpx;" >{{detail_content.content}}</view>
<view class="content" style="margin-bottom: 20rpx;">{{detail_content.name}}</view>
<view class="close" bindtap="closepage">返回</view>
</view>
</view>detail.wxss:
代码语言：javascript复制page{
background: -webkit-linear-gradient(top left,rgb(4, 244, 144),#e294fa,rgb(241, 224, 123));
}
.warp{
height: 100%;
display: flex;
flex-direction: column;
padding: 20rpx;
font-size: 16px;
}
.title{
text-align: center;
padding: 20rpx;
font-size: 20px;
}
.cTime{
color: rgb(0, 0, 0);
}
.img{
text-align: center;
padding: 20rpx;
}
.img image{
width: 120px;
height: 120px;
}
.content{
text-indent: 2em;
}
.close{
width: 100%;
background: -webkit-linear-gradient(top left,rgb(4, 244, 144),#e294fa,rgb(241, 224, 123));
text-align: center;
margin: 45px 0 0 0;
font-size: 20px;
color: rgb(0, 0, 0);
}
page{
background-color: #fdfeff;
}detail.js:
代码语言：javascript复制var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
id1:1,
detail_content:{}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log(options)
var that = this
var detail_id = options.detail_id;
const db = wx.cloud.database()
db.collection('xuyuanqiang').doc(detail_id).get({
success:function(res){
console.log(res.data)
that.setData({
detail_content:res.data
})
}
})
},
closepage:function(){
wx.redirectTo({
url: '../shouye/shouye'})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})add.wxml:
代码语言：javascript复制<view class="">
<!-- <template is="head" data="{{title:'editor'}}"></template> -->
<view class="page-body">
<view class='wrapper'>
<view class="contentinfo"style="color:red;font-size:40rpx;font-weight:bold">
请输入许愿标题
</view>
<view class='in'><input bindinput='title1'placeholder="{{title}}"focus="{{focus}}"/></view>
<view class="contentinfo" style="color:red;font-size:40rpx;font-weight:bold">
请输入许愿内容
</view>
<view class='in'><textarea bindinput="content1"placeholder="{{content}}" maxlength="300"></textarea></view>
<view class="contentinfo" style="color:red;font-size:40rpx;font-weight:bold">
请选择所属书院
</view>
<view class='in'>
<radio-group class="radio-group"bindchange="radioChange">
<label class="radio" wx:for="{{items}}" wx:key="index">
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group></view>
<view class="pic">
<view class="contentinfo" style="color:red;font-size:40rpx;font-weight:bold">
请上传图片(选填)
</view>
<view bindtap='picfunction'><image class="plus" style="width: 80rpx;height: 80rpx;" src='/images/tianjia.png'></image></view>
</view>
<image mode="aspectFit" src="{{img}}" style="width: 200rpx; height: 200rpx; display: inline-block; box-sizing: border-box"></image>
<view>
<text style="color:red;font-size:40rpx;font-weight:bold">许愿者：</text>
</view>
<view class="zuozhe">
<image src="{{path}}" style="width: 30px;height: 30px;"></image>
<text style="padding:6rpx 0 0 22rpx ;color: white;">昵称：{{name}}</text>
</view>
<button bindtap="denglu" type="primary" style="font-size: 30rpx;width: 33%;margin-top: 20rpx;background: -webkit-linear-gradient(top left,rgb(4, 208, 244),rgb(241, 224, 123))" >授权登录</button>
</view>
<button style="background: -webkit-linear-gradient(top left,rgb(4, 208, 244),rgb(241, 224, 123));box-shadow: 5rpx 5rpx 10rpx rgb(95, 93, 93);margin-top: 30rpx;" type="primary"bindtap='submit'>上传</button>
</view>
</view>add.wxss:
代码语言：javascript复制/* pages/add/add.wxss */
page{
background: -webkit-linear-gradient(top,rgb(4, 156, 244),#e294fa,rgb(241, 224, 123));
}
.wrapper{
padding: 5px;
}
.contentinfo{
font-size: 1rem;
}
.iconfont{
display: inline-block;
padding: 8px 8px;
width: 24px;
height: 24px;
cursor: pointer;
font-size: 20px;
}
.toolbar{
box-sizing: border-box;
border-bottom: 0;
font-family: 'Helvetica Neue','Helvetica','Arial',sans-serif;
}
.ql-container{
box-sizing: border-box;padding: 12px 15px;
width: 100%;min-height: 30vh;height: auto;
background: #fff;margin-top:20px ;
font-size: 16px;line-height: 1.5;
}
.ql-active{
color: #06c;
}
.in{
box-shadow: 5rpx 5rpx 10rpx rgb(82, 80, 80);
border-radius: 30rpx;
background: -webkit-linear-gradient(top,rgb(4, 208, 244),rgb(241, 224, 123))
}
input{
/* border:1px solid #00F; */
font-size: 1rem;width: 100%;
}
.pic{
display: flex;flex-direction: row;
}
.zuozhe{
display: flex;
flex-direction:row;
}
.tupian{
display: flex;
flex-direction: row;
justify-content: space-around;
}add.js:
代码语言：javascript复制 Page({
/**
* 页面的初始数据
*/
data: {
name:"",
path:"/images/touxiang(moren).png",
title:"请输入许愿标题...",
content:"请输入许愿内容...",
newsid:"",
img:"",
cTime:"",
items:[
{name:'0',value:'易安书院'},
{name:'1',value:'南山书院'},
{name:'2',value:'东岭书院'},
{name:'3',value:'三味书院'},
{name:'4',value:'桐林书院'},
]
},
denglu(e) {
var that = this
wx.getUserProfile({
desc:'正在获取',//不写不弹提示框
success:function(res){
console.log('获取成功: ',res)
that.setData({
name:res.userInfo.nickName,
path:res.userInfo.avatarUrl
})
},
fail:function(err){
console.log("获取失败: ",err)
}
})
},
title1:function(e){
console.log(e.detail.value)
this.setData({
title:e.detail.value
})
},
content1:function(e){
console.log(e.detail.value)
this.setData({
content:e.detail.value
})
},
radioChange:function(e){
console.log(e.detail.value)
this.setData({
newsid:e.detail.value
})
},
picfunction:function(){
var that = this
wx.chooseImage({
count: 1,
sizeType:['compressed'],
sourceType:['album','camera'],
success:function(res){
console.log(res)
wx.showLoading({
title: '上传中',
})
const filePath = res.tempFilePaths[0]
var timestamp = (new Date()).valueOf();
wx.cloud.uploadFile({
cloudPath:"img/" timestamp ".jpg",
filePath:filePath,
success:res=>{
console.log('[上传文件]成功:',res)
that.setData({
img:res.fileID
})
},
fail:e=>{
console.error('[上传文件]失败',e)
wx.showLoading({
icon:'none',
title: '上传失败',
})
},
complete:()=>{
wx.hideLoading()
}
})
},
fail:e=>{
console.error(e)
}
})
},
submit:function(e){
var that = this
var myDate = new Date();
if(that.data.thattitle == "请输入标题..." || that.data.content == "请输入内容..." || that.data.newsid == ''){
wx.showToast({
title: '您还有信息未填',
icon:"none"
})
}else{
that.setData({
cTime:myDate.toLocaleDateString()//获取当前日期
})
const db = wx.cloud.database()
wx.showLoading({
title: '上传中',
})
db.collection('xuyuanqiang').add({
data:{
title:that.data.title,
content:that.data.content,
newsid:that.data.newsid,
img:that.data.img,
cTime:that.data.cTime,
name:"许愿者：" that.data.name
},
success:function(res){
console.log("插入成功" res)
wx.hideLoading()
},
fail:console.error
})
wx.navigateTo({
url: '../shouye/shouye',
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})app.wxss:
代码语言：javascript复制/**app.wxss**/
.container {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
button {
background: initial;
}
button:focus{
outline: 0;
}
button::after{
border: none;
}
page {
background: #f6f6f6;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.lay_row_cen{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.lay_col_cen{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.lay_col_spa{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.lay_col_sta{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.lay_row_sta{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.lay_row_spa{
width: 100%;
display: flex;
flex-direction: center;
justify-content: space-between;
}
.lay_row_end{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
.pad_20{
padding: 20rpx;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
.case{
background: -webkit-linear-gradient(top right,rgb(0, 162, 255),#e294fa,rgb(241, 224, 123));
margin-top: 15rpx;
box-shadow: 5rpx 5rpx 10rpx;
border-radius: 20rpx;
}
.itemname{
display: flex;
flex-direction: column;
justify-content: space-around;
}
