微信小程序实现发微博功能

2024-02-23 10:14:34

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

具体实现，这个功能涉及到了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页面

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

微信小程序实现发微博功能

跳转页面发状态消息,是一个很常见的功能,功能截图如下: 具体实现,这个功能涉及到了page传递参数功能,那么今天就仔细探究一下如何实现首先,这个功能涉及两个页面,分别为top和list 先看list页面,即图片1和图片4,该页面的布局如下  <view>这是第一条微博</view> <view wx:for = "{{weibos}}"> {{item}} </vi
微信小程序实现发微博功能的示例代码

跳转页面发状态消息,是一个很常见的功能,功能截图如下: 具体实现,这个功能涉及到了page传递参数功能,那么今天就仔细探究一下如何实现首先,这个功能涉及两个页面,分别为top和list 先看list页面,即图片1和图片4,该页面的布局如下  <view>这是第一条微博</view> <view wx:for = "{{weibos}}"> {{item}} </vi
微信小程序实现发动态功能的示例代码

目录一.设计所需要的表 1.文章表 2.评论表 3.点赞表二.发布动态 1.文本区 2.最终发表动态效果 3.发布动态代码最近做了一个校园拍卖小程序,想在里面添加一个类似校园圈功能,现在来一步一步实现. 一.设计所需要的表 1.文章表文章表很简单,就类似朋友圈,一个文字内容,一个图片数组 2.评论表 3.点赞表二.发布动态 1.文本区光标有点问题,回车换行时光标和文字被埋在下面了解决,给textarea设置一个最大高度,max-length,把scroll-view改为view ,
微信小程序实现发红包功能

本文实例为大家分享了微信小程序实现发红包的具体代码,供大家参考,具体内容如下目前此功能尚在内测,无法申请.此博文仅示例. 流程效果图: 图片1触发wx.sendBizRedPacket({})吊起图片2,点击开,出现图片3,关闭以后出现图片4. wx.sendBizRedPacket({})说明及示例: wx.sendBizRedPacket({ timeStamp: e.timeStamp, nonceStr: e.nonceStr, package: e.package, signType
C#开发之微信小程序发送模板消息功能

步骤一:获取模板ID 有两个方法可以获取模版ID 通过模版消息管理接口获取模版ID 在微信公众平台手动配置获取模版ID 步骤二:页面的 <form/> 组件,属性report-submit为true时,可以声明为需发模板消息,此时点击按钮提交表单可以获取formId,用于发送模板消息.或者当用户完成支付行为,可以获取prepay_id用于发送模板消息. 步骤三:调用接口下发模板消息今天重要的说第三步怎么实现,前面的步骤比较简单就略过. ----------------------------
微信小程序拍照和摄像功能实现方法示例

本文实例讲述了微信小程序拍照和摄像功能实现方法.分享给大家供大家参考,具体如下: 拍照原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件的大小设置成根屏幕一样大,并在上面使用一个cover-image组件来给用户进行点击,可是实际上的情况是第一,cover-image组件有时候会消失,第二,整个流程实现起来很僵硬,页面跳转也是卡的要死,后来无意间发现了另一个API:wx.chooseImage,这个API会自己去调用相机和相册,之后
微信小程序中悬浮窗功能的实现代码

问题场景所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view. 这是简化的代码结构: index.wxml: <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome"
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法.分享给大家供大家参考,具体如下: 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的item项跳转到下一个页面. 一.效果图从左边的列表页调到右边的详情页二.页面之间的跳转首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择: 1.保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navi
微信小程序实现的涂鸦功能示例【附源码下载】

本文实例讲述了微信小程序实现的涂鸦功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 布局文件index.wxml: <view class="container">  <view class="canvas_area">  &
微信小程序自动客服功能

微信小程序最近比较火爆,所以抽空做了个客服机器人的小程序,来回答之前坦克游戏中的常见问题.当然这个小程序也很容易修改为其他类型的自动客服,需要做的仅仅是在olami平台加上相应的问题和答案. 整个小程序界面包含2个部分,一部分用于显示回答,一部分为输入框.小程序的核心就是向olami服务器发送http请求,然后处理结果并显示出来.olami接口的详细使用方法可以参考置顶的两篇博客.处理输入的代码如下: bindInput: function (e) { var that = this; var

微信小程序实现发微博功能

相关推荐

随机推荐