基于腾讯云开发微信小程序(新闻发布及共享平台)下

简介: 基于腾讯云开发微信小程序(新闻发布及共享平台)下

前言

微信小程序云开发是腾讯云和微信团队联合开发的,集成于微信小程序控制台的原生Serverless 云服务,解决了Serverless架构对端的“最后一公里”问题,通过集成端SDK,配合云开发后台的API网关,为开发者提供了一站式后端云服务。云开发支持多种客户端,帮助开发者统一构建和管理资源,免去了开发中服务器搭建、极大简化了URL配置、鉴权管理等流程,让微信小程序开发者专注于业务逻辑的实现,而无须理解后端逻辑及服务器运维知识,门槛更低,效率更高。只需要一名开发人员就可以完成所有的工作。


为什么要用微信云开发

其实就是无服务端架构,它提供了云函数的能力,可以在小程序端直接调用写好的云函数,

同时提供了云数据库和对象存储的能力,这样就免去了需要租用服务器,自己架构后台同时开发接口的麻烦,因为是一体化的架构,也免去了登录的烦恼。

程序员不用配置服务器,服务端功能可以在小程序端使用云函数实现。不用先购买服务器、http之类的。如果不超过云服务免费配额,除了开发成本,没有其他开销

简单说云开发使用的是腾讯的服务器存储后端数据,传统的是自备服务器。

云开发优点在于简单,节省成本,但是没有自己开发后端上传自己服务器上自由。


一、app.json

首先我们先进行app.json代码的展示:

{
"pages": [
"pages/list/list",
"pages/add/add",
"pages/detail/detail",
"pages/me/me",
"pages/xuanze/xuanze",
"pages/add1/add1"  ],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#D53C3E",
"navigationBarTitleText": "腾讯云-新闻小程序",
"navigationBarTextStyle": "white"  },
"tabBar": {
"selectedColor": "#D53C3E",
"borderStyle": "black",
"backgroundColor": "#F9F9F9",
"list": [{
"pagePath":"pages/list/list",
"text": "首页",
"iconPath": "/images/shouye.jpg",
"selectedIconPath": "/images/shouye.jpg"      },
      {
"pagePath":"pages/me/me",
"text": "我的",
"iconPath": "/images/wode.png",
"selectedIconPath": "/images/wode.png"      }
    ]
  },
"sitemapLocation": "sitemap.json"}

二、其他页面

1.list页面:

wxml:

<!-- 搜索框开始 --><van-searchvalue="{{ value }}"placeholder="请输入原创或转载者"background="#FF502F"bind:change="search"bind:focus="search_case_show"bind:blur="search_case_close"/><viewclass="lay_col_cen"wx:if="{{search_case}}"><viewclass="lay_col_sta pad_20 case search_case"><scroll-viewstyle="width:100%;height:100%;"scroll-y="true"><viewclass="lay_col_sta pad_20"><navigatorwx:for="{{search_list}}"wx:key="index"url="../detail/detail?detail_id={{item._id}}"hover-class="navigator-hover"><viewclass="lay_row_spa"style="padding: 15rpx 0 15rx 0; width: 640rpx; height: 113rpx; display: flex; box-sizing: border-box"><imagesrc="{{item.img}}"class="g_img"></image><viewclass="itemname"><text>{{item.name}}</text><textstyle="font-size: 20rpx;">{{item.cTime}}</text></view></view><van-dividerstyle="width:100%"custom-style="margin-top:10rpx;margin-bottom:10rpx"></van-divider></navigator></view></scroll-view></view></view><!-- 搜索框结束 --><viewclass="head"><viewclass="head1"><scroll-viewclass="scroll-view_class"scroll-x="true"enable-flex="true"><viewclass="scroll-view_class"><view><viewclass="{{flag == 0?'choose':'nochoose'}}"id="0"bindtap="select">推荐</view></view><view><viewclass="{{flag == 1?'choose':'nochoose'}}"id="1"bindtap="select">科技</view></view><view><viewclass="{{flag == 2?'choose':'nochoose'}}"id="2"bindtap="select">财经</view></view><view><viewclass="{{flag == 3?'choose':'nochoose'}}"id="3"bindtap="select">汽车</view></view><view><viewclass="{{flag == 4?'choose':'nochoose'}}"id="4"bindtap="select">时尚</view></view><view><viewclass="{{flag == 5?'choose':'nochoose'}}"id="5"bindtap="select">图片</view></view><view><viewclass="{{flag == 6?'choose':'nochoose'}}"id="6"bindtap="select">游戏</view></view><view><viewclass="{{flag == 7?'choose':'nochoose'}}"id="7"bindtap="select">房产</view></view><view><viewclass="{{flag == 8?'choose':'nochoose'}}"id="8"bindtap="select">教育</view></view><view><viewclass="{{flag == 9?'choose':'nochoose'}}"id="9"bindtap="select">体育</view></view></view></scroll-view></view></view><viewclass="body"><templatename="itmes"><navigatorurl="../detail/detail?detail_id={{_id}}"hover-class="navigator-hover"><viewclass="imgs"><imagesrc="{{img}}"class="in-img"background-size="cover"model="scaleToFill"></image></view><viewclass="infos"><viewclass="title">{{title}}</view><viewclass="date">{{cTime}}------{{name}}</view></view></navigator></template><viewwx:for="{{shuzu}}"class="list"wx:key="index"><templateis="itmes"data="{{...item}}"></template></view></view>

