小程序模板网

ayuLiao:做一个比较完整的微信小程序(二)

发布时间:2017-11-28 17:38 所属栏目:小程序开发教程

动手实现文章列表,本篇文章接着上一篇文章的节奏来实现月经小程序的文章列表,如图...

 
 
 

动手实现文章列表

本篇文章接着上一篇文章的节奏来实现月经小程序的文章列表,如图

这就界面最外层是scroll-view控件,使用该控件实现视图区域的滚动,当用户滚动到视图底部时,实现下拉刷新,从服务器中取出跟多的文章,在scroll-view控件中,一开始使用swiper控件实现顶部滑动,然后就是使用模板template来实现文章列表,具体代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!--bindscrolltolower下拉刷新-->
 <scroll-view style="height:{{scrollviewHeight}}px" bindscrolltolower="loadMore" scroll-y="true">
  <!--顶部轮幕-->
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" class="banners" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{banner}}">
      <swiper-item class="banner">
          <text class="banner-title">{{item.title}}</text>-->
        <image src="{{item.img}}" data-id="{{item.id}}" bindtap="bindViewTap" class="banner-image" width="100%" height="100%" />
        <text class="banner-title">{{item.title}}</text>-->
      </swiper-item>
    </block>
  </swiper>
  <!--顶部轮幕-->
  <!--文章列表模板-->
  <template name="itmes">
    <navigator url="../../pages/detail/detail?id={{id}}" hover-class="navigator-hover">
      <!--数据来自newsList,newsList中的key-value结构跟title、cTime一样-->
      <view class="news-item">
        <view class="news-item-left">
          <view class="news-item-title">{{title}}</view>
        </view>
        <view class="news-item-right">
          <image src="{{img}}" class="news-image" />
        </view>
      </view>
    </navigator>
  </template>
  <view class="news-item-container">
    <text class="sub-title">月经小知识</text>
    <!--循环输出列表-->
    <view  wx:for="{{newsList}}" >
      <!--引用上面定义的模板,...item是默认写法-->
      <template is="itmes" data="{{...item}}" />
    </view>
  </view>
</scroll-view>

 

无论是顶部的滚动区域还是文章列表,或者文章详情内容都是从服务器的数据库中取出来的,可以使用wx.request()方法获取指定url中的数据,如下用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
wx.request({
       url: 'http://localhost/index.php?s=/addon/Yuejin/Yuejin/getList',
       data: {
         limit:limit,
         lastid:lastid,
       },
       header: {
         'content-type': 'application/json'
       },
       success: function (res) {
         if(!res.data){
           return false
         }
         //更新数据
         that.setData({
           newsList: res.data
         })
        var len = res.data.length
         lastid = res.data[len-1].id;
      }
    })

 

data表示要传递给服务器的值,header表示数据包的格式,如果从服务器中获取数据成功就会回调success方法

接着看月经详情界面,该界面用于展示文章的详细内容,一部后台的文章内容都是富文本的格式,比如有个图片,文字加粗之类的,但是微信小程序的官方文档中并没有对如何使用富文本进行说明,也就是说,在微信小程序中只能显示文本,如果服务器传回来的是富文本,就会将相应的HTML代码也展示出来,但是上有政策下有对策,帅的人是不会被难倒的,我们使用wxParse这个第三方代码,它的代码在github上是开源的,地址如下https://github.com/icindy/wxParse

从github上下载下wxParse的代码后,将wxParse文件夹中的所有内容都复制到项目的根目录中,然后将样式文件wxParse.wxss引入到需要实现的wxss文件中,这里我将它引入到app.wxss,让项目全局都可以使用wxss中的样式

1
@import "/wxParse/wxParse.wxss";

 

然后在需要使用wxParse模板的wxml文件中引入模版文件wxParse.wxml,这里我们在文章详情页也就是detail.wxml中引入,然后通过template 来使用wxParse

1
2
3
4
5
6
7
8
9
10
11
12
<!--detail.wxml-->
<import src="../../wxParse/wxParse.wxml"/> 
<view class="container">
    <view class="art-header">
        <image src="{{info.img}}" class="art-img"/>
        <view class="art-title">{{info.title}}</view>
        <view class="art-source">{{info.cTime}}</view>
    </view>
    <view class="wxParse text_L">
        <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
    </view>
</view>

接着在对应的js文件中引入wxParse.js文件

1
2
//在使用的View中引入WxParse模块
var WxParse = require('../../wxParse/wxParse.js');

 

此时就可以使用wxParse来解析富文本了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
wx.request({
      url: 'http://localhost/index.php?s=/addon/Yuejin/Yuejin/getDetail',
      data: {
        //从lists.wxml的navigator中获得id
        id: options.id
      },
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        //更新数据
        that.setData({
          info: res.data
        })
        var article = res.data.content;
        /**
        * WxParse.wxParse(bindName , type, data, target,imagePadding)
        * 1.bindName绑定的数据名(必填)
        * 2.type可以为html或者md(必填)
        * 3.data为传入的具体数据(必填)
        * 4.target为Page对象,一般为this(必填)
        * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
        */
        WxParse.wxParse('article', 'html', article, that, 5);
      }
    })

 

这里要解析的富文本是从服务器中获得的文章内容,所以配合wx.request()来使用

微信小程序后端的搭建

