微信小程序系列(5)如何用微信小程序写一个论坛?贴心代码详解(三)列表页

微信小程序踩坑心得 专栏收录该内容
7 篇文章 10 订阅

源代码已开源,如果对你有帮助可以点个星:https://github.com/linkaimin/xdzs

写论坛不难,重点是各页面之间的信息传递!

先放成品图,虽然有点单调。。。。但是麻雀虽小五脏俱全!
在这里插入图片描述
论坛功能:

1. 发帖(带图片)
2. 浏览各帖
3. 评论
4. 搜素帖子
5. 作者删自己的贴

以上是论坛必备的功能,缺哪个都不完整哦~
这里使用了iview weapp组件

贴心代码详解(三)会讲列表部分

在这里插入图片描述
wxml

<view class="content">
  <view class="bg">
    <view class="name">创意集</view>
    <form  bindsubmit="formSubmit">
           <view class="search">
       <button class='find' form-type="submit" style="width:50px;height:30x">
        查询
        </button>
         <input type="text" name="find" placeholder="帖子名称" form-type="submit"/>
   
    <button class='btn' bindtap="img" >发帖</button>
  
    </view>
     
  </form>  
  </view>
  </view>  
 
<view wx:for="{{list}}" wx:key="list">
<navigator url="../detail/detail?id={{item.id}}" open-type="navigate" >
  <view class="title">【{{item.category}}】{{item.title}}</view>
  <view class="pic">
  <image style="width:30%;height:69px;" src="{{item.pic}}"/>
   
  <view class="info">
    <view class="desc">

       <text>{{item.commentNumber}}条评论</text>
       <text>{{item.time}}</text>
       <text>楼主:{{item.writer}}</text>

    <view class="opr">

    </view>
  </view>
  </view>
</view>
<view class="hr"></view>
</navigator>
</view>

json

{
    "usingComponents": {
    "i-row": "../../dist/row/index",
    "i-col": "../../dist/col/index"
}
}

js


