技術標籤：微信小程式

文章目錄

• • • • • 1. 檔案目錄
        • 2. demo頁面
        • 3. edit 頁面
        • 4. 效果

1. 檔案目錄

2. demo頁面

<view>
  <view wx:for="{{msg}}" wx:key='*this'> {{ item }}  </view>
  <button type='primary' bindtap='handleTap'> 發表資訊 </button>
</view>

// pages/demo/demo.js
Page({
  data: {
      msg:
 
[' 微信小程式 ']
  },
  handleTap(){
    wx.navigateTo({
      url: '/pages/edit/edit',
    })
  }
})

3. edit 頁面

<form bindsubmit="submit">
  <textarea name="text" id="" cols="30" rows="10" placeholder="請輸入內容"></textarea>
  <button
 
 form-type="submit"> 提交 </button>
</form>

// pages/edit/edit.js
Page({
  submit(res){
    // 獲取表單資料
    const {  text } = res.detail.value;
    // 獲取頁面棧
    const pages = getCurrentPages();
    const page = pages[0]
    // 上一頁面的msg資料
    const {msg} = page.data;
    // 將獲取的表單資料push到msg裡
    msg.
 
push(text)
    // 修改狀態
    page.setData({
      msg
    })
    // 返回上一頁面
    wx.navigateBack({
    })
  }
})

4. 效果

提交form表單，資料顯示在首頁上