示例代码

示例代码

利用天行数据开发微信小程序(附源码)

开发帮助宇天行 发表了文章 • 0 个评论 • 1622 次浏览 • 2018-01-31 12:59 • 来自相关话题

简要介绍一下开发前的准备:
1,访问https://mp.weixin.qq.com/注册小程序,按照页面提示填写基本设置信息并添加合法域名 






2,在微信公众平台-小程序,下载微信web开发者工具
3,在本微信号(天行云服务)对话框内输入“美女图集”下载本示例源码
4,打开微信web开发者工具,添加小程序项目,选择小程序源码所在的目录,在小程序后台基本设置里找到并输入小程序AppID
5,在天行数据中注册获得APIKEY







美女图集小程序源码实例:
 
下载源码后解压并打开pages/index.jsvar app = getApp() // 获取入口文件app的应用实例
Page({
data: {
items: ,
hidden: false,
loading: false,
// loadmorehidden:true,
plain: false
},
Tianapi: function () {
//打开天行数据
},
onItemClick: function (event) {
wx.previewImage({
current: event.currentTarget.dataset.url, // 当前显示图片的http链接
urls: [event.currentTarget.dataset.url] // 需要预览的图片http链接列表
})
},

onReachBottom: function () {
console.log('onLoad')
var that = this
that.setData({
hidden: false,
});
requestData(that, mCurrentPage + 1);
},

onLoad: function () {
//转发
wx.showShareMenu({
withShareTicket: true
})
console.log('onLoad')
var that = this
requestData(that, mCurrentPage + 1);
}

})

/**
* 定义几个数组用来存取item中的数据
*/

var mUrl = ;
var mDesc = ;
var mAuthor = ;
var mTimes = ;
var mTitles = ;
var mCurrentPage = 0;

/**
* 定义天行数据APIKEY
* *apikey请在https://www.tianapi.com中获得
*/

var apikey = '把你在天行数据获得的APIKEY替换到这里'

/**
* 请求数据
*/

function requestData(that, targetPage) {
wx.showToast({
title: '图片加载中',
icon: 'loading'
});
wx.request({
url: 'https://api.tianapi.com/meinv/',
data: {
key: apikey, //天行数据的APIKEY
num:10, //每次请求返回的数量
page: targetPage //翻页
},
header: {
"Content-Type": "application/json"
},
success: function (res) {
if (res == null ||
res.data == null ||
res.data.newslist == null ||
res.data.newslist.length <= 0) {

console.error(res.data.msg);
return;
}


for (var i = 0; i < res.data.newslist.length; i++)
bindData(res.data.newslist[i]);

[/i] var itemList = ;
for (var i = 0; i < mUrl.length; i++)
itemList.push({ url: mUrl, desc: mDesc, author: mAuthor, time: mTimes, title: mTitles });

that.setData({
items: itemList,
hidden: true,
});

mCurrentPage = targetPage;

wx.hideToast();
}
});
}

/**
* 绑定接口中返回的数据
*/

function bindData(itemData) {

var url = itemData.picUrl;
var desc = itemData.description;
var author = itemData.description;
var times = itemData.ctime;
var title = itemData.title;

mUrl.push(url);
mDesc.push(desc);
mAuthor.push(author);
mTimes.push(times);
mTitles.push("作者:" + author + " — " + title + " — " + times);
}表现层pages/index.wxml<!--index.wxml-->
<view>
<view bindtap="Tianapi" class="tupian">图片API由天行数据提供</view>
<view class= "card" wx:for = "{{items}}">
<view data-url="{{item.url}}" bindtap = "onItemClick">
<image class= "image" src="{{item.url}}"/>
<view class="title">{{item.title}}</view>
</view>
</view>
</view>样式pages/index.wxss/**index.wxss**/
.card {
border: 2px solid #ffffff;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 0px 3px 1px #cccccc;
margin: 8px 0;
position: relative;
}

.loadmore {
border: 0px solid #ffffff;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 0px 5px 1px #cccccc;
margin: 8px;
}

.image{
width:100%;
height:250px;
}

.title {
padding: 14px;
font-size: 10px;
font-family:"黑体-简";
color: #222;
}
.tupian{
position:fixed;
z-index:50;
box-sizing:border-box;
width:100%;
height:80rpx;
top:0;
font-size:28rpx;
line-height:80rpx;
margin: 0;
background-color:rgba(0, 0, 0, .3);
color:#fff;
opacity:0.80;
text-align:center;
}