var app = getApp();
Page({

  onPullDownRefresh() {
    this.onShow();
    console.log("上拉刷新");
    wx.showNavigationBarLoading() //在标题栏中显示加载
    
    },
    
  img:function()
  {
    wx.navigateTo({
      url: '../img/img'
    })
  },
  getUserInfo:function(e){
    console.log(e.detail.userInfo)
    wx.request({    
        url: app.globalData.url+'all',  
        data:{
          'writer': e.detail.userInfo.nickName,  
          'pic' : e.detail.userInfo.avatarUrl,
        method: 'POST',  
        header: {
          'content-type': 'application/json'
        },
        success:function(res) {  
          console.log('submit successs');  
        },  
        fail:function(res){  
            console.log('submit fail');  
        }
    }
  })
},
  formSubmit(e) {
        console.log(e.detail.value)
        wx.navigateTo({
          url: '../find/find?find='+e.detail.value.find,//这里是重点!!!页面信息传递,要结合我的上一篇博客看
          })
           
  },
  /**
   * 页面的初始数据
   */
  data: {
    title:"",
    writer:" ",
    time:"",
    number:"",
   
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
   onLoad: function () {
        var that = this
        wx.request({
          url: app.globalData.url+'community',
          headers: {
            'Content-Type': 'application/json'
          },
          success: function (res) {
            //将获取到的json数据,存在名字叫list的这个数组中
              console.log(res.data);
              that.setData(
              {
              list: res.data.data,
              //res代表success函数的事件对,data是固定的,list是数组
            })
          }
        })
     
     
      },
  tempData: function () {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this
      wx.request({
            url: app.globalData.url+'community',
            headers: {
              'Content-Type': 'application/json'
            },
            success: function (res) {
              //将获取到的json数据,存在名字叫list的这个数组中
                console.log(res.data);
                that.setData(
                {
                list: res.data.data,
                //res代表success函数的事件对,data是固定的,list是数组
              })
            }
          })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

写了三篇论坛相关内容了,大家每篇都读一定会有更深的感受!!!学习贵在坚持

  • 16
    点赞
  • 9
    评论
  • 62
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

MinBBS V1.0 功能模块如下: 户功能 支持DiscuzPC版户直接登录、注册 支持修改户头像 搜索功能 论坛主题搜索功能 论坛功能 主题浏览功能 主题发布功能(支持图片、文字发布) 主题回复功能(支持文字回复) 版块列表展示功能 主题列表支持3种模式展示(文字、单图、多图) 1.首(自动读取PC版版块相关信息,含今日新帖数量、板块图标等) 2.版块详情面 3.发布主题面 4.主题详情5.搜索面 6.个人中心面 7.登录面 8.注册面 MinBBS V1.0安装主要分两个步骤: 1、配置前端小程序。此步骤需依赖于微信小程序开发者工具进行,如果您的计算机还未安装,请点击此处进入面下载安装。 2、上传后台程序接口。小程序的运行需通过我们开发的专接口对接Discuz数据,此接口需上传到Discuz目录下,并且配置数据库字段等信息。 前台安装 在您配置前台之前,我们建议您先进行后台的安装,因为前台部分路径的配置需要依赖于后台。 MINBBS在购买授权后,我们会提供源代码给您,您可根据自己的需求进行修改和完善,详细的开发教程可参考微信小程序开发文档 前台安装步骤: 1、购买系统后到下载地址下载MinBBS V1.0 小程序端(文件名MinBBS_V1.0_Weixin.zip),下载后解压。 2、进入小程序管理后台,登陆后点击左侧设置——开发设置获取小程序APPID。 3、打开小程序开发者工具(下载链接),登录后创建新项目,新项目APPID为您的小程序APPID,目录设置为解压后的MinBBS V1.0目录。 4、打开小程序目录中的app.js文件,修改底部109行左右代码: globalData: { userInfo: null, HostUrl: 'https://xx.com/minapp/1.0/index.php?', //此处设置为您的小程序后台接口地址 Root_Url: 'https://xx.com/', //此处设置为您的Discuz路径,注意保留最后的斜杠 } 其中将xx.com修改为您的discuz访问地址,请注意结尾的斜杠需要保留。 5、打开小程序目录下的pages/index目录,修改Index.json文件,将如下参数的值修改为您的站点名即可。 "navigationBarTitleText": "MinBBS", 6、截止此步,小程序端配置已完成,在开发者工具中点击项目——上传即可将代码上传至小程序后台,进入后台提交审核即可。 后台安装 后台安装步骤: 1、购买系统后到下载地址下载MinBBS V1.0 服务端(文件名MinBBS_V1.0_Server.zip),下载后解压,解压后得到目录“minapp”。 2、上传minapp目录到您的discuz根目录下。 3、修改minapp/1.0目录下的config.php第7行位置为您的Discuz主程序编码: define('ODZ_CHARSET', 'gbk'); //此处gbk即编码,如果您的Discuz为gbk则无需修改,否则请修改为对应编码 此处有一点需要注意,如果您的Discuz编码为gbk,则不需要修改,如果您的Discuz编码为UTF-8,则此处填UTF-8(注意大),填完毕后进入minapp/1.0/language/utf8/目录,将目录下的lang_message.php拷贝到minapp/1.0/language/目录,即当前目录的上级目录,替换源文件,否则可能造成部分提示信息编码错误而不显示文字。 4、打开minapp目录下的sql.sql文件,批量查找替换“pre_”为您的数据库表前缀,替换完成后导入到mysql中的discuz数据所在数据库中。 5小程序要求请求域名必须为https,所以需要将服务器配置好ssl,即通过https可以访问到。 6、登录小程序管理后台,进入设置——开发设置,将服务器域名全部设置为您的站点域名。 7、截止此步,后台配置已完成。
©️2021 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值