用wordpress版微信小程序做一个仿微信朋友圈的MiniBBS

首先要感谢@Jianbo提供的开源代码。我的MiniBBS就是在此基础上开发完成的。

我把这个项目叫做MiniBBS是因为它还有很大的改进空间,我目前只实现了帖子预览和发帖功能。如果继续开发下去,应该还可以实现帖子上传图片附件,针对帖子的评论等更高级的功能。那样就更像一个完善的社交圈子了。

我做的这个项目是一个招聘信息发布中心,招聘信息传播的特点是对回评基本没有要求,对图片也没有什么要求,只要信息更新快速,能够让更多的人看到即可。所以,做出来的效果如下图所示:

我省略了帖子详情,所以单个帖子是不可以点开浏览详情的。用户看到的就是信息流(可以按条件加塞广告哦)。右上角悬浮按钮是发帖,采用的是表单提交方式实现帖子发布的功能。

好了,我们来看看完成这个项目我们需要具备什么条件:

  1. 需要安装json-api插件,我们用这个插件实现了wordpress评论的功能。为什么不用wordpress原生的评论API呢?因为貌似最近一段时间,安卓用户采用最初的方式在小程序里对wordpress文章进行评论总是发生评论无法创建的问题。安装好这个插件之后,打开插件设置界面,在插件提供的api地址框中填写api这三个字母,设置好网站api调用的网址。提交评论的api地址格式应该是这样的: https://www.domain.com/api/respond/submit_comment/?post_id=id
  2. MiniBBS是在wordpress评论基础上创建的,我们需要挑选一篇文章出来,将这篇文章的评论模拟成帖子。@Jianbo在新版的开源项目里,对wordpress的评论做了升级,要求获取用户的openid,在这里,我还是保留了最初的提交方式,不要求用户提供openid,简化评论步骤。
  3. 在项目里建立两个页面 pages/quanzi/quanzi 和 pages/fatie/fatie,到app.jspon里,注册这两个页面,然后我建议分配一个tab按钮给pages/quanzi/quanzi,方便调试。
  4. 在utils/api.js里新增以下代码: 顶部加上定义:
     var JSON_API = 'https://www.domain.com/api/';

    并在代码中添加以下几个函数:

      
    //获取特定文章的评论
      getCommentsSpecial: function (obj) {
        return HOST_URI + 'comments?parent=0&per_page=100&orderby=date&order=desc&post=' + '1234' + '&page=' + obj.page + '&per_page=10'
      },
     //获取特定文章下评论的回复
      getChildrenCommentsSpecial: function (obj) {
        var url= HOST_URI + 'comments?parent_exclude=0&per_page=100&orderby=date&order=desc&post=' + '1234'
         return url;
      },
    //新增一个发表评论的函数
      postCommentSpecial: function (id) {
        return JSON_API + 'respond/submit_comment/?post_id=' + id
      },
    

    代码的第3行和第7行,设定文章ID为1234,这个请根据自己的实际情况设置。你可以到wordpress后台发一篇空内容或者随便敲点什么文字的文章(因为等一下我们不需要在前端展示文章本身的内容。),找到它的ID,然后填入这段代码里。好了,api.js就改到这里。

  5. 将以下代码复制粘贴到pages/quanzi/quanzi.js
  6. var Api = require('../../utils/api.js');
    var util = require('../../utils/util.js');
    var WxParse = require('../../wxParse/wxParse.js');
    var app = getApp()
    	
    Page({
      data: {
        detail: {},
        commentsList:{},
    		ChildrenCommentsList: [],
        commentCount:'',
        detailDate:'',
    		commentValue:'',
       
        wxParseData:[],
        display:'none',
    		isLastPage:false,
        page: 1,
        isLastPage:false,
        showerror: "none",
    		showallDisplay: "block",
    
        postID:null,
        scrollHeight: 0,
        link: '',
        isGetUserInfo:false,
        dialog: {
          title: '',
          content: '',
          hidden: true
        },
        content:'',
    
        userInfo: {}, // 存放用户信息
        page:1, // 页码值
    
        animationData: {},
        animationData1: {}, // 发布按钮下滑动画
        animationData2: {}, // 位置按钮下滑动画
    
      },
      onLoad: function (e,options) {
        this.fetchDetailData(options);
        var self = this;
        wx.getSystemInfo({
          
          success: function (res) {
            self.setData({
              scrollHeight: res.windowHeight,
              
            });
          }
        });
    
         wx.showToast({
          title: '加载中',
          icon: 'loading',
    	  duration: 6000
        });
    
        var dataTop = {'detail':{'scrollTop':0}}
    
        //获取用户信息
        app.getUserInfo(function (userInfo) {
          self.setData({
            userInfo: userInfo,
            isGetUserInfo:true
          })
        });
      },
      
      onShareAppMessage: function () {
        return {
          title: this.data.detail.title.rendered,
          path: 'pages/quanzi/quanzi',
          success: function (res) {
            // 转发成功
          },
          fail: function (res) {
            // 转发失败
          }
        }
      },
     
    
    
    //获取文章内容
      fetchDetailData: function (id) {
        var self = this;
    
        wx.request({
          url: Api.getPostByID(1234, { mdrender: false }),
          success: function (response) {
    
            if (response.data.total_comments != null && response.data.total_comments != '') {
              self.setData({
                commentCount: "有" + response.data.total_comments + "个话题"
              });
    
            }
    
            self.setData({
              detail: response.data,
              postID: id,
              link: response.data.link,
    
              detailDate: util.cutstr(response.data.date, 10, 1),
              wxParseData: WxParse.wxParse('article', 'html', response.data.content.rendered, self, 5),
              display: 'block'
    
            });
    
            wx.setNavigationBarTitle({
              title: response.data.title.rendered,
              success: function (res) {
                // success
              }
            });
    
    
            // 调用API从本地缓存中获取阅读记录并记录
            var logs = wx.getStorageSync('readLogs') || [];
            // 过滤重复值
            if (logs.length > 0) {
              logs = logs.filter(function (log) {
                return log[0] !== id;
              });
            }
            // 如果超过指定数量
            if (logs.length > 19) {
              logs.pop();//去除最后一个
            }
            logs.unshift([id, response.data.title.rendered]);
            wx.setStorageSync('readLogs', logs);
            //end 
    
    
            self.fetchCommentData(self.data);
          }
        });
      },
    
      //给a标签添加跳转和复制链接事件
      wxParseTagATap: function (e) {
        var self = this;
        var href = e.currentTarget.dataset.src;
        console.log(href);
        var domain = Api.getDomain();
        //我们可以在这里进行一些路由处理
        if (href.indexOf(domain) == -1) {
          wx.setClipboardData({
            data: href,
            success: function (res) {
              wx.getClipboardData({
                success: function (res) {
                  wx.showToast({
                    title: '链接已复制',
                    //icon: 'success',
                    image: '../../images/link.png',
                    duration: 2000
                  })
                }
              })
            }
          })
        }
        else {
    
          var slug = util.GetUrlFileName(href, domain);
          if (slug == 'index') {
            wx.switchTab({
              url: '../index/index'
            })
          }
          else {
    
            wx.request({
              url: Api.getPostBySlug(slug),
              success: function (res) {
                var postID = res.data[0].id;
                var openLinkCount = wx.getStorageSync('openLinkCount') || 0;
                if (openLinkCount > 4) {
                  wx.redirectTo({
                    url: '../detail/detail?id=' + postID
                  })
                }
                else {
                  wx.navigateTo({
                    url: '../detail/detail?id=' + postID
                  })
                  openLinkCount++;
                  wx.setStorageSync('openLinkCount', openLinkCount);
                }
              }
            });
    
          }
    
    
    
    
        }
    
      },
    
       //获取评论
      fetchCommentData: function (data) {
        var self = this;
    
        if (!data) data = {};
        if (!data.page) data.page = 1;
    
        if (data.page === 1) {
          self.setData({
            commentsList: []
          });
        };
        wx.request({
          url: Api.getCommentsSpecial(data),
    			success: function (response) {
            if (response.data.length < 6) {
              self.setData({
                isLastPage: true
              });
            }
            self.setData({
              commentsList: self.data.commentsList.concat(response.data.map(function (item) {
                var strSummary = util.removeHTML(item.content.rendered);
                var strdate = item.date
                item.summary = strSummary;
                item.date = util.formatDateTime(strdate);
                 if (item.author_url.indexOf('wx.qlogo.cn') !=-1 )
                {
                  if (item.author_url.indexOf('https') ==-1 )
                  {
                    item.author_url = item.author_url.replace("http", "https");
                  }
    
                  
                }
                else
                {
                   item.author_url ="../../images/gravatar.png";
                }
                
                return item;
               
              }))
              
              
            });
    
    
            wx.showToast({
              title: '加载中',
              icon: 'loading',
              mask: true,
              duration: 1000         
    
            })
            
          }
        });
      },
    
      //底部刷新
      loadMore: function (e) {
    
        var self = this;
        if (!self.data.isLastPage) {
          self.setData({
            page: self.data.page + 1
          });
          console.log('当前页' + self.data.page);
          this.fetchCommentData(self.data);
        }
        else {
          wx.showToast({
            title: '没有更多内容',
            mask: false,
            duration: 1000
          });
        }
      },
    
    
    
      onPullDownRefresh:function(){ //下拉刷新
        var self = this
        self.fetchCommentData()
         wx.showToast({
          title: '刷新数据中',
          icon: 'loading',
    	  duration: 2000
        })
        self.setData({
          page:1,
          commentsList: []
        })
    	wx.stopPullDownRefresh()
      },
    
    
    
      donghua: function(topNum) // 发帖按钮动画
      {
        var self = this
        var animation = wx.createAnimation({
            duration: 400,
            timingFunction: 'linear',
            delay:0,
        })
    
        var animation1 = wx.createAnimation({
            duration: 400,
            timingFunction: 'linear',
            delay:0,
        })
    
        animation.opacity(0).translateY(topNum + 5).step()
        animation1.opacity(0).translateY(topNum + 5).step()
    
        self.setData({
          animationData1:animation.export(),
          animationData2:animation1.export()
        })
    
        setTimeout(function(){
          animation.opacity(1).step()
          animation1.opacity(1).step()
    
          self.setData({
            animationData1:animation.export(),
            animationData2:animation1.export()
          })
        },1500)   
      },
      
    
    
      bindAdd: function(){// 跳转发帖界面
        var self = this
        // 发帖
        wx.showActionSheet({
          itemList: ['发布'],
          success: function(res) 
          {
            if (!res.cancel) 
            {
              console.log(res.tapIndex)
    
              if(res.tapIndex == 0)
              {
                wx.redirectTo({
                  url: '../../pages/fatie/fatie' 
                })
              }    
            }
          }
        })
      },
    
    })
    
    

    代码的第92行,我直接设置了当前文章的ID为1234,与api.js里设置保持一致。代码实现了下拉刷新和点击尾部链接加载更多帖子的功能。

  7. pages/quanzi/quanzi.wxml代码如下:
  8. <import src="../../wxParse/wxParse.wxml" />
    <view>
    	<!--右上角发布小图标-->
    	<view class="float-action" bindtap="bindAdd" style="opacity: {{ballOpacity}};bottom:{{ballBottom}}px;right:{{ballRight}}px;" style="display:{{floatDisplay}}">
    	<image src="../../images/add.png"></image>
    	</view> 
    	<!--背景小图标-->
    	<view class="bg">
    	  <image class="baseimg" src="../../images/bg.jpg" mode="scaleToFill"></image>
    	</view>
    	<!--背景图底部大头像-->
    	<view class="headimg">
    	  <image class="baseimg" wx:if="{{userInfo['avatarUrl']}}" src="{{userInfo['avatarUrl']}}" mode="scaleToFill"></image>
    	</view>
    	<!--背景图底部昵称-->
    	<view class="nickname">
    	<text>{{userInfo['nickName']}}</text>
    	</view>
    	<!--占位行-->
    	<view class="lie"></view>
    
    	<view class="showerror" style="display:{{showerror}}">
    	<image src="../../images/cry80.png" style="height:100rpx;width:100rpx"></image>
    	<view class="errortext">
    	  暂时无法访问网络,刷新重试...
    	</view>
    	</view>
    
    	<view style="display:{{showallDisplay}}">
    		<!--循环展示/Start-->
    		<view class="content" wx:key="id" wx:for="{{commentsList}}">
    			<!--头像-->
    			<view class="head">
    				<image class="baseimg"  src="{{item.author_url}}" mode="scaleToFill"></image>
    			</view>
    			<!--昵称-->
    			<text class="wz">{{item.author_name}} </text>
    			<!--内容-->
    			<rich-text class="desc" nodes="{{item.content.rendered}}"></rich-text>
    			<!--发布时间-->
    			<text class="time">{{item.date}}</text> 
    		</view>
    	</view>
    
    
    	<view style="display:{{floatDisplay}}">
    		<view  class="more-comment"  bindtap="loadMore" hidden="{{isLastPage}}">
    			点击加载更多信息...   
    		</view>
    		<view class="no-more-comment" hidden="{{!isLastPage}}">无更多信息...</view>
      </view>
    
    
    	<view class="copyright">
    		© www.domain.com
    	</view>
    
    </view>
    

    代码第39行,我用了微信原生的rich-text来解析发帖者提交的信息,并未采用wxParse,这样做简单些。待会儿在fatie.js里你会看到我直接把帖子内容固定了一段html语句,提交给quanzi.js的rich-text来解析。

  9. 打开quanzi.json,在{}里加上一句
  10. "enablePullDownRefresh":true

    让页面下拉刷新生效。

  11. 下面提供quanzi.wxss样式代码:
  12. @import "../../wxParse/wxParse.wxss";
    
     .box
     {
      /*border:2px solid #576b95;*/
      /*height:100%;*/
     }
    
    .float-action {
      position: fixed;
      top: 70rpx;
      right: 50rpx;
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
      box-shadow: 2px 2px 10px #aaa;
      z-index: 100;
      /*background-color:transparent;*/
    	background-color:#04be02;
    }
    
    .float-action image{
      width:320px;
      height:240px;
      display:inline;
    }
    
    .entry-summary image {
      width: 100% !important;
    }
    
    .textNoEmpty {
      color: red;
    }
    
    .gravatarImg {
      margin-top: 4px;
      border-radius: 50%;
      opacity: 1;
      transform: scale(1);
      perspective-origin: top center;
      transition: all ease-in-out 0.3s;
      height: 48rpx;
      width: 48rpx;
    }
    
     .baseimg
     {
       width:100%;
       height:100%;
       
     }
    
     .oneImg
     {
       width:auto;
       height:auto;
       /*margin-left:100rpx;*/
       overflow:hidden;
     }
    
     .images-image {
      width: 150rpx;
      height: 150rpx;
      margin: 10rpx;
    }
    
     .bg
     {
       height: 400rpx;
       /*background: red;*/
       overflow:hidden;
     }
    
     .headimg
     {
       width: 150rpx;
       height: 150rpx;
       position:absolute;
       border: 2px solid #fff;
       margin-top: -100rpx;
       margin-left: 570rpx;
       overflow:hidden;
     }
    
     .nickname
     {
       width:400rpx;
       text-align: right;
       position:absolute;
       color:#fff;
       margin-top: -70rpx;
       margin-left: 150rpx; 
       font-size:14pt;
       font-weight:600;
       /*border:1px solid red;*/
       
     }
    
     .lie
     {
       /*border: 1px solid #ccc;*/
       margin-top: 100rpx;
       flex-direction: column;
     }
    
     .content
     {
        border-bottom:1px solid #F5F5F5;
        display:flex;
        flex-direction: column;
        padding-bottom:20rpx;
     }
    
     .head
     {
       width: 80rpx;
       height: 80rpx;
       /*background: darkcyan;*/
       margin-top:20rpx;
       margin-left:20rpx;
       overflow:hidden;
     }
    
     .wz
     {
       margin-top:-80rpx;
       margin-left:120rpx;
       font-size:10pt;
       color:#576b95;
     }
    
     .desc
     {
       margin-top:20rpx;
       margin-left:120rpx;
       margin-right:20rpx;
       font-size:10pt;
     }
    
    .descrich{
       margin-top:20rpx;
       margin-left:120rpx;
       margin-right:20rpx;
       font-size:10pt;
     }
    
    .descrich image{
        height: 150rpx;
        width: 30%;
        max-height: 150rpx;
        max-width: 150rpx;
        padding-right: 5px;
        object-fit: cover;
     }
    
     .address
     {
       margin-top:20rpx;
       height:30rpx;
       font-size:10pt;
       color:#576b95;
       margin-left:120rpx;
       margin-bottom:20rpx;
       width:600rpx;
     }
    
     .time
     {
      margin-top:20rpx;
       
       height:30rpx;
       font-size:8pt;
       color:#ccc;
       margin-left:120rpx;
     }
    
     .dele
     {
       margin-top:20rpx;
       width:80rpx;
       height:30rpx;
       font-size:10pt;
       color:#576b95;
        margin-top:-28rpx;
        margin-left:270rpx;
     }
    
     .biao
     {
       width: 50rpx;
       height:40rpx;
       overflow:hidden;
       margin-top:-32rpx;
       margin-left:680rpx;
       margin-bottom:20rpx;
     }
    
    .more-comment {
      color:  #04be02;
      font-size: 30rpx;
      line-height: 1.8rem;
      margin-bottom: 50rpx;
      text-align: center;
      margin-top: 30rpx
    }
    
    .no-more-comment {
      color: #757575;
      font-size: 30rpx;
      line-height: 1.8rem;
      margin-bottom: 100rpx;
      text-align: center;
      margin-top: 30rpx
    }
    
    .copyright{
      text-align: center;
      margin: 30px;
      font-size: 28rpx;
      color: #ccc;
      margin-bottom: 120rpx;
    }
    
  13. 圈子(帖子列表)这个页面弄好了,现在,来到发帖界面,这其实就是一个表单,表单数据按照wordpress评论的json数据格式提供给fatie.js,再用wx.request的方法post到数据库里,然后在再用quanzi.js里的wx.request的方法get出来,输出到quanzi.wxml展示,嗯,原理就是这么个意思。
  14. 下面,上代码,fatie.js

    var Api = require('../../utils/api.js');
    var util = require('../../utils/util.js');
    var WxParse = require('../../wxParse/wxParse.js');
    var bmap = require('../../libs/bmap-wx/bmap-wx.min.js');
    var wxMarkerData = [];  //定位成功回调对象  
    var app = getApp()
    
    Page({
      data: {
        ak: "", //填写从百度申请到的ak
        markers: [],
        longitude: '',   //经度  
        latitude: '',    //纬度  
        address: '',     //地址  
        cityInfo: {},    //城市信息  
    
        date: '请点击选择服务时间',
    		pickerHidden: true,
        chosen: '',
    
        title: '文章内容',
        detail: {},
        commentsList:{},
        commentCount:'',
        detailDate:'',
       
        wxParseData:[],
        display:'none',
        page: 1,
        isLastPage:false,
    
        postID:null,
        scrollHeight: 0,
    
        isGetUserInfo:false,
    
        dialog: {
          title: '',
          content: '',
          hidden: true
        },
        content:'',
        userInfo:[],
    
        imageObject:[],
        imagescontents:[],
        tempFilePaths:[],
      },
    
      //页面载入
      onLoad: function (options) {
        this.fetchDetailData(options.id);
        var self = this;
        wx.getSystemInfo({
          
          success: function (res) {
            //console.info(res.windowHeight);
            self.setData({
              scrollHeight: res.windowHeight,
              
            });
          }
        });
    
        //获取用户信息
        app.getUserInfo(function (userInfo) {
          //更新数据
          self.setData({
            userInfo: userInfo,
            isGetUserInfo:true
          })
        });
    
        /* 获取定位地理位置 */
        // 新建bmap对象   
        var BMap = new bmap.BMapWX({
          ak: self.data.ak
        });
        var fail = function (data) {
          console.log(data);
        };
        var success = function (data) {
          //返回数据内,已经包含经纬度  
          console.log(data);
          //使用wxMarkerData获取数据  
          wxMarkerData = data.wxMarkerData;
          //把所有数据放在初始化data内  
          self.setData({
            markers: wxMarkerData,
            latitude: wxMarkerData[0].latitude,
            longitude: wxMarkerData[0].longitude,
            address: wxMarkerData[0].address,
            cityInfo: data.originalData.result.addressComponent
          });
        }
        // 发起regeocoding检索请求   
        BMap.regeocoding({
          fail: fail,
          success: success
        });  
        
      },
    
    
    
    
      //获取页面内容
      fetchDetailData: function () {
        var self = this;
       
      },
    
    
     
      //底部刷新
      loadMore: function (e) {
    
        var self = this;
        if (!self.data.isLastPage) {
          self.setData({
            page: self.data.page + 1
          });
          console.log('当前页' + self.data.page);
          this.fetchCommentData(self.data);
        }
        else {
          wx.showToast({
            title: '没有更多内容',
            mask: false,
            duration: 1000
          });
        }
      },
    
    
    
      //发布话题
      formSubmit: function (e) { 
    		var address = this.data.address;
        var self = this;   
        var name = self.data.userInfo.nickName;
        var email = "test@test.com";
        var comment = e.detail.value.inputComment;
        var author_url =  self.data.userInfo.avatarUrl;
    
        var images = new Array();
        //console.log(auth);
        wx.hideLoading();
    
    
        //var postID = e.detail.value.inputPostID;
    	if (comment.length===0 )
        {
          self.setData({
            'dialog.hidden': false,
            'dialog.title': '提示',
            'dialog.content': '没有填写内容。'
    
          });
    
        }
        else
        {
    
    	  //检测授权
          //self.checkSettingStatu();
    
          if (self.data.isGetUserInfo)
          {
            wx.request({
              url: 'https://www.domain.com/api/respond/submit_comment/?post_id=1234',
    					method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
    
              data: {
    						name: name,
                email: email,
    						content: comment+'<blockquote>本信息发自:</blockquote><blockquote>@'+address+'</blockquote>',
    						url: author_url,
              },
              header: {
                'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
              },
              success: function (res) {
    			wx.showToast({
    			  title: '已发布',
    			  icon: 'success',
    			  duration: 2000
    			});
    			wx.switchTab({
    			  url: '../quanzi/quanzi'
    			});
              },
              fail: function (res) {
                //console.log(res.data) 
    			                self.setData({
                      'dialog.hidden': false,
                      'dialog.title': '提示',
                      'dialog.content': '发布失败,' + res.data.message
                    });
              }
            });
    
           }
        }
       
      },
    
     
      // 检测授权状态
      checkSettingStatu: function (cb) {
        var that = this;
        // 判断是否是第一次授权,非第一次授权且授权失败则进行提醒
        wx.getSetting({
          success: function success(res) {
            console.log(res.authSetting);
            var authSetting = res.authSetting;
            if (util.isEmptyObject(authSetting)) {
              console.log('首次授权');
            } else {
              console.log('不是第一次授权', authSetting);
              // 没有授权的提醒
              if (authSetting['scope.userInfo'] === false) {
                wx.showModal({
                  title: '用户未授权',
                  content: '如需正常使用评论的功能,请授权管理中选中“用户信息”,然后点按确定后再次提交评论。',
                  showCancel: false,
                  success: function (res) {
                    if (res.confirm) {
                      console.log('用户点击确定')
                      wx.openSetting({
                        success: function success(res) {
                          console.log('openSetting success', res.authSetting);
                          var as = res.authSetting;
                          for (var i in as) {
                            
                            if(as[i])
                            {
                              //获取用户信息
                              app.getUserInfo(function (userInfo)                             {
                                //更新数据
                                that.setData({
                                  userInfo: userInfo,
                                  isGetUserInfo: true
                                })
                              });
                            }
                            
                          }                     
    
                        }
                      });
                    }
                  }
                })
              }
            }
          }
        });
      },
    
    
    
      confirm: function () {
        this.setData({
          'dialog.hidden': true,
          'dialog.title': '',
          'dialog.content': ''
        })
      },
    
    
      modalChange: function(e) {
        this.setData({
          modalHidden: true
        })
      }
    
    })
    

    关于调用百度地图API进行地址定位的js代码点击这里下载:http://lbsyun.baidu.com/index.php?title=wxjsapi/wxjs-download,按照代码第4行设定的路径放置好就可以了。然后,你需要到百度开放平台http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key申请一个应用,并为这个应用获取一个ak,填入上述代码第10行,代码的第171行设置了文章的ID,这也需要与utils/app.js中的设置保持一致。

  15. 下面是fatie.wxml,这个简单,做一个表单就行了:
  16. <view class="container"> 
    <scroll-view style="height:{{scrollHeight}}px;" scroll-y="true" lower-threshold="100rpx">
    	  <view class="page__hd">
    	    <text class="page__title">发布信息</text>
    	  </view>
    <form class="page__bd" report-submit="true" catchsubmit="formSubmit" catchreset="formReset">
    
    	<view class="section">
    	<textarea name="inputComment" placeholder-style="color:#1199ed;" placeholder="请在这里输入内容..." />
    	</view>
    
    	<view class="on-line-20"></view>
    
    	<view class="location">
    		<image src="../../images/fujin.png"></image>
    		<text>{{address}}</text>
    	</view>
    
    	<view class="on-line-1"></view>
    
    	<view class="btn-area">
    	  <button hover-class="submitbutton-hover" class="submitbutton" formType="submit">发布</button>
    	</view>
    
    <view class="on-line-1"></view>
    
    	<view class="btn-area">
    	<navigator url="/pages/quanzi/quanzi" open-type ="switchTab">
    	  <button>返回</button>
    	</navigator>
    	</view>
    
    </form>
    
    <view class="copyright">© www.domain.com</view>
      
    </scroll-view>
    
    </view>
    
  17. fatie.wxss样式表如下:
  18. wx-label {
      display: block;
      margin-top: 10rpx;
      margin-left: 15rpx;
    }
    .section__title{
      font-size: 30rpx;
      margin-bottom: 30rpx;
      font-weight: bold;
    }
    .page {
        min-height: 100%;
        flex: 1;
        background-color: #FBF9FE;
        font-size: 32rpx;
        font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
        overflow: hidden;
    }
    .page__hd{
        padding: 20rpx 50rpx 50rpx 50rpx;
        text-align: center;
    }
    .page__title{
        display: inline-block;
        padding: 20rpx 40rpx;
        font-size: 48rpx;
        color: #AAAAAA;
        border-bottom: 1px solid #CCCCCC;
    }
    .page__desc{
        display: none;
        margin-top: 20rpx;
        font-size: 26rpx;
        color: #BBBBBB;
    }
    
    .section{
        margin-bottom: 80rpx;
    }
    .section_gap{
        padding: 0 30rpx;
    }
    .section__title{
        margin-bottom: 16rpx;
        padding-left: 30rpx;
        padding-right: 30rpx;
    }
    .section_gap .section__title{
        padding-left: 0;
        padding-right: 0;
    }
    
    .text-view{
    padding: 20rpx;
    height: 300rpx;
    }
    
    .on-line-20{
      height: 20rpx; background: #f4f4f4; 
    }
    
    .on-line-50{
      height: 50rpx; background: #f4f4f4; 
     
    }
    .on-line-1{
      margin-top: 20rpx;
      height: 1px; background: #eee; 
    }
    
    .location image{
    width:40rpx;
    height:40rpx;
    padding-left: 20rpx;
    padding-top:20rpx;
    
    }
    
    .btn-area{
        padding: 0 30px;
    }
    
    .btn-area button{
        margin-top: 20rpx;
        margin-bottom: 20rpx;
    }
    
    .submitbutton-hover {
      background-color: #81CBFA;
      opacity: 0.7;
    }
    
    .submitbutton {
      flex: 2rpx;
      border: none !important;
      color: #fff !important;
      background-color: #1199ed
    }
    
    .copyright{
      text-align: center;
      margin: 30px;
      font-size: 28rpx;
      color: #ccc;
    }
    
  19. fatie.json无需设置,留空即可。

最后,把代码中引用的图片放置在images文件夹下,打开微信小程序调试工具,你就可以开始测试发帖了,图片点击下方链接下载:
add.png http://ws1.sinaimg.cn/large/006mIDfnly1fl6ad5ykp3j30ad0addfl.jpg 透明图,不要打开后以为不存在哦,点屏幕左上角下载,下载后还原文件名为 add.png(扩展名也要还原)
fujin.png http://ws1.sinaimg.cn/large/006mIDfnly1fl6aeelwbkj303k03kmwy.jpg 下载后还原文件名为 fujin.png(扩展名也要还原)
bg.jpg http://ws1.sinaimg.cn/large/006mIDfnly1fl6af2jx0nj30ax065410.jpg 下载后还原文件名为 bg.jpg

发表评论

电子邮件地址不会被公开。 必填项已用*标注