【详细】小程序发微博功能实现

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

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

这个功能就实现了！

【详细】小程序发微博功能实现相关推荐

微信小程序发红包功能实现，附效果图加讲解。
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 需要做红包功能的可以找我,收费卖源码,也承接开发.此博文仅示例. 流程效果图: 图片1触发wx.sendBiz ...
小程序短信验证码登录，1分钟实现小程序发短信功能，借助云开发10行代码实现短信验证码登录小程序
老规矩先看效果图普通短信验证码短信今天被云开发官方告知,云开发支持发短信功能了,然后就迫不及待的来尝下鲜. 进入官方文档一看,云开发给咱们开发者的福利还真不小. 不仅仅可以很方便的使用短信功能, ...
python使用第三方支付宝SDK实现小程序发红包、用户支付等功能
python使用第三方支付宝SDK实现小程序发红包.用户支付等功能实现小程序发红包,创建支付订单.登录验证等继承DCAlipay添加几个我们需要的功能初始化DCAlipay对象并使用回调not ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（十二）：开发小程序用户反馈功能
文章目录前言一.功能说明二.代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 专题文章链接前言案例的运行效果,可以扫码观看: 本篇文章,我们将实现应用的用户反馈功能. 一 ...
微信小程序商城开发功能构架介绍
微信小程序商城开发,微信小程序商城开发功能,微信小程序商城开发介绍.截止到2021年末初手机微信小程序总数就早就超过400万,而且网络购物小程序愈来愈占有蛮大的占有率,而这类的小程序大家一般称作商城小 ...
黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
微信小程序红包开发小程序发红包开发过程中遇到的坑微信小程序红包接口的...
最近公司在开发一个小程序红包系统,客户抢到红包需要提现.也就是通过小程序来给用户发红包. 小程序如何来发红包呢?于是我想到两个方法. 之前公众号开发一直用了的.一个是红包接口,一个是企业支付接口.一开 ...
微信回应 WeTool 被封事件；支付宝小程序开放直播功能；Raspberry Pi 4 发布 8GB 版本| 极客头条...
整理 | 屠敏头图 | CSDN 下载自东方 IC 快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦 ...
微信小程序与卡券功能小结
微信小程序与卡券功能小结前段时间公司有一个微信小程序的项目,其中有与卡券打通的功能,但是微信的官方文档实在是一言难尽...找了很多资料才解决这个问题,其中涉及到卡券的领取,卡券的核销等,在这里做一个 ...

【详细】小程序发微博功能实现

【详细】小程序发微博功能实现相关推荐

最新文章

热门文章