昨晚22点突然想把我9月份做的什么都不像的《新觉小屋》小程序改一改,这是以前的样子:

甚至连详情页都不支持(/捂脸)

代码实现

Githubhttps://github.com/XinRoom/task/tree/master/weixin-mini-program

思路说明:

小程序代码:涉及到两个页面all(首页)和post(详情页)

all(首页)<view class='act' wx:for="{{array}}" data-id="{{item.pid}}" bindtap="tapNameo">
用view渲染,wx:for循环,bindtap为点击事件,data-id用来给post页面传递文章id。

对于js,定义空数组arraydata: {array: []},onLoad事件触发wx.request请求json.php;tapNameo事件传达idevent.currentTarget.dataset.id并跳转到详情页wx.navigateTo

>参考开发者文档:view-forbindtap、data-id为自定义数据。

post(详情页)<view class='act'><rich-text nodes="{{arrayo.body}}"></rich-text></view>
使用rich-text渲染。

对于js,定义空数组arrayodata: {arrayo: []},onLoad事件wx.request请求post.php

>参考开发者文档:rich-text

web-php代码:涉及到两个文件json.php(首页)和post.php(详情页)

json.php(首页):涉及wordpress的要引入

$wp_did_header = true;
require_once( '/..../wp-load.php' );
wp();
require_once( '/....../wp-includes/template-loader.php' );

然后构造json数据使用query_posts()方式查询文章,使用方式可参考:query_posts

post.php(详情页):思路和上一个同理,只是增加了个$_GET['id']

关键性问题(json的构造):

这里起重要作用的有两个函数str_replacestrip_tags。strip_tags是用来过滤html标签的,str_replace是用来替换字符的,它们的目的就是替换掉影响json结构的字符。

对于首页我们还需要mb_substr来截取长度,详细使用直接看我的代码。

对于详情页strip_tags是要保留一些小程序能识别的HTML的,见rich-text。除此之外,因为小程序不能直接对rich-text中的html节点进行style样式,只能对class进行定义,所以我们需要按一定的顺序对相应的html节点用str_replace替换来达到相应增加class的目的,相应的调试就需要根据自己的需要来处理了。

ps:话说周末微信审核是不是要慢一点?还是说,只有工作日才审核

其实用wordpress的rest接口更简单,但我就是不想太多的用现成的~

此思路在其它平台上一样!

更新于:2017-12-16