找不到帮助文档?你想要哪方面的帮助教程?提交文档建议 >

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

更新时间:2020-11-26 加入收藏
0

image

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

/index.php?appid=[授权ID]&appsecret=[授权码]&s=[模块目录]&c=show&id=内容id号动态传入


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.xxxxx.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 小程序模板代码为:

<view class="view-postion">
<view class="news-title">
  {{content.title}}
 <view>
 <text class="news-ctime">{{content.inputtime}}</text>
 <text class="news-local">{{content.cat.name}}</text>
 <text class="news-count">浏览{{content.hits}}次</text>
 </view>
</view>

<view class="news-zw">

    <import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:data.nodes}}" />
</view>
</view>


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;
}


--
有帮助
--
没帮助
0
收藏
0
打赏
相关文档
Hello,欢迎来咨询~
点击在线咨询