用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

天下雪 2017-2-7 14:54

作者为本站会员ayuLiao,作者博客地址为http://lmwen.top/本文上一篇为:http://www.wxapp-union.com/portal.php?mod=viewaid=1298,请先读第一篇,再读本帖动手实现文章列表本篇文章接着上一篇文章的节奏来实现月经 ...

作者为本站会员ayuLiao,作者博客地址为http://lmwen.top/ 
本文上一篇为:http://www.wxapp-union.com/portal.php?mod=view&aid=1298,请先读第一篇,再读本帖

动手实现文章列表

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

这就界面最外层是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

鲜花
鲜花
鸡蛋
鸡蛋 (1)

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
来自: ayu

相关阅读

推荐阅读

    最新Demo