最后只剩下关于页面了,此页面就非常简单了,数据绑定和文章详情页差不多,数据库里通过一个标识来获得页面的富媒体内容的。
由于数据库保存的是针对网页版本的关于我,所以在富媒体文本下面,再加上一下针对微信小程序的描述,添加了一个在线意见反馈和在线客服,可以通过button组件open-type方法来设置。的about.wxml代码如下:
<TopBanner></TopBanner>
<view class="container">
<rich-text nodes="{{content}}"></rich-text>
<view class="wxp">关于此小程序有啥建议也可以给我留言或者直接与客服对话。</view>
<view style="display: flex;justify-content: space-around;padding-bottom: 50rpx;"><button type="primary" size="mini" open-type="feedback">给我留言</button>
<button type="primary" size="mini" open-type="contact">在线客服</button>
</view>
</view>
其中客服需要在小程序微信后台里添加。
样式就更简单的,如下:
.wxp{
margin-bottom: 40rpx;
}
.wxh2{
color:#C24F4A;
padding:40rpx 0;
}
js代码也基本和detail.js差不多,就是少了互动。
import http from '../../utils/http'
Page({
/**
* 页面的初始数据
*/
data: {
content:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
http({
url:'/staticpage/router/about'
}).then((res)=>{
res.data.content = res.data.content.replace(/<img/g, '<img class=\"wximg\"')
res.data.content = res.data.content.replace(/<p>/g, '<p class=\"wxp\">')
res.data.content = res.data.content.replace(/<h2/g, '<h2 class=\"wxh2\"')
this.setData({
content:res.data.content
})
})
},
好了,至此我个人网站的小程序版本都制作完成了,先真机预览一下没有问题,再微信开发者工具中点击上传,之后去微信后台,提交审核即可,可能我得项目比较小,所以审核的时间非常快,30分钟分内就审核完成了。
如果之后有更新,再次上传,再次提交审核即可,非常方便,不用自己部署,大大节约了运维时间,这点给微信小程序点赞!