js:

constdb=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){
letthat=thisconsole.log(e)
if(e.detail){
wx.showLoading({
title:'搜索中',
            })
db.collection('ch12').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){
varthat=thisconstdb=wx.cloud.database()
db.collection('ch12').where({
newsid:"0"        }).get({
success:function(res){
console.log(res.data)
that.setData({
shuzu:res.data                })
            }
        })
    },
select:function(e){
console.log(e)
varthat=thisvarid=e.target.idconstdb=wx.cloud.database()
db.collection('ch12').where({
newsid:id        }).get({
success:function(res){
console.log(res.data)
that.setData({
shuzu:res.data                })
            }
        })
    },
onShareAppMessage:function(){
    }
})

wxss:

.head{
background: #ff9000;
height: 36PX;
color: #000000;
display: flex;
flex-direction: row;
align-items: center;
}
.head1{
width: 85%;
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: 40px;
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;}
.imgsimage{display: block;width: 200rpx;height: 200rpx;}
.infos{float: left;width: 480rpx;height: 200rpx;padding: 20rpx0020rpx;}
.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: #aaa;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;
}

2.me页面:

wxml:

<viewclass="all"><viewclass="top"><viewclass="top1"><viewclass="avatarUrl"><imagesrc="{{path}}"style="width: 70px;height: 70px;"></image></view><viewclass="nickName">{{name}}</view></view><viewclass="top2"><textstyle="width: 598rpx; height: 122rpx; display: block; box-sizing: border-box;font-weight: bold;">生活不易,奔波南北马蹄疾。人生短暂,偶见喜闻需尽欢!-----客服小杰</text><viewclass="qqq"><buttonopen-type="contact"style="width: 176rpx; height: 84rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx"><imagestyle="width: 120rpx;height: 100rpx;"src="/images/kefu.png"></image></button><textstyle="color: aliceblue;">客服</text></view></view></view><viewclass="part"></view><viewclass="mecontent"><viewclass="two"bindtap='mefuntion'style="background:orange;border-radius: 20rpx;width:40%;height:200rpx"><textstyle="padding-top:50rpx;">我要爆料</text></view></view></view><buttonbindtap="denglu"type="primary"style="width:100%;margin-top:200rpx">授权登录</button>

js:

