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


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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
小程序实现分类页
Jul 12 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
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验证码生成代码
2015/11/11 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
深入探究node之Transform
2017/07/20 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
python制作mysql数据迁移脚本
2019/01/01 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
Python函数参数分类原理详解
2020/05/28 Python
python与pycharm有何区别
2020/07/01 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
python图片合成的示例
2020/11/09 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
教师的实习鉴定
2013/12/15 职场文书
先进集体获奖感言
2014/02/13 职场文书
成语的广告词
2014/03/19 职场文书
《秋游》教学反思
2014/04/24 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
生死抉择观后感
2015/06/09 职场文书