我这个人兴趣广泛，但不够执着，做事儿就三天热情，当初搞微信小程序写了几天就扔那儿不管了，昨天看到读者留言说需要微信小程序的详情页代码我才想起来好像微信小程序没写完····。不管怎么说还是把这位读者的问题解答了，不就是个详情页嘛，一起来。
在做微信小程序之前我们先得知道，微信小程序里面是不能直接使用HTML、js的，不然直接报错。有些人可能会说那我用webview一下就搞定，很遗憾的告诉你，个人号没有使用webview的权限，尴尬不。为了解决HTML在微信小程序中显示的问题，有人做了一看插件来转换HTML代码，详情请看：微信小程序使用wxParse富文本解析组件解析显示HTML
使用wxParse插件为WordPress微信小程序制作详情页
详情页步骤
列表跳转详情页
在写列表页的时候，我们需要给列表绑定跳转事件，以便详情页获取对应的数据，绑定的跳转事件需要识别码，我这里使用WordPress的文章id作为跳转传参标识。
<view class="excerpt" wx:for="{{wpposts}}" data-id='{{item.id}}' bindtap='goto' wx:key="unique">
<image class="focus" src="{{item.thumbnailurl}}"/>
<view>
<view><text class="title">{{item.title.rendered}}</text></view>
<view><text class="note">{{item.excerpt.rendered}}</text></view>
<view class="meta"><text>{{item.date}}</text><text class="cag">wp建站</text></view>
</view>
</view>
bindtap属性值就是绑定事件名，data-id属性值就是文章id，下面看js代码。
goto: function (event){
console.log("id", event.currentTarget.dataset.id);
wx.navigateTo({
url: '../single/single?id=' + event.currentTarget.dataset.id
})
},
点击事件发生后可以通过事件currentTarget.dataset.id方法获取到点击控件上的data-id的值。然后通过微信内置方法跳转到详情页中。
详情页
详情页需要使用wxparse插件转换HTML代码，因此你需要先将该插件引入到你的项目中。
wxml布局代码：
<!--pages/single/single.wxml-->
<view class="continer">
<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>
wxss样式代码：
/* pages/single/single.wxss */ @import "/wxParse/wxParse.wxss"; @import "/wxParse/main.wxss";
直接引入wxparse插件的样式代码即可。
js代码就更简单了，只需要取得传递过来的id构造请求地址发起微信请求即可获取文章数据，然后通过wxparse插件绑定到对应的标签控件上即可。
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log("id",options.id);
var that = this;
wx.request({
url: 'https://你的域名/wp-json/wp/v2/posts/' + options.id,
data: {
},
header: {
'content-type': 'application/json'// 默认值
},
success(res) {
console.log(res.data)
WxParse.wxParse('article', 'html', res.data.content.rendered, that, 5);
}
})
},
请求地址使用的WordPress rest api，WordPress4.7之后版本自带这个功能，之前版本需要安装插件。
注意：请求域名必须存在于微信小程序后台的请求白名单中，否则会被微信服务阻断！
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/242415.html