// pages/me/me.jsvarapp=getApp()
Page({
/**     * 页面的初始数据     */data: {
name:"昵称",
path:"/images/touxiang(moren).png",
    },
/**     * 生命周期函数--监听页面加载     */onLoad:function() {
    },
denglu(e) {
varthat=thiswx.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){
varthat=thisif(that.data.name=="昵称"){
wx.showToast({
title: '您还有未登录',
icon:"none"              })
        }else{
wx.navigateTo({
url: '../xuanze/xuanze',
              })
        }
    },
setup:function(){
wx.navigateTo({
url: '../setting/setting',
        })
    },
/**     * 生命周期函数--监听页面初次渲染完成     */onReady() {
    },
/**     * 生命周期函数--监听页面显示     */onShow() {
    },
/**     * 生命周期函数--监听页面隐藏     */onHide() {
    },
/**     * 生命周期函数--监听页面卸载     */onUnload() {
    },
/**     * 页面相关事件处理函数--监听用户下拉动作     */onPullDownRefresh() {
    },
/**     * 页面上拉触底事件的处理函数     */onReachBottom() {
    },
/**     * 用户点击右上角分享     */onShareAppMessage() {
    }
})

wxss:

.top{
width: 100%;
height: 150px;
background-color: #D53E37;
}
.top1{
display: flex;
flex-direction: row;
}
.top1image{
border-radius: 50%;margin-left: 10px;
}
.nickName{
color: #ffffff;
font-size: 15px;
position: absolute;
left: 100px;
margin-top:30px ;
}
.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: 1pxsolid#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:1pxsolid#cccccc;
opacity: 0.2;
}
.mefuntion{
font-size: 1rem;
}
.two{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.qqq{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}

3.detail页面:

wxml:

<viewclass="warp"><view><viewclass="title"style="margin-bottom: 20rpx;">{{detail_content.title}}</view><viewclass="cTime"style="margin-bottom: 20rpx;">{{detail_content.cTime}}</view><imagemode="aspectFit"src="{{detail_content.img}}"style="width: 710rpx; height: 480rpx; display: inline-block; box-sizing: border-box; margin-bottom: 20rpx"></image><viewclass="content"style="margin-bottom: 20rpx;">{{detail_content.content}}</view><viewclass="content"style="margin-bottom: 20rpx;">{{detail_content.name}}</view><viewclass="close"bindtap="closepage">返回</view></view></view>

js:

varapp=getApp()
Page({
/**     * 页面的初始数据     */data: {
id1:1,
detail_content:{}
    },
/**     * 生命周期函数--监听页面加载     */onLoad(options) {
console.log(options)
varthat=thisvardetail_id=options.detail_id;
constdb=wx.cloud.database()
db.collection('ch12').doc(detail_id).get({
success:function(res){
console.log(res.data)
that.setData({
detail_content:res.data                    })
                }
            })
    },
closepage:function(){
wx.redirectTo({
url: '../list/list'})
    },
/**     * 生命周期函数--监听页面初次渲染完成     */onReady() {
    },
/**     * 生命周期函数--监听页面显示     */onShow() {
    },
/**     * 生命周期函数--监听页面隐藏     */onHide() {
    },
/**     * 生命周期函数--监听页面卸载     */onUnload() {
    },
/**     * 页面相关事件处理函数--监听用户下拉动作     */onPullDownRefresh() {
    },
/**     * 页面上拉触底事件的处理函数     */onReachBottom() {
    },
/**     * 用户点击右上角分享     */onShareAppMessage() {
    }
})

wxss:

.warp{
height: 100%;
display: flex;
flex-direction: column;
padding: 20rpx;
font-size: 16px;
}
.title{
text-align: center;
padding: 20rpx;
font-size: 20px;
}
.cTime{
color: #aaa;
}
.img{
text-align: center;
padding: 20rpx;
}
.imgimage{
width: 120px;
height: 120px;
}
.content{
text-indent: 2em;
}
.close{
text-align: center;
margin: 30px;
font-size: 20px;
color: #aaa;
}
page{
background-color: #fdfeff;
}

4.add页面:

wxml:

<viewclass=""><!-- <template is="head" data="{{title:'editor'}}"></template> --><viewclass="page-body"><viewclass='wrapper'><viewclass="contentinfo"style="color:red;font-size:40rpx;font-weight:bold">                请输入文章标题
</view><viewclass='in'><inputbindinput='title1'placeholder="{{title}}"focus="{{focus}}"/></view><viewclass="contentinfo"style="color:red;font-size:40rpx;font-weight:bold">                请输入文章内容
</view><viewclass='in'><textareabindinput="content1"placeholder="{{content}}"maxlength="300"></textarea></view><viewclass="contentinfo"style="color:red;font-size:40rpx;font-weight:bold">                请选择文章类型
</view><viewclass='in'><radio-groupclass="radio-group"bindchange="radioChange"><labelclass="radio"wx:for="{{items}}"wx:key="index"><radiovalue="{{item.name}}"checked="{{item.checked}}"/>{{item.value}}
</label></radio-group></view><viewclass="pic"><viewclass="contentinfo"style="color:red;font-size:40rpx;font-weight:bold">                    请上传图片(选填)
</view><viewbindtap='picfunction'><imageclass="plus"style="width: 80rpx;height: 80rpx;"src='/images/tianjia.png'></image></view></view><imagemode="aspectFit"src="{{img}}"style="width: 730rpx; height: 480rpx; display: inline-block; box-sizing: border-box"></image><view><textstyle="color:red;font-size:40rpx;font-weight:bold">原创者:</text></view><viewclass="zuozhe"><imagesrc="{{path}}"style="width: 30px;height: 30px;"></image><textstyle="padding:20rpx  0 0 22rpx ;">昵称:{{name}}</text></view><viewstyle="height: 40rpx;"></view><buttonbindtap="denglu"type="primary"style="font-size: 30rpx;width: 33%;">授权登录</button></view><viewstyle="height: 100rpx;"></view><buttontype="primary"bindtap='submit'>上传</button><viewstyle="height: 100rpx;"></view></view></view>

js:

// pages/add/add.jsPage({
/**     * 页面的初始数据     */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:'时尚'},
            {name:'5',value:'图片'},
            {name:'6',value:'游戏'},
            {name:'7',value:'房产'},
            {name:'8',value:'教育'},
            {name:'9',value:'体育'},
        ]
    },
