小程序微博发布页面代码2020/12/05

最新推荐文章于 2025-08-04 10:46:30 发布

【5】吴润泽

最新推荐文章于 2025-08-04 10:46:30 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

文章标签：小程序

本文链接：https://blog.csdn.net/weixin_50286102/article/details/110729134

本文详细介绍了小程序中微博发布页面的实现过程，包括list.js、list.wxml、aweibo.wxml和aweibo.js四个关键文件的代码讲解，涵盖了页面逻辑和视图结构的构建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：pages / weibo /list /list.js文件

Page({
  data: {
    weibos:[]
  },
  onLoad: function (options) {
  },
  writeweibo:function (e) {
    wx.navigateTo({
      url: '/pages/weibo/aweibo/aweibo',
    })
  }
})

2:pages / weibo / list /list.wxml文件

<view>这是第一条微博</view>
<view wx:for="{{weibos}}">
  {{item}}
</view>
<button type="primary" bindtap="writeweibo">发微博 </button>

3:pages / weibo /aweibo/ aweibo.wxml文件：

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

  </form>
</view>

4:pages / weibo/ aweibo/ aweibo.js文件

// pages/weibo/aweibo/aweibo.js
Page({
  data: {
  },
  onLoad: function (options) {
  },

  submitEvent: function(e){
    console.log(e);
    // 获取输入的数据
    var content=e.detail.value.content; 
    // 获取当前页面栈
    var pages=getCurrentPages();
    // 获取首页
    var page=pages[0];

    var weibos=page.data.weibos;

    weibos.push(content);
    page.setData({
      weibos:weibos
    })
    wx.navigateBack({ })

  }
})