API接口开发:开发实例

小程序模块内容列表数据调用

image

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

/index.php?appid=[APPID]&appsecret=[appsecret]&s=[模块目录]&c=search&pagesize=10&page=1&api_call_function=module_search_news_lis


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

var app=getApp();//获取appid

Page({

    /**
     * 页面的初始数据
     */
    data: {

        listData:[],
        hidden: true,
        page: 1,
        hasMore:"false"
    },

    onLoad:function(options){
        
        // 请求服务器数据
        var self=this;
        wx.request({
            url: "http://www.pcms.com/index.php?appid=2&appsecret=PHPCMF9BF840CB2139F&s=news&c=search&pagesize=10&api_call_function=module_search_news_list",
            method: 'GET',
            success: function(res){
             
                console.log(res.data);
                if (res.data.code == 1) {
                    self.setData({
                        listData:res.data.data,
                        page: 1
                    });
                } else {
                    console.log(res.data.msg);
                    
                }

            }

        })
    },
    onReachBottom:function(){
        // 绑定分页操作
        this.setData({hidden:false});
        var self=this;
        var pageid = self.data.page + 1;

        wx.request({
            url: "http://www.pcms.com/index.php?appid=2&appsecret=PHPCMF9BF840CB2139F&s=news&c=search&pagesize=10&api_call_function=module_search_news_list",
            method: 'GET',
            data: {
                page: pageid
            },

            success: function(res){

                if (res.data.code == 1) {
                    if(res.data.data.length==0){
                        self.setData({
                            hasMore:"true",
                            hidden:false
                        });
                        setTimeout(function(){
                            self.setData({
                                hasMore:"false",
                                hidden:true
                            });
                        },900)
                    }else{
                        self.setData({
                            listData:res.data.data,
                            hidden:true,
                            page:pageid
                        });
                    }
                } else {
                    console.log(res.data.msg);
                }

            }
        })
    }

})

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


pages\news\list.wxml 小程序模板代码为:



   
   
     
     
             
             {{news.title}}
                        
           
                {{news.inputtime}}
                
                  
                  
                  {{news.hits}}
                  
                  
                  
                  {{news.comments}}
                  
                
            
     
   
   
   



 正在加载....
没有更多数据了....


pages\news\list.wxss

.index-banner{
    width: 100%;
    height: 285rpx;
   
}
.index-banner image{
    width: 100%;
    height: 100%;
}

.fast-news{
   padding: 30rpx 30rpx 30rpx 30rpx;
   display: flex;
   border-bottom: 1px solid #eeeeee;
}
.red-sub{
    width: 80rpx;
    height: 34rpx;
    background-color: #ff402e;
    color: white;
    font-size: 28rpx;
    text-align: center;
    line-height: 34rpx;
    border-radius: 2rpx;
}
.kx-title{
    font-size: 32rpx;
   margin-left: 20rpx;
}
.news-item{
    width: 100%;

}
.news-view{
     padding: 30rpx 0 30rpx 0;
       display: flex;
        border-bottom: 1px solid #eeeeee;
        margin: 0 30rpx 0 30rpx;
}
.news-view image{
     width: 241rpx;
     height: 148rpx;
}
.news-content{
    margin-left: 20rpx;
    width: 100%;
}
.news-title{

    line-height: 45rpx;
    overflow: hidden;
   font-size: 28rpx;
   padding-bottom: 30rpx;
}

.news-hot{
    box-sizing: border-box;
    border: 1px solid #ff402e;
     width: 80rpx;
     height:40rpx;
     line-height: 40rpx;
     text-align: center;
     font-size: 13rpx;
     color: #ff402e;
     margin-left: 10rpx;
}

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


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

image

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

/index.php?appid=[APPID]&appsecret=[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.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 小程序模板代码为:



  {{content.title}}
 
 {{content.inputtime}}
 {{content.cat.name}}
 浏览{{content.hits}}次
 




    



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



小程序自动授权登录

微信插件后台需要开启自动登录模式

{xunruicms_img_title}


会员登录代码示例:

wx.login({
    success: function (res) {
        console.log(res);
        if (res.code) {
            wx.getUserInfo({
                success: function (userRes) {


                    //发起网络请求D
                    wx.request({
                        url: "http://www.xr.com/index.php?appid=11111&appsecret=11111111&s=weixin&c=member&m=xcx",
                        data: {
                            json: userRes.rawData,
                            js_code: res.code
                        },
                        method: 'post',
                        header: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        success: function (res) {
                            console.log(res.data);
                            if (res.data.code) {
                                if (res.data.msg == 'login') {
                                    // 登录成功
                                    console.log("登录成功了");
                                    wx.setStorageSync('member_uid', res.data.data.member.id);
                                    wx.setStorageSync('member_auth', res.data.data.auth);
                                    wx.setStorageSync('member', res.data.data.member);

                                    wx.showToast({
                                        title: "登录成功",
                                        icon: 'success',
                                        success: function () {
                                            // 跳转新页面
                                            //wx.reLaunch({ url: "../member/index" });
                                        }
                                    })

                                } else {
                                    // 绑定账号注册
                                    wx.showModal({
                                        showCancel: false,
                                        content: "宸逸cms后台微信插件中需要开启直接登录模式"
                                    })
                                }
                            } else {
                                // 失败了
                                wx.showModal({
                                    showCancel: false,
                                    content: res.data.msg
                                })
                            }
                        }
                    });


                }
            });
        } else {
            console.log('登录失败:' + res.errMsg)
        }
    }
});


把上面代码放到小程序页面js里面

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {

    // 登录代码开始
    var member = wx.getStorageSync('member');
    //console.log(member);
    if (member == "") {
        // 未登录跳转登录界面,这里写登录代码
        
    }
    // 登录代码结束


},


这样在进入小程序时就会自动登录账号!