denglu(e) {
varthat=thiswx.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(){
varthat=thiswx.chooseImage({
count: 1,
sizeType:['compressed'],
sourceType:['album','camera'],
success:function(res){
console.log(res)
wx.showLoading({
title: '上传中',
              })
constfilePath=res.tempFilePaths[0]
vartimestamp= (newDate()).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){
varthat=thisvarmyDate=newDate();
if(that.data.thattitle=="请输入标题..."||that.data.content=="请输入内容..."||that.data.newsid==''){
wx.showToast({
title: '您还有信息未填',
icon:"none"              })
        }else{
that.setData({
cTime:myDate.toLocaleDateString()//获取当前日期            })
constdb=wx.cloud.database()
wx.showLoading({
title: '上传中',
              })
db.collection('ch12').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            })
        }
    },
/**     * 生命周期函数--监听页面加载     */onLoad(options) {
    },
/**     * 生命周期函数--监听页面初次渲染完成     */onReady() {
    },
/**     * 生命周期函数--监听页面显示     */onShow() {
    },
/**     * 生命周期函数--监听页面隐藏     */onHide() {
    },
/**     * 生命周期函数--监听页面卸载     */onUnload() {
    },
/**     * 页面相关事件处理函数--监听用户下拉动作     */onPullDownRefresh() {
    },
/**     * 页面上拉触底事件的处理函数     */onReachBottom() {
    },
/**     * 用户点击右上角分享     */onShareAppMessage() {
    }
})

wxss:

.wrapper{
padding: 5px;
}
.contentinfo{
font-size: 1rem;
}
.iconfont{
display: inline-block;
padding: 8px8px;
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: 12px15px;
width: 100%;min-height: 30vh;height: auto;
background: #fff;margin-top:20px ;
font-size: 16px;line-height: 1.5;
}
.ql-active{
color: #06c;
}
.in{
background-color: #fff;
}
input{
border:1pxsolid#00F;
font-size: 1rem;width: 100%;
}
.pic{
display: flex;flex-direction: row;
}
.zuozhe{
display: flex;
flex-direction: column;
}
.tupian{
display: flex;
flex-direction: row;
justify-content: space-around;
}

5.add1页面:

wxml:

<viewclass="container"><!-- <template is="head" data="{{title:'editor'}}"></template> --><viewclass="page-body"><viewclass='wrapper'><viewclass="contentinfo"style="color:red;font-size:40rpx;font-weight:bold">                请输入文章标题
</view><viewclass='in'><inputbindinput='title1'placeholder="{{title}}"focus="{{focus}}"/></view><viewclass="contentinfo"style="color:red;font-size:40rpx;font-weight:bold">                请输入文章内容
</view><viewclass='in'><textareabindinput="content1"placeholder="{{content}}"maxlength="300"></textarea></view><viewclass="contentinfo"style="color:red;font-size:40rpx;font-weight:bold">                请选择文章类型
</view><viewclass='in'><radio-groupclass="radio-group"bindchange="radioChange"><labelclass="radio"wx:for="{{items}}"wx:key="index"><radiovalue="{{item.name}}"checked="{{item.checked}}"/>{{item.value}}
</label></radio-group></view><viewclass="pic"><viewclass="contentinfo"style="color:red;font-size:40rpx;font-weight:bold">                    请上传图片(选填)
</view><viewbindtap='picfunction'><imageclass="plus"style="width: 80rpx;height: 80rpx;"src='/images/tianjia.png'></image></view></view><viewclass="tupian"><imagestyle="width: 450rpx;height: 300rpx;"src="{{img}}"></image></view><view><textstyle="color:red;font-size:40rpx;font-weight:bold">转载者:</text></view><viewclass="zuozhe"><imagesrc="{{path}}"style="width: 30px;height: 30px;"></image><textstyle="padding:20rpx  0 0 22rpx ;">昵称:{{name}}</text></view><viewstyle="height: 40rpx;"></view><buttonbindtap="denglu"type="primary"style="font-size: 30rpx;width: 33%;">授权登录</button></view><viewstyle="height: 100rpx;"></view><buttontype="primary"bindtap='submit'>上传</button><viewstyle="height: 100rpx;"></view></view></view>

js:

// pages/add/add.jsPage({
/**     * 页面的初始数据     */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:'时尚'},
            {name:'5',value:'图片'},
            {name:'6',value:'游戏'},
            {name:'7',value:'房产'},
            {name:'8',value:'教育'},
            {name:'9',value:'体育'},
        ]
    },
