API接口开发:开发实例
小程序模块内容列表数据调用
调用模块内容数据在小程序页面中显示,用到的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; }
小程序模块内容详情页面数据调用
调用模块内容数据在小程序页面中显示,用到的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; }
小程序自动授权登录
微信插件后台需要开启自动登录模式
会员登录代码示例:
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 == "") { // 未登录跳转登录界面,这里写登录代码 } // 登录代码结束 },
这样在进入小程序时就会自动登录账号!