前面的数据都是从服务器中获取的,这里我们不必从0开始编写一个内容管理后台,有很多开源的内容后台供我们使用,其实这样的后台同样可以使用博客系统、新闻网站之类的需求,这里我们使用weiPHP,weiPHP是一个开源的内容管理后台系统,基于oneThink,oneThink又基于Think PHP3.2

首先下载weiPHP,文末会提供下载地址,下载完后将它放在Apache的根目录,可以施工XAMPP快速安装服务器的环境,第一次进入weiPHP要进行相应的安装和设置


设置和安装成功后,就会提示成功

这样就拥有一个完整的内容管理后端了,该后端拥有前台和后台,是不是超级简单

接着通过刚刚设置的账号进入后台,点击插件管理,然后单击快速创建

然后根据提示填写内容,这里要注意的是标识名开头一定要大写,不然无法使用该插件,然后要记得勾选是否需要管理列表

这样就常见完插件了,点击安装则可,安装完后,可以进入前台,看我的应用中是否出现刚刚创建的插件,如果没有可以在系统设置列表中点击清理缓存,将缓存给清理掉,就会出现刚刚创建的插件了,点击进入该插件,如果没有报错就说明创建成功

如果出现下面的界面,说明在创建插件时,标识名开头没有大写

创建完插件后,就要创建归属于该插件的模型,点击系统—>模型管理—>新增,来添加一个新的模型

进入新增模型界面后,填写相应的内容,这里要注意模型名称要填写成归属插件的名称,模型标识要按照如下写法

1
2
AyuLiao--->ayu_liao
Ayuliao--->ayuliao

 

如果该模型所属插件处理开头字母大写外还有其他字母大写,就需要使用下划线分开,这是Think PHP3.2默认方式,而WeiPHP基于Think PHP3.2所以也有这种特性
然后在所属插件中选择刚刚创建的插件,如下图

创建完模型后,可以编辑该模型,直接点击模型名称进程相应模型编辑界面则可,然后选择字段编辑,为该模型添加一些字段,如下图为添加文章内容字段,因为文章要是富文本,所以使用字段类型为编辑器

模型字段的编辑除了基础编辑还有高级编辑,这里看到高级这个Tab,可以通过函数的形式自动完成字段内容的填写,这里使用WeiPHP内置的time函数,自动获得时间并添加到该字段上

添加完字段后,还不可以直接使用,这样前台是显示不出相应内容的,要再次进入编辑模型的界面,此次进入设计,然后编写列表定义,这些定义就是展示规则


这样使用了get_img_html()方法获得数据库中对应的图片,不然封面图就显示该图对应在数据库中的位置,这里还使用了time_format()方法,格式化时间

接着进入前台,点击一个例子这个插件,然后点击新增,添加相应的标题、内容和封面图

这样我们就完成了内容的创建

但是想要让微信小程序端获得相应的内容还需要在相应的php文件中编写代码,进入到我们创建的插件所对应的文件中,也就是weicms/Addons/AyuLiao/Controller文件夹下的AyuLiaoController.class.php文件

AyuLiaoController.class.php文件中的代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?php
namespace Addons\AyuLiao\Controller;
use Home\Controller\AddonsController;

class AyuLiaoController extends AddonsController{
function getList(){
		//设置连接超时时间,这里为永不超时
		set_time_limit(0);
		//用I函数来接收客户端发送过来的数据,默认为10
		//limit为一页显示的数量
		$limit = I('limit',4,'intval');
		//这一页最后一个item的id
		$lastid = I('lastid',0,'intval');
		//从哪个id开始找,找5个
		if($lastid > 0){
			$map['id'] = array('lt',$lastid);
		}
		//order从小到大,where从哪里开始查,order返回结果排序,field要查询的内容,limit一次查询多少条
		$list = M('ayu_liao')->where($map)->order('id desc')->field('id,title,img,cTime')->limit($limit)->select();
		//&表示引入它本身
		foreach($list as &$vo){
			//get_cover_url将图片转成url
			$vo['img'] = get_cover_url($vo['img']);
			$vo['cTime'] = time_format($vo['cTime']);
		}
		//ThinkPHP中的方法,将数据以JSON格式返回
		$this->ajaxReturn($list);
	}

	function getDetail(){
		$map['id'] = I('id',0,'intval');
		$info = M('ayu_liao')->where($map)->find();

		$info['img'] = get_cover_url($info['img']);
		$info['cTime'] = time_format($info['cTime']);

		// dump($info);
		$this->ajaxReturn($info);

	}
}

 

这样写了两个方法,分别是getlist()方法用于返回文章列表、getDetail()方法用于返回文章的具体内容

看到getlist()方法,在该方法中,首先通过set_time_limit()方法设置连接超时时间,这里设置为0,表示永不超时,然后通过I()函数来接收客户端发送的消息,,然后通过同M()方法来查询ayu_liao数据表

看看编写的方法成不成功,可以访问以下相应的url,获得对应的JSON数据就表示成功了

到这里,就编写完微信小程序-月经管理这个小项目了,你还可以添加一下代码来提升用户体验,比如获取后端数据时弹出正在加载的提示等等

项目的完整代码已经上传到github,地址如下
https://github.com/ayuLiao/weixin-calender

后端WeiPHP已经上传到百度云,内部还有该项目相应的代码,直接可以使用
http://pan.baidu.com/s/1c7XJky
密码为:帅B



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/17983.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询