一、微信小程序是什么?
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用的随开随用,用户只需要用微信扫一扫或者通过微信搜一下即可打开应用,使用完即可关闭,还可以把小程序添加到桌面,真正的做到了便捷方便,用完就走。
二、什么是微信小程序的云开发
云开发为开发者提供完整的云端支持,弱化了后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。
从开发流程来看,以往开发一个微信小程序需要经过产品功能构思、模块划分、原型设计、UI 设计、前端开发、后端开发、接口联调、测试上线等开发阶段。有了「小程序·云开发」后,前端工程师将可以独立实现前端开发、后端开发、接口联调工作,且无需太多后端知识。
效果显示:
如果要实现下面的功能,我们必须在重新创建一个云数据库,这里我创建的名为:openid
效果展示:
我还要给大家分享一个网址:Vant Weapp - 轻量、可靠的小程序 UI 组件库
这个是基于GitHub官方的众多大佬打造的一个类似于第三方框架的东西,网站头部部分有使用说明!希望可以帮到更多的人!!!
渐变背景色的实现:
page{
background: -webkit-linear-gradient(top,rgb(241, 224, 123),#e294fa,rgb(33, 224, 238));
}
{{name}}
去填表
授权登录
/* */
page{
background: -webkit-linear-gradient(top,rgb(4, 156, 244),#e294fa,rgb(241, 224, 123));
}
.denglu{
margin-top: 20rpx;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.denglu1{
height: 100rpx;
width: 80%;
background-color: rgb(186, 28, 235);
border-radius: 20rpx;
}
.denglu2{
display: flex;
flex-direction: row;
}
/* */
/* 轮播开始 */
.lunbo{
margin: 50rpx 5% 20rpx 5%;
}
.LB_a{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.LB_b{
width: 96%;
height: 300rpx;
display: inline-block;
box-sizing: border-box;
border-radius:20px;
}
/* 轮播结束 */
.tianbiao{
margin: 0 10% 0 10%;
margin-top: 100rpx;
width: 80%;
}
/* 登录button开始 */
.shouquandenglu{
margin-top: 100rpx;
display: flex;
flex-direction: row;
justify-content: space-around;
}
/* 登录button结束 */
// pages/shouye/shouye.js
Page({
/**
* 页面的初始数据
*/
data: {
name:"昵称",
path:"/images/touxiang(moren).png",
isshow:true,
show:true,
// 轮播图开始
imgUrls: [
'cloud://xinwen-0gefvi6q76e983c0.7869-xinwen-0gefvi6q76e983c0-1312066094/xinxiluru_img/hz2.png',
'cloud://xinwen-0gefvi6q76e983c0.7869-xinwen-0gefvi6q76e983c0-1312066094/xinxiluru_img/hz1.png',
'cloud://xinwen-0gefvi6q76e983c0.7869-xinwen-0gefvi6q76e983c0-1312066094/xinxiluru_img/hz3.png',
'cloud://xinwen-0gefvi6q76e983c0.7869-xinwen-0gefvi6q76e983c0-1312066094/xinxiluru_img/hz.png'
],
indicatorDots: true, //是否显示面板指示点
autoplay: true, //是否自动切换
interval: 2000, //自动切换时间间隔
duration: 300, //滑动动画时长
inputShowed: false,
inputVal: "",
// 轮播图结束
},
denglu(){
let that = this
wx.getUserProfile({
desc: '正在获取',
success:function(res){
console.log('获取成功: ',res)
//添加用户信息到openid数据库
wx.cloud.database().collection('openid').add({
data:{
name:res.userInfo.nickName,
path:res.userInfo.avatarUrl
}
})
//显示用户信息到首页
that.setData({
name:res.userInfo.nickName,
path:res.userInfo.avatarUrl,
show:false
})
//
},
fail:function(err){
console.log("获取失败:",err)
}
})
// return that.setData
},
tianbiao(){
let that = this
if (that.data.name=="昵称") {
wx.showToast({
title: '您还未登录!',
icon:"none"
})
}else{
wx.navigateTo({
url: '../tianbiao/tianbiao',
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
{
"usingComponents": {
"van-icon": "@vant/weapp/icon/index",
"van-button": "@vant/weapp/button/index"
}
}
提交记录显示:
{{item.name}}
姓名:{{item.xingming}}
说明:点击“表格获取并浏览”后系统会自动把表格网页地址赋值到您的设备的粘贴板,直接可以在浏览器粘贴浏览,无需再次手动复制。感谢使用本小程序!
page{
background: -webkit-linear-gradient(top,rgb(241, 224, 123),#e294fa,rgb(33, 224, 238));
}
.shuoming{
padding: 50rpx 50rpx 0 50rpx;
color: red;
}
.yonghuxinxi{
display: flex;
flex-direction: row;
}
.xianshi_tianbiao{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.xianshi_tianbiao1{
display: flex;
flex-direction: row;
}
const db = wx.cloud.database()
Page({
/**
* 页面的初始数据
*/
data: {
list:[],
openid:[]
},
shuaxin(){
let that = this
db.collection('users').get({
success(res){
console.log(res.data)
that.setData({
list:res.data
})
}
})
db.collection('openid').get({
success:function(res){
console.log('用户信息获取成功',res.data)
that.setData({
openid:res.data
})
},
fail:function(res){
console.log('用户信息获取失败',res)
}
})
},
//响应云函数按钮
getyunhanshu(){
wx.cloud.callFunction({
name:"stuexcel", // 调用的云函数名
data:{
clssdata:'1111' //根据班级字段,导出班级成员信息 ===对应云函数clssdata
},
complete:res=>{
console.log(res.result)
// return
//获取文件下载地址(24小时内有效)
wx.cloud.getTempFileURL({
fileList:[res.result.fileID],
success:res=>{
console.log('文件下载链接:',res.fileList[0].tempFileURL)
this.setData({ //设置data中定义相应的变量
tempFileURL:res.fileList[0].tempFileURL,
})
//复制刚获取到链接,成功后会自动弹窗提示已复制
wx.setClipboardData({
data:this.data.tempFileURL,
success (res) {
wx.getClipboardData({
success (res) {
console.log('复制成功:',res.data) // data
}
})
}
})
}
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})