小程序模块内容详情页面数据调用,开发实例,PHP开源CMS系统帮助文档

业务经理

微信扫描以上二维码

028-61286886

技术咨询

API接口开发

小程序模块内容详情页面数据调用

创建时间：2020-07-10 13:03:32 更新时间：2020-08-24 11:27:26 文档纠错/我来修改此文档（1）

调用模块内容数据在小程序页面中显示，用到的api接口是：

pages\news\show.js 文件中请求小程序的代码

var WxParse = require('../../wxParse/wxParse.js'); // 这个是用来解析文章内容中的标签的

var app = getApp();

Page({
  data:{
      id:'',
      content:'',
      supports: 0,
      upsImg:"../../icons/ups.png",
      collectImg:"../../icons/collect.png",
  },
  onLoad:function(options){

app.showModel();
      var self=this;
      wx.request({
        url: "http://www.pcms.com/index.php?appid=2&appsecret=PHPCMF9BF840CB2139F&s=news&c=show",
        data: {
          id:options.id
        },
        header: {
          'content-type': 'application/json'
        },
        dataType:'json',
        method: 'GET', 
        success: function(res){

if (res.data.code == 1) {
               
                // 格式化文章内容
                var article = res.data.data.content;

WxParse.wxParse('data', 'html', article, self);

self.setData({
                    content:res.data.data,
                    supports: res.data.data.support,
                    id: options.id
                })
                wx.hideToast();
            } else {
              wx.showModal({
                showCancel: false,
                content: res.data.msg
              })
            }

}
      })
  },

})

这个请求代码表示请求后台news模块的内容数据

pages\news\show.wxml 小程序模板代码为：

pages\news\show.wxss

page{
    height: 100%;
}
.news-title{
    background: white;
    padding: 40rpx 0;
    margin: 0 30rpx;  
    border-bottom: 1px solid #e0e0e0;
    font-size: 38rpx;
}
.news-title text{
   font-size: 28rpx;
   margin-right: 20rpx;
   color: #888;
}

.news-title text.news-local{
    color: #389fcf;
}
.news-zw{
    padding: 40rpx 30rpx 30rpx 30rpx;
    background: white;
}

image.news-cimg{
    width: 690rpx;
    height: 260rpx;
}
.content-indent{
   text-indent: 2em;
   font-size: 26rpx;
   margin-top: 20rpx;
   line-height: 50rpx;
}
.ds-flex{
    margin: 100rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ds-flex image{
    width: 242rpx;
    height: 123rpx;
}

.view-postion{
  padding-bottom: 100rpx;
}
.pl-bar{
      display: flex;
      width: 100%;
      height: 100rpx;
       background-color: #f5f5f5;
       position: fixed;
       bottom:0;
       align-items: center;
}
.pl-bar image{
    width: 41rpx;
    height: 41rpx;
    margin-left: 40rpx;
} 
.isay{
 margin-left: 30rpx;
 height: 55rpx;
 line-height: 55rpx;
 width: 330rpx;
 border: 1px solid #c9c9c9;
 border-radius: 10rpx;
 font-size: 25rpx;
 text-indent: 20rpx;
}

.pl-flex{
    display: flex;
    align-items: center;
}
.conut-22{
    font-size: 22rpx;
    color: black;
    display: inline-block;
    margin-left: 12rpx;
}

.pl-bottom {
    margin-top:30rpx;
}

本文地址：https://www.xunruicms.com/doc/985.html

文档修改：文档有误、不完善、我来提醒官方修改此文档（1）

帮助文档

开发入门

API接口

开发实例

小程序模块内容详情页面数据调用