denglu(e) {
varthat=thiswx.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(){
varthat=thiswx.chooseImage({
count: 1,
sizeType:['compressed'],
sourceType:['album','camera'],
success:function(res){
console.log(res)
wx.showLoading({
title: '上传中',
              })
constfilePath=res.tempFilePaths[0]
vartimestamp= (newDate()).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){
varthat=thisvarmyDate=newDate();
if(that.data.thattitle=="请输入标题..."||that.data.content=="请输入内容..."||that.data.newsid==''){
wx.showToast({
title: '您还有信息未填',
icon:"none"              })
        }else{
that.setData({
cTime:myDate.toLocaleDateString()//获取当前日期            })
constdb=wx.cloud.database()
wx.showLoading({
title: '上传中',
              })
db.collection('ch12').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            })
        }
    },
/**     * 生命周期函数--监听页面加载     */onLoad(options) {
    },
/**     * 生命周期函数--监听页面初次渲染完成     */onReady() {
    },
/**     * 生命周期函数--监听页面显示     */onShow() {
    },
/**     * 生命周期函数--监听页面隐藏     */onHide() {
    },
/**     * 生命周期函数--监听页面卸载     */onUnload() {
    },
/**     * 页面相关事件处理函数--监听用户下拉动作     */onPullDownRefresh() {
    },
/**     * 页面上拉触底事件的处理函数     */onReachBottom() {
    },
/**     * 用户点击右上角分享     */onShareAppMessage() {
    }
})

wxss:

.wrapper{
padding: 5px;
}
.contentinfo{
font-size: 1rem;
}
.iconfont{
display: inline-block;
padding: 8px8px;
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: 12px15px;
width: 100%;min-height: 30vh;height: auto;
background: #fff;margin-top:20px ;
font-size: 16px;line-height: 1.5;
}
.ql-active{
color: #06c;
}
.in{
background-color: #fff;
}
input{
border:1pxsolid#00F;
font-size: 1rem;width: 100%;
}
image{
height: 60rpx;
width: 60rpx;
margin-left: 30rpx;
}
.pic{
display: flex;flex-direction: row;
}
.zuozhe{
display: flex;
flex-direction: column;
}
.tupian{
display: flex;
flex-direction: row;
justify-content: space-around;
}

6.xuanze页面:

wxml:

<navigatorurl="../add/add"class="zong"><viewclass="yuanchuang"><textstyle="font-size: 80rpx;padding-top:40rpx;font-weight: bold;">原创专区</text></view></navigator><navigatorurl="../add1/add1"class="zong"><viewclass="zhuanzai"><textstyle="font-size: 80rpx;padding-top:40rpx;font-weight: bold;">转载专区</text></view></navigator>

js(用不到)因为在wxml里面用<navigator>标签完成了相对应的点击跳转事件!

wxss:

page{
background-color: orange;
}
.zong{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.yuanchuang{
display: flex;
flex-direction: row;
justify-content: space-around;
border-radius: 20rpx;
margin-top: 20rpx;
height: 200rpx;
width: 92%;
background-color: rgb(215, 35, 231);
}
.zhuanzai{
display: flex;
flex-direction: row;
justify-content: space-around;
border-radius: 20rpx;
margin-top: 20rpx;
height: 200rpx;
width: 92%;
background-color: brown;
}

最终效果:

image.png

image.png

目录
相关文章
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
4933 1
|
物联网
如何在腾讯云等平台搭建自己的物联网MQTT服务器Broker
物联网技术及MQTT协议被广泛应用于各种场景。本文介绍物联网MQTT服务助手下载,如何搭建自己的物联网平台,并使用 “MQTT客户端调试工具”模拟MQTT设备,接入平台进行消息收发。
912 37
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
8970 38
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
存储 移动开发 小程序
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
1489 3
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
|
人工智能 自然语言处理 小程序
技术小白如何利用DeepSeek半小时开发微信小程序?
通过通义灵码的“AI程序员”功能,即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型,用户只需用自然语言描述需求,就能自动生成代码并优化程序。例如,一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外,通义灵码还提供智能问答模式,帮助用户解决开发中的各种问题,极大简化了开发流程,让普通人的开发体验更加顺畅。
3981 11
技术小白如何利用DeepSeek半小时开发微信小程序?
|
人工智能 安全 机器人
LangBot:无缝集成到QQ、微信等消息平台的AI聊天机器人平台
LangBot 是一个开源的多模态即时聊天机器人平台,支持多种即时通信平台和大语言模型,具备多模态交互、插件扩展和Web管理面板等功能。
3235 14
LangBot:无缝集成到QQ、微信等消息平台的AI聊天机器人平台
|
小程序 Java 关系型数据库
weixin116大学生就业平台微信小程序+ssm(文档+源码)_kaic
本文介绍了一款大学生就业平台微信小程序的开发过程,涵盖开发环境、系统设计、实现与测试等方面。该小程序基于微信平台特性,采用MYSQL数据库存储数据,确保系统稳定与安全,同时满足学生、企业和管理员不同权限用户的功能需求。通过简化操作流程,实现了招聘信息查看、简历投递等实用功能,旨在为用户提供便捷高效的求职体验,符合“操作简单,功能实用”的设计理念。
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
|
小程序 JavaScript 前端开发
微信小程序开发全流程:从注册到上线的完整指南
这篇文章详细记录了微信小程序的完整开发到最终上线的每一个步骤。适合对小程序开发感兴趣的个人开发者或希望了解完整流程的学习者,涵盖了云开发、事件绑定、生命周期管理、组件使用等关键内容。
21803 14
|
小程序 关系型数据库 Java
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。