历史一句话小程序接口调用示例:
pages/pitlishi.jsPage({
data:{
},

onShow: function () {
var that = this

//定义天行数据APIKEY(apikey请在https://www.tianapi.com中获得)
var apikey = ''
5
wx.request({
url: 'https://api.tianapi.com/txapi/pitlishi/', //天行数据历史一句话接口
data: {
key: apikey
},
success: function (res) {
console.log(res.data.code)
that.setData({
pitlishi: res.data.newslist[0].content
})
console.log(res.data.newslist[0].id)
},
fail: function (err) {
console.log(err)
}
})
}

})


pages/pitlishi.wxml<!--index.wxml-->
<view>
<view bindtap="Tianapi" class="pitlishi">{{pitlishi}}</view>
</view>


pages/pitlishi.wxss/**pitlishi.wxss**/

.pitlishi {
margin-top: 100rpx;
padding: 14px;
font-size: 14px;
font-family:"黑体-简";
color: #222;
}


6,点击编译,确认可以正常加载数据后点击右边的预览




 
7,在手机上测试无误后点击上传,在微信小程序后台代码管理提交审核,类型选择图片/视频。如果不需要全网上线,上传代码后在微信后台直接使用体验版就行了。






  查看全部
简要介绍一下开发前的准备:
1,访问https://mp.weixin.qq.com/注册小程序,按照页面提示填写基本设置信息并添加合法域名 

微信截图_20180131130442.png


2,在微信公众平台-小程序,下载微信web开发者工具
3,在本微信号(天行云服务)对话框内输入“美女图集”下载本示例源码
4,打开微信web开发者工具,添加小程序项目,选择小程序源码所在的目录,在小程序后台基本设置里找到并输入小程序AppID
5,在天行数据中注册获得APIKEY

微信截图_20180131131009.png



美女图集小程序源码实例:
 
下载源码后解压并打开pages/index.js
var app = getApp() // 获取入口文件app的应用实例
Page({
data: {
items: ,
hidden: false,
loading: false,
// loadmorehidden:true,
plain: false
},
Tianapi: function () {
//打开天行数据
},
onItemClick: function (event) {
wx.previewImage({
current: event.currentTarget.dataset.url, // 当前显示图片的http链接
urls: [event.currentTarget.dataset.url] // 需要预览的图片http链接列表
})
},

onReachBottom: function () {
console.log('onLoad')
var that = this
that.setData({
hidden: false,
});
requestData(that, mCurrentPage + 1);
},

onLoad: function () {
//转发
wx.showShareMenu({
withShareTicket: true
})
console.log('onLoad')
var that = this
requestData(that, mCurrentPage + 1);
}

})

/**
* 定义几个数组用来存取item中的数据
*/

var mUrl = ;
var mDesc = ;
var mAuthor = ;
var mTimes = ;
var mTitles = ;
var mCurrentPage = 0;

/**
* 定义天行数据APIKEY
* *apikey请在https://www.tianapi.com中获得
*/

var apikey = '把你在天行数据获得的APIKEY替换到这里'

/**
* 请求数据
*/

function requestData(that, targetPage) {
wx.showToast({
title: '图片加载中',
icon: 'loading'
});
wx.request({
url: 'https://api.tianapi.com/meinv/',
data: {
key: apikey, //天行数据的APIKEY
num:10, //每次请求返回的数量
page: targetPage //翻页
},
header: {
"Content-Type": "application/json"
},
success: function (res) {
if (res == null ||
res.data == null ||
res.data.newslist == null ||
res.data.newslist.length <= 0) {

console.error(res.data.msg);
return;
}


for (var i = 0; i < res.data.newslist.length; i++)
bindData(res.data.newslist[i]);

[/i] var itemList = ;
for (var i = 0; i < mUrl.length; i++)
itemList.push({ url: mUrl, desc: mDesc, author: mAuthor, time: mTimes, title: mTitles });

that.setData({
items: itemList,
hidden: true,
});

mCurrentPage = targetPage;

wx.hideToast();
}
});
}

/**
* 绑定接口中返回的数据
*/

function bindData(itemData) {

var url = itemData.picUrl;
var desc = itemData.description;
var author = itemData.description;
var times = itemData.ctime;
var title = itemData.title;

mUrl.push(url);
mDesc.push(desc);
mAuthor.push(author);
mTimes.push(times);
mTitles.push("作者:" + author + " — " + title + " — " + times);
}
表现层pages/index.wxml
<!--index.wxml-->
<view>
<view bindtap="Tianapi" class="tupian">图片API由天行数据提供</view>
<view class= "card" wx:for = "{{items}}">
<view data-url="{{item.url}}" bindtap = "onItemClick">
<image class= "image" src="{{item.url}}"/>
<view class="title">{{item.title}}</view>
</view>
</view>
</view>
样式pages/index.wxss
/**index.wxss**/
.card {
border: 2px solid #ffffff;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 0px 3px 1px #cccccc;
margin: 8px 0;
position: relative;
}

