微信小程序实现发微博功能的示例代码


Posted in Javascript onJune 24, 2020

跳转页面发状态消息,是一个很常见的功能,功能截图如下:

微信小程序实现发微博功能的示例代码微信小程序实现发微博功能的示例代码

微信小程序实现发微博功能的示例代码微信小程序实现发微博功能的示例代码

具体实现,这个功能涉及到了page传递参数功能,那么今天就仔细探究一下如何实现

首先,这个功能涉及两个页面,分别为top和list

先看list页面,即图片1和图片4,该页面的布局如下

<!--pages/weibo/list/list.wxml-->
<view>这是第一条微博</view>
<view wx:for = "{{weibos}}">
{{item}}
</view>
<button type="primary" bindtap="writeweibo">发微博</button>

button绑定了一个writeweibo函数,那么该函数需要在js文件中实现
由于页面简单,这里不涉及wxss

接着就是list.js,查看js文件

这里有button绑定的writeweibo函数,本质跳转top页面

Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 weibos: []
 },
 
 writeweibo: function (event){
 wx.navigateTo({
  url: '/pages/weibo/top/top'
 })
 },
})

下面是跳转后的top页面,即图片2,3

<!--pages/weibo/top/top.wxml-->
<view>
 <form bindsubmit="submitEvent">
 <textarea name="content" placeholder="请输入内容" />
 <button form-type="submit">提交</button>
 </form>
</view>

这里placeholder是提示信息的显示,可以看到提交button也绑定了一个submit的方法

// pages/weibo/top/top.js
Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 
 },
 
 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {
 
 },
 
 submitEvent:function(event){
 var content = event.detail.value.content;
 var pages = getCurrentPages(); // 获取当前页面信息
 var page = pages[0];
 var weibos = page.data.weibos; // 获取数据中的weibo参数
 weibos.push(content); 
 // 修改数据
 page.setData({
  weibos:weibos
 })
 
 wx.navigateBack({ //返回上一级页面
  })
 
 }
})

以上是top.js,这里可以看到submitEvent方法,获取当前页面信息,获取weibo参数,再通过setData修改数据,最后navigateBack返回上一级页面,即list页面

到此这篇关于微信小程序实现发微博功能的文章就介绍到这了,更多相关小程序发微博功能内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript获取GridView选择的行内容
Apr 14 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 Javascript
JavaScript实现答题评分功能页面
Jun 24 #Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 #Javascript
JS实现简单打字测试
Jun 24 #Javascript
微信小程序实现多选框功能的实例代码
Jun 24 #Javascript
JS实现电脑虚拟键盘的操作
Jun 24 #Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 #Javascript
js实现html滑动图片拼图验证
Jun 24 #Javascript
You might like
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
JavaScript的Cookies
2008/01/16 Javascript
JavaScript 高级语法介绍
2009/06/15 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
一套中级Java程序员笔试题
2015/01/14 面试题
旷课检讨书3000字
2014/02/04 职场文书
音乐教育感言
2014/03/05 职场文书
招聘专员岗位职责
2014/03/07 职场文书
教师节活动总结
2014/08/29 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
技术负责人岗位职责
2015/02/10 职场文书
培训简讯范文
2015/07/20 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
MySQL分区路径子分区再分区
2022/04/13 MySQL
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL