和我一起学习微信小程序(十三完)，关于页面

最后只剩下关于页面了，此页面就非常简单了，数据绑定和文章详情页差不多，数据库里通过一个标识来获得页面的富媒体内容的。

由于数据库保存的是针对网页版本的关于我，所以在富媒体文本下面，再加上一下针对微信小程序的描述，添加了一个在线意见反馈和在线客服，可以通过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分钟分内就审核完成了。

如果之后有更新，再次上传，再次提交审核即可，非常方便，不用自己部署，大大节约了运维时间，这点给微信小程序点赞！