.loadmore {
border: 0px solid #ffffff;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 0px 5px 1px #cccccc;
margin: 8px;
}

.image{
width:100%;
height:250px;
}

.title {
padding: 14px;
font-size: 10px;
font-family:"黑体-简";
color: #222;
}
.tupian{
position:fixed;
z-index:50;
box-sizing:border-box;
width:100%;
height:80rpx;
top:0;
font-size:28rpx;
line-height:80rpx;
margin: 0;
background-color:rgba(0, 0, 0, .3);
color:#fff;
opacity:0.80;
text-align:center;
}



历史一句话小程序接口调用示例:
pages/pitlishi.js
Page({
data:{
},

onShow: function () {
var that = this

//定义天行数据APIKEY(apikey请在https://www.tianapi.com中获得)
var apikey = ''
5
wx.request({
url: 'https://api.tianapi.com/txapi/pitlishi/', //天行数据历史一句话接口
data: {
key: apikey
},
success: function (res) {
console.log(res.data.code)
that.setData({
pitlishi: res.data.newslist[0].content
})
console.log(res.data.newslist[0].id)
},
fail: function (err) {
console.log(err)
}
})
}

})


pages/pitlishi.wxml
<!--index.wxml-->
<view>
<view bindtap="Tianapi" class="pitlishi">{{pitlishi}}</view>
</view>


pages/pitlishi.wxss
/**pitlishi.wxss**/

.pitlishi {
margin-top: 100rpx;
padding: 14px;
font-size: 14px;
font-family:"黑体-简";
color: #222;
}


6,点击编译,确认可以正常加载数据后点击右边的预览
201801291517234516334599.png

 
7,在手机上测试无误后点击上传,在微信小程序后台代码管理提交审核,类型选择图片/视频。如果不需要全网上线,上传代码后在微信后台直接使用体验版就行了。

微信截图_20180131131652.png


 

利用天行数据开发微信小程序(附源码)

开发帮助宇天行 发表了文章 • 0 个评论 • 1622 次浏览 • 2018-01-31 12:59 • 来自相关话题

简要介绍一下开发前的准备:
1,访问https://mp.weixin.qq.com/注册小程序,按照页面提示填写基本设置信息并添加合法域名 






2,在微信公众平台-小程序,下载微信web开发者工具
3,在本微信号(天行云服务)对话框内输入“美女图集”下载本示例源码
4,打开微信web开发者工具,添加小程序项目,选择小程序源码所在的目录,在小程序后台基本设置里找到并输入小程序AppID
5,在天行数据中注册获得APIKEY







美女图集小程序源码实例:
 
下载源码后解压并打开pages/index.jsvar app = getApp() // 获取入口文件app的应用实例
Page({
data: {
items: ,
hidden: false,
loading: false,
// loadmorehidden:true,
plain: false
},
Tianapi: function () {
//打开天行数据
},
onItemClick: function (event) {
wx.previewImage({
current: event.currentTarget.dataset.url, // 当前显示图片的http链接
urls: [event.currentTarget.dataset.url] // 需要预览的图片http链接列表
})
},

onReachBottom: function () {
console.log('onLoad')
var that = this
that.setData({
hidden: false,
});
requestData(that, mCurrentPage + 1);
},

onLoad: function () {
//转发
wx.showShareMenu({
withShareTicket: true
})
console.log('onLoad')
var that = this
requestData(that, mCurrentPage + 1);
}

})

/**
* 定义几个数组用来存取item中的数据
*/

var mUrl = ;
var mDesc = ;
var mAuthor = ;
var mTimes = ;
var mTitles = ;
var mCurrentPage = 0;

/**
* 定义天行数据APIKEY
* *apikey请在https://www.tianapi.com中获得
*/

var apikey = '把你在天行数据获得的APIKEY替换到这里'

/**
* 请求数据
*/

function requestData(that, targetPage) {
wx.showToast({
title: '图片加载中',
icon: 'loading'
});
wx.request({
url: 'https://api.tianapi.com/meinv/',
data: {
key: apikey, //天行数据的APIKEY
num:10, //每次请求返回的数量
page: targetPage //翻页
},
header: {
"Content-Type": "application/json"
},
success: function (res) {
if (res == null ||
res.data == null ||
res.data.newslist == null ||
res.data.newslist.length <= 0) {

console.error(res.data.msg);
return;
}


for (var i = 0; i < res.data.newslist.length; i++)
bindData(res.data.newslist[i]);

[/i] var itemList = ;
for (var i = 0; i < mUrl.length; i++)
itemList.push({ url: mUrl, desc: mDesc, author: mAuthor, time: mTimes, title: mTitles });

that.setData({
items: itemList,
hidden: true,
});

mCurrentPage = targetPage;

wx.hideToast();
}
});
}

/**
* 绑定接口中返回的数据
*/

function bindData(itemData) {

var url = itemData.picUrl;
var desc = itemData.description;
var author = itemData.description;
var times = itemData.ctime;
var title = itemData.title;

mUrl.push(url);
mDesc.push(desc);
mAuthor.push(author);
mTimes.push(times);
mTitles.push("作者:" + author + " — " + title + " — " + times);
}表现层pages/index.wxml<!--index.wxml-->
<view>
<view bindtap="Tianapi" class="tupian">图片API由天行数据提供</view>
<view class= "card" wx:for = "{{items}}">
<view data-url="{{item.url}}" bindtap = "onItemClick">
<image class= "image" src="{{item.url}}"/>
<view class="title">{{item.title}}</view>
</view>
</view>
</view>样式pages/index.wxss/**index.wxss**/
.card {
border: 2px solid #ffffff;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 0px 3px 1px #cccccc;
margin: 8px 0;
position: relative;
}

.loadmore {
border: 0px solid #ffffff;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 0px 5px 1px #cccccc;
margin: 8px;
}

.image{
width:100%;
height:250px;
}

.title {
padding: 14px;
font-size: 10px;
font-family:"黑体-简";
color: #222;
}
.tupian{
position:fixed;
z-index:50;
box-sizing:border-box;
width:100%;
height:80rpx;
top:0;
font-size:28rpx;
line-height:80rpx;
margin: 0;
background-color:rgba(0, 0, 0, .3);
color:#fff;
opacity:0.80;
text-align:center;
}



历史一句话小程序接口调用示例:
pages/pitlishi.jsPage({
data:{
},

onShow: function () {
var that = this

//定义天行数据APIKEY(apikey请在https://www.tianapi.com中获得)
var apikey = ''
5
wx.request({
url: 'https://api.tianapi.com/txapi/pitlishi/', //天行数据历史一句话接口
data: {
key: apikey
},
success: function (res) {
console.log(res.data.code)
that.setData({
pitlishi: res.data.newslist[0].content
})
console.log(res.data.newslist[0].id)
},
fail: function (err) {
console.log(err)
}
})
}

})


pages/pitlishi.wxml<!--index.wxml-->
<view>
<view bindtap="Tianapi" class="pitlishi">{{pitlishi}}</view>
</view>


pages/pitlishi.wxss/**pitlishi.wxss**/

.pitlishi {
margin-top: 100rpx;
padding: 14px;
font-size: 14px;
font-family:"黑体-简";
color: #222;
}


6,点击编译,确认可以正常加载数据后点击右边的预览




 
7,在手机上测试无误后点击上传,在微信小程序后台代码管理提交审核,类型选择图片/视频。如果不需要全网上线,上传代码后在微信后台直接使用体验版就行了。






  查看全部
简要介绍一下开发前的准备:
1,访问https://mp.weixin.qq.com/注册小程序,按照页面提示填写基本设置信息并添加合法域名 

微信截图_20180131130442.png


2,在微信公众平台-小程序,下载微信web开发者工具
3,在本微信号(天行云服务)对话框内输入“美女图集”下载本示例源码
4,打开微信web开发者工具,添加小程序项目,选择小程序源码所在的目录,在小程序后台基本设置里找到并输入小程序AppID
5,在天行数据中注册获得APIKEY

微信截图_20180131131009.png



美女图集小程序源码实例:
 
下载源码后解压并打开pages/index.js
var app = getApp() // 获取入口文件app的应用实例
Page({
data: {
items: ,
hidden: false,
loading: false,
// loadmorehidden:true,
plain: false
},
Tianapi: function () {
//打开天行数据
},
onItemClick: function (event) {
wx.previewImage({
current: event.currentTarget.dataset.url, // 当前显示图片的http链接
urls: [event.currentTarget.dataset.url] // 需要预览的图片http链接列表
})
},

onReachBottom: function () {
console.log('onLoad')
var that = this
that.setData({
hidden: false,
});
requestData(that, mCurrentPage + 1);
},

onLoad: function () {
//转发
wx.showShareMenu({
withShareTicket: true
})
console.log('onLoad')
var that = this
requestData(that, mCurrentPage + 1);
}

})

