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

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

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

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

(0)

相关推荐

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

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

  • 微信小程序实现发动态功能的示例代码

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

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

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

  • 微信小程序实现拨打电话功能的示例代码

    1.在对应需要拨打电话的标签那里绑定事件(使用的标签不固定,可以是text.view等) 例子: <text class="phone" bindtap="callPhone">400-9121-211</text> 2.在对应的事件方法里面写入 wx.makePhoneCall方法 例子: callPhone() { wx.makePhoneCall({ phoneNumber: '400-9121-211' //仅为示例,并非真实的电话号

  • 微信小程序下拉框功能的实例代码

    微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 <view class='top'> <view class='top-text'> 选择接收班级</view> <!-- 下拉框 --> <view class='top-selected' bindtap='bindShowMsg'> <text>{{grade_name}}</text> <image src='/images/icon/do

  • 微信小程序之搜索分页功能的实现代码

    直接上代码: wxml: <wxs src="../wxs/changeimg.wxs" module="changeimg" /> <view class="container"> <view class="search_input"> <image class="back" src="" mode="widthFix"&g

  • 微信小程序实现搜索关键词高亮的示例代码

    1,前言 项目中碰到一个需求,搜索数据并且关键词要高亮显示,接到需求,马上开干.先上效果图.源码已经做成了小程序代码片段,放入了GitHub了,文章底部有源码链接. 2,思路 博主第一时间想到的就是使用split,根据搜索的关键词,处理后台返回的数据,然后indexOf找到关键字,给每个字添加deep字段,deep为true,则高亮,为false,则正常.由于是小程序,所以楼主直接做成了一个高亮组件,代码很简单,实现步骤如下. 3,代码逻辑 模拟数据如下 list:[ '武汉大学', '华中科技

  • 微信小程序拖拽排序列表的示例代码

    拖拽排序列表 思路 界面分为两层: 底层,正常列表展示,拖拽的时候不做处理(大牛直接加了动画,原谅我技艺不精,还没实现) 顶层,movable-view组件,不长按不展示,之后长按才展示,且没有点击事件. 事件 主要监听:longpress , touchmove , touchend 三个事件 longpress 保障长按才有效,并设定许多其他值. touchmove 滑动的时候触发 判断是否需要滑动页面,因为 movable-area组件 滑动事件被catch掉,无法滑动: 记录滑动经过的项

  • 微信小程序实现手写签名的示例代码

    目录 1.效果图 2.相关代码 canvas代码 js相关 在微信小程序上实现手写签名,获取canvascontext新版本和旧版本有点坑,新版本在获取canvas后如果页面有滑动,则签名坐标出现异常(在微信开发者工具上会出现2022-2-17),但是在真机上即使滑动也不会出现异常,为了防止出现问题,暂时使用旧版本获取canvascontext 1.效果图 2.相关代码 canvas代码 新版2d canvas <canvas id="canvas" class="ca

  • 微信小程序实现自定义弹窗组件的示例代码

    目录 编写组件代码 Dialog.wxml Dialog.js Dialog.wxss 调用自定义组件 上一篇中说的是小程序自带的弹窗组件,今天,我们来试试小程序的自定义组件,我们自定义一个带确定取消的弹窗组件. 首先,放一下,最终的效果图: 这是我们最后要实现的效果 那么,首先,我们创建一个组件 新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会自动生成组件的模板wx

随机推荐