微信小程序新闻服务器,微信小程序新闻网站详情页
扩展运算符的巧妙应用
这个template模板,绑定的数据带item前缀
那么使用模板的时候,也必须保证是item
data帮绑定数据用双花括号包住item
还有wx:for-item默认也是item,因此可省略
这样带有item不利于代码复用,解决方法:
将template模板中的item前缀都去掉
然后使用模板时,在数据绑定前加...(ES6语法)
这样的好处是:
可以改变wx:for-item的属性值和data属性值(这两个必须保持一致),但不需要再去修改模板中的数据前缀
依然能够正常显示
组件的自定义属性及获取属性
创建新闻详情页
给新闻绑定点击事件,注意template和block是不能绑定事件的,所以我在template外面包裹了一个view,然后在view上绑定事件
在函数里定义好跳转到新闻详情页
查看数据可以看到,每篇新闻都有对应的postId
给每篇新闻自定义属性,传递postId
小程序中,自定义属性必须以data-开头,否则是无效的
可以看到已经传递成功
在js中使用小程序的事件对象获取到元素的属性
posts.js
在currentTarget--dataset中,存放了自定义属性
补充一个知识点
如果你设置的自定义属性名是用连字符拼接
可以看到实际结构是全部会转小写的,用连字符拼接
而在js中通过事件对象获取到属性,则会转换为驼峰形式
先静后动,先样式再数据
为了方便查看实时效果,首先将新闻详情页设置为默认页面
这样每次刷新都是这个页面
现在来编写新闻详情页 post-detail.wxml
cyy
发表于
3天前
正是虾肥蟹壮时
菊黄蟹正肥,品尝秋之味。徐志摩把“看初花的荻芦”和“到楼外楼吃蟹”并列为秋天来杭州不能错过的风雅之事;用林妹妹的话讲是“螯封嫩玉双双满,壳凸红脂块块香”;在《世说新语》里,晋毕卓更是感叹“右手持酒杯,左手持蟹螯,拍浮酒船中,便足了一生矣。”漫漫人生长路,美食与爱岂可辜负?于是作为一个吃货,突然也很想回味一下属于我的味蕾记忆。记忆中的秋蟹,是家人的味道,弥漫着浓浓的亲情。\n\n是谁来自山川湖海,却囿于昼夜,厨房与爱? 是母亲,深思熟虑,聪明耐心。吃蟹前,总会拿出几件工具,煞有介事而乐此不疲。告诉我们螃蟹至寒,需要佐以姜茶以祛寒,在配备的米醋小碟里,亦添入姜丝与紫苏,前者驱寒后者增香。泡好菊花茶,岁月静好,我们静等。
post-detail.wxss
/*pages/posts/post-detail/post-detail.wxss*/.container{display:flex;flex-direction:column;
}.head-image{width:100%;height:460rpx;
}.author-date{display:flex;margin:20rpx 20rpx 0 30rpx;align-items:center;
}.avatar{width:64rpx;height:64rpx;
}.author{font-size:30rpx;font-weight:300;margin-left:20rpx;color:#666;
}.const-date{font-size:24rpx;color:#999;margin-left:20rpx;
}.date{font-size:24rpx;margin-left:30rpx;
}.title{margin-left:40rpx;font-size:36rpx;font-weight:700;margin-top:30rpx;letter-spacing:2rpx;color:#4b556c;
}.tool{margin-top:20rpx;
}.circle-img{display:flex;justify-content:flex-end;margin-right:40rpx;
}.circle-img image{width:90rpx;height:90rpx;
}.horizon{width:660rpx;height:1rpx;background-color:#e5e5e5;position:relative;bottom:45rpx;z-index:-99;margin:0 auto;/*让线水平居中*/
}.share-img{margin-left:30rpx;
}.detail{color:#666;margin:20rpx 30rpx;line-height:44rpx;letter-spacing:2rpx;
}
公共样式可以写在app.wxss里
text{font-family:MicroSoft Yahei;font-size:24rpx;color:#666;
}input{font-family:MicroSoft YaHei;
}
设置顶部文字
使用数据填充新闻详情页面
在posts.js中已经获取到了postId,传递少量数据可以在url后面直接加参数
多个参数之间使用&符号分割
在post-detail.js的onload函数中,可以用options接收到传递过来的参数
使用require引入数据文件
在onload函数中使用id获取到需要的数据,发送到data中
注意,所有setData的数据,可以在控制台的AppData中查看数据结构
将post-detail.wxml中的静态数据改为动态数据
效果图
Storage缓存的基本用法
收藏功能,需要用服务器来记录(现在可以用缓存来暂时代替)
在控制台-storage可以查看缓存
绑定事件(作用演示,非实际功能)
常见缓存操作(小程序缓存大小不能超过10M)
更多用法还是翻文档
带sync的是同步,不带sync的是异步,一般来说,异步不容易阻塞,同步更简单些
使用缓存实现文字收藏的功能
post-details.js
onload函数中实现的效果是:
读取缓存,如果存在缓存则发送到data中;如果不存在则设置为false,并更新缓存
onLoad: function(options) {var postId=options.id;this.data.postId = postId;//把postId发送到data中,方便其他函数中调用(由于不需要进行数据绑定,因此没必要使用setData)
var pdata = postData.postList[postId];//postId与数据索引刚好相同,获取单篇文章的数据
this.setData({...pdata});//发送数据到data中
var postcollected = wx.getStorageSync("postcollected");//读取缓存
//如果存在缓存则发送到data
if(postcollected){var collected = postcollected[postId];//存在单篇文章缓存
if(collected){this.setData({collected});
}
}else{
postcollected={};
postcollected[postId]=false;//设置缓存
wx.setStorageSync("postcollected", postcollected);
}
},
onCollectionTap函数中实现的效果是:
读取到这篇文章是否收藏的缓存,取反(点击之后状态与之间相反)
更新缓存,并将数据发送到data
//点击收藏按钮
onCollectionTap: function() {//读取缓存
var postcollected = wx.getStorageSync("postcollected");var collected = postcollected[this.data.postId];
collected= !collected;
postcollected[this.data.postId] = collected;//更新缓存
wx.setStorageSync("postcollected", postcollected);this.setData({ collected });//发送数据到data
},
这样的话,data中是肯定有collected属性的,值是true或者false
在页面中用wx:if和wx:else来实现
交互反馈wx.showToast
收藏与否的文字提醒
效果图
交互反馈wx.showModal
使用wx.showModal改写刚才的wx.showToast(功能一样,实现效果不一样)
//点击收藏按钮
onCollectionTap: function() {//读取缓存
var postcollected = wx.getStorageSync("postcollected");var collected = postcollected[this.data.postId];
wx.showModal({
title: collected? '取消收藏' : "收藏",
content:'确定执行该操作吗?',
success:(res)=>{//箭头函数可以保留之前的this指向
if (res.confirm) {//点击确定
collected= !collected;
postcollected[this.data.postId] = collected;//更新缓存
wx.setStorageSync("postcollected", postcollected);this.setData({ collected });//发送数据到data
}else if (res.cancel) {//点击取消
console.log('取消操作')
}
}
});
},
上面是用的ES6的箭头函数,保留了this指向,也可以使用变量保存之前的this指向
//点击收藏按钮
onCollectionTap: function() {//读取缓存
var postcollected = wx.getStorageSync("postcollected");var collected = postcollected[this.data.postId];var self=this;//保留this指向
wx.showModal({
title: collected? '取消收藏' : "收藏",
content:'确定执行该操作吗?',
success(res){if (res.confirm) {//点击确定
collected= !collected;
postcollected[self.data.postId]= collected;//更新缓存
wx.setStorageSync("postcollected", postcollected);
self.setData({ collected });//发送数据到data
}else if (res.cancel) {//点击取消
console.log('取消操作')
}
}
});
},
效果图
加入tabbar选项卡
使用tabbar最起码需要两个页面,因此我们再创建demo页面方便演示
查看文档
在app.json中添加:
效果图
如果这些组件无法满足需求,小程序有很多自定义组件,可以使用别人写好的组件
此时选择普通编辑,回到welcome页面,你会发现点击按钮无法跳转页面,这是因为受到tabBar的影响
小程序规定,如果要跳转到一个带有tabBar的页面,必须使用wx.switchTab
一些好用的小程序框架
喜欢用vue编写小程序的,推荐 mpvue
喜欢用react编写小程序的,推荐 taro
微信小程序新闻服务器,微信小程序新闻网站详情页相关推荐
- 微信小程序一星期入门-完结篇--电影详情页的制作
文章目录 微信小程序入门(七)--入门篇完结 实现电影页面按钮的更多功能 获取数据 more-movie页面布局 movies页面更多按钮绑定事件 更多按钮的事件 更多页面onLoad的更改 实现mo ...
- 跑腿小程序需要服务器吗,小程序设置流程
外卖小程序设置流程总结: 1. 先添加公众号,因为小程序设置是在模块内部后台进行设置的 2. 设置平台基础设置,如下图: ![](https://img.kancloud.cn/1e/65/1e655 ...
- 小程序资源服务器,开发小程序没有服务器资源
开发小程序没有服务器资源 内容精选 换一换 在性能优化时,需要遵循一定的原则,主要有以下几个方面:对性能进行分析时,要多方面分析系统的资源瓶颈所在,如CPU利用率达到100%时,也可能是内存容量限制, ...
- 请开启微信或者手机定位服务器,微信在哪里设置定位(微信开启定位功能设置)...
微信在哪里设置定位(微信开启定位功能设置)微信是一个提供公众平台,朋友圈消息,推送等功能的免费应用程序.爱玩手机的人基本上都下载了微信作为通讯的工具.不仅可以视频打电话,发信息,还隐藏了很多便利生活的 ...
- 局域网下微信无法连接到服务器,微信无法连接到服务器怎么办
软件大小:36.17MB 软件类型:聊天社交 软件评级: 查看详情 最近很多用户在问小编微信无法连接到服务器怎么办,其实解决方法非常的简单,但很多用户不知道该怎么解决,下面来看看小编给大家带来的详细的 ...
- 微信怎么找城市服务器,微信城市服务在哪里 怎么开通使用
网上到处有新闻说微信推出了一个新功能就是微信城市服务,并且可以在微信钱包里面找到,但是小编打开微信钱包根本就没有城市服务这一项,那么微信城市服务在哪里?怎么开通使用? 首批上线的服务包括:医院挂号.违 ...
- 微信表情包储服务器,微信新功能!不用存图就能发出海量表情包
原标题:微信新功能!不用存图就能发出海量表情包 不知道大家有没有注意到,就在前几天,微信突然更新了版本,然而在版本更新之后,似乎并没有什么重大的功能增加,但是通过狂丸仔细的寻找还是发现了,更新后的微信 ...
- 平台服务器的配置信息失败,安装程序配置服务器失败-安装程序配置服务器失败.参考服务器错误日志和Cwindowssqlstp.log了解更多信息...
今安装SQLServer遇BT问题提示: 安装程序配置服务器失败参考服务器错误志C:\Windows\sqlstp.log解更信息 前进安装目录删除已安装目录解决重启五遍(我真耐-_-;) 博客评论找 ...
- 微信人人商城云服务器,微信支付配置
# **微信支付配置流程** ### **配置支付前需开通相应权限,[点击查看所需开通的权限](http://wiki.rrsc.cn/renrenshopv5/1833366)** * 微信支付,是 ...
最新文章
- 保护物联网的数据隐私和在线安全的7种方式
- LINUX下的tty,console与串口
- Android之基于AssetManager实现换肤方案
- fedora 使用 vnc 远程 fedora 28 主机
- Java系列笔记(4) - JVM监控与调优【转】
- 基于深度学习的目标检测技术演进:从目标检测到人脸检测
- matlab运行时风扇,TCFD和CAESES耦合优化案例-轴流风扇
- e记法 python 底数_干货满满,30个Python源代码!
- 身价百亿的中本聪是如何打造出“创世区块”的?
- c语言给定一个单链表输入k,C语言实现单链表(不带头结点)的基本操作
- 2018-04-28
- 【语音识别】基于matlab MFCC+SVM特定人性别识别【含Matlab源码 533期】
- 项目建议书模板doc_简历模板大全,直接可以下载使用的简历模板
- android后台获取当前屏幕截图(screencap.cpp修改)
- silvaco 安装
- 面部捕捉技术_新功能要来!苹果收购面部捕捉技术公司Faceshift
- 2020年春节抢票神器
- 2023年中央民族大学新闻学保研必看上岸前辈复习经验分享
- DDD案例(2):从领域分析到代码实现
- 【伯克利马毅老师】强化学习与最优控制综述
热门文章
- DB2: SQL0902C A system error occurred. Subsequent SQL statements cannot be processed. IBM software
- 2023学习Linux云计算可以做什么岗位的工作?
- 网络数据保障ptop_pTop
- discuz7.2帖子管理
- 1exe1.net - 1个exe文件搞定1切
- 元宵节的记忆——灯笼
- 人生需看11个小故事
- 1 核 2G 服务器安装 gitlab-ce
- 互联网低成本的创业与变现
- 最新推荐 | 清华NLP图神经网络GNN论文分门别类,16大应用200+篇论文