/**
* 定义几个数组用来存取item中的数据
*/

var mUrl = ;
var mDesc = ;
var mAuthor = ;
var mTimes = ;
var mTitles = ;
var mCurrentPage = 0;

/**
* 定义天行数据APIKEY
* *apikey请在https://www.tianapi.com中获得
*/

var apikey = '把你在天行数据获得的APIKEY替换到这里'

/**
* 请求数据
*/

function requestData(that, targetPage) {
wx.showToast({
title: '图片加载中',
icon: 'loading'
});
wx.request({
url: 'https://api.tianapi.com/meinv/',
data: {
key: apikey, //天行数据的APIKEY
num:10, //每次请求返回的数量
page: targetPage //翻页
},
header: {
"Content-Type": "application/json"
},
success: function (res) {
if (res == null ||
res.data == null ||
res.data.newslist == null ||
res.data.newslist.length <= 0) {

console.error(res.data.msg);
return;
}


for (var i = 0; i < res.data.newslist.length; i++)
bindData(res.data.newslist[i]);

[/i] var itemList = ;
for (var i = 0; i < mUrl.length; i++)
itemList.push({ url: mUrl, desc: mDesc, author: mAuthor, time: mTimes, title: mTitles });

that.setData({
items: itemList,
hidden: true,
});

mCurrentPage = targetPage;

wx.hideToast();
}
});
}

/**
* 绑定接口中返回的数据
*/

function bindData(itemData) {

var url = itemData.picUrl;
var desc = itemData.description;
var author = itemData.description;
var times = itemData.ctime;
var title = itemData.title;

mUrl.push(url);
mDesc.push(desc);
mAuthor.push(author);
mTimes.push(times);
mTitles.push("作者:" + author + " — " + title + " — " + times);
}
表现层pages/index.wxml
<!--index.wxml-->
<view>
<view bindtap="Tianapi" class="tupian">图片API由天行数据提供</view>
<view class= "card" wx:for = "{{items}}">
<view data-url="{{item.url}}" bindtap = "onItemClick">
<image class= "image" src="{{item.url}}"/>
<view class="title">{{item.title}}</view>
</view>
</view>
</view>
样式pages/index.wxss
/**index.wxss**/
.card {
border: 2px solid #ffffff;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 0px 3px 1px #cccccc;
margin: 8px 0;
position: relative;
}

.loadmore {
border: 0px solid #ffffff;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 0px 5px 1px #cccccc;
margin: 8px;
}

.image{
width:100%;
height:250px;
}

.title {
padding: 14px;
font-size: 10px;
font-family:"黑体-简";
color: #222;
}
.tupian{
position:fixed;
z-index:50;
box-sizing:border-box;
width:100%;
height:80rpx;
top:0;
font-size:28rpx;
line-height:80rpx;
margin: 0;
background-color:rgba(0, 0, 0, .3);
color:#fff;
opacity:0.80;
text-align:center;
}



历史一句话小程序接口调用示例:
pages/pitlishi.js
Page({
data:{
},

onShow: function () {
var that = this

//定义天行数据APIKEY(apikey请在https://www.tianapi.com中获得)
var apikey = ''
5
wx.request({
url: 'https://api.tianapi.com/txapi/pitlishi/', //天行数据历史一句话接口
data: {
key: apikey
},
success: function (res) {
console.log(res.data.code)
that.setData({
pitlishi: res.data.newslist[0].content
})
console.log(res.data.newslist[0].id)
},
fail: function (err) {
console.log(err)
}
})
}

})


pages/pitlishi.wxml
<!--index.wxml-->
<view>
<view bindtap="Tianapi" class="pitlishi">{{pitlishi}}</view>
</view>


pages/pitlishi.wxss
/**pitlishi.wxss**/

.pitlishi {
margin-top: 100rpx;
padding: 14px;
font-size: 14px;
font-family:"黑体-简";
color: #222;
}


6,点击编译,确认可以正常加载数据后点击右边的预览
201801291517234516334599.png

 
7,在手机上测试无误后点击上传,在微信小程序后台代码管理提交审核,类型选择图片/视频。如果不需要全网上线,上传代码后在微信后台直接使用体验版就行了。

微信截图_20180131131652.png