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

 0 0条评论

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

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

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

本文作者:双黑

版权声明:本站文章欢迎链接分享,禁止全文转载!

游客