小程序开发：API
来自CloudWiki
JS函数调试
movie.js:
// pages/movie/movie.js
Page({
/**
* 页面的初始数据
*/
data: {
images: [
"../../icons/1.jpg",
"../../icons/2.jpg",
"../../icons/3.jpg"
],
indicatorDots: true,
autoPlay: true,
circular: true,
interval: 5000
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log("onLoad");
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log("onReady");
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log("onShow");
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log("onHide");
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
console.log("onUnload");
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
API调用
豆瓣官方API调用：https://developers.douban.com/wiki/?title=api_v2
开发过程中，一般会提供一个接口文档
步骤一：
在运行时，找到设置-》项目设置 -》把‘不校验合法域名’那一项打上勾
// pages/movie/movie.js
Page({
/**
* 页面的初始数据
*/
data: {
images:[
"../../icons/1.jpg",
"../../icons/2.jpg",
"../../icons/3.jpg"
],
indicatorDots:true,
autoPlay:true,
circular:true,
interval:5000
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log("onLoad");
wx.showToast({
title: '拼命加载',
icon:"loading"
})
wx.request({
url: 'https://douban.uieee.com/v2/movie/in_theaters',
method:'GET',
header:{'content-type':'json'},
success:function(res){
console.log(res);
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log("onReady");
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log("onShow");
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log("onHide");
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
console.log("onUnload");
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
保存之后，在控制台会看到如下输出：
步骤二：
// pages/movie/movie.js
Page({
/**
* 页面的初始数据
*/
data: {
images:[
"../../icons/1.jpg",
"../../icons/2.jpg",
"../../icons/3.jpg"
],
indicatorDots:true,
autoPlay:true,
circular:true,
interval:5000,
movieInfo:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
console.log("onLoad");
wx.showToast({
title: '拼命加载',
icon:"loading"
})
wx.request({
url: 'https://douban.uieee.com/v2/movie/in_theaters',
method:'GET',
header:{'content-type':'json'},
success:function(res){
that.setData({
movieInfo: res.data.subjects
})
console.log(that.data.movieInfo)
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log("onReady");
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log("onShow");
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log("onHide");
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
console.log("onUnload");
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
在控制台会看到如下输出：
步骤三
movie.wxml:
<view class='content'>
<swiper indicator-dots='{{indicatorDots}}' autoplay='{{autoPlay}}' circular='{{circular}}' interval='{{interval}}'>
<block wx:for='{{images}}'>
<swiper-item>
<image src='{{item}}'></image>
</swiper-item>
</block>
</swiper>
<view class='movie' wx:for='{{movieInfo}}'>
<view class='pic'>
<image src='{{item.images.small}}'></image>
</view>
<view class='movie-info '>
<text>
电影名称：{{item.title}} \n 电影类型：{{item.genres}} \n上映时间:{{item.pubdates}}
</text>
</view>
</view>
</view>
movie.js:
// pages/movie/movie.js
Page({
/**
* 页面的初始数据
*/
data: {
images: [
"../../icons/1.jpg",
"../../icons/2.jpg",
"../../icons/3.jpg"
],
indicatorDots: true,
autoPlay: true,
circular: true,
interval: 5000,
movieInfo: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
console.log("onLoad");
wx.showToast({
title: '拼命加载',
icon: "loading"
})
wx.request({
url: 'https://douban.uieee.com/v2/movie/in_theaters',
method: 'GET',
header: { 'content-type': 'json' },
success: function (res) {
that.setData({
movieInfo: res.data.subjects
})
console.log(that.data.movieInfo)
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log("onReady");
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log("onShow");
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log("onHide");
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
console.log("onUnload");
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
详细页面
movie.wxml:
<view class='content' style='background-color:#3a3a3a'>
<swiper indicator-dots='{{indicatorDots}}' autoplay circular interval='{{interval}}'>
<block wx:for='{{images}}' wx:for-item='image' >
<swiper-item bindtap='onImageClick' data-image='{{index}}'>
<image src='{{image}}'></image>
</swiper-item>
</block>
</swiper>
<view class='movie' wx:for='{{movieInfo}}' bindtap='movieDetail' data-movie-id='{{item.id}}'>
<view class='pic' bindtap='movieDetail'>
<image src="{{item.images.medium}}" mode='aspectFill' class='image'></image>
</view>
<view class='movie-info'>
<view class='base-info'>
<text >电影名称：{{item.title}}\n 导演：{{item.directors[0].name}}\n 豆瓣评分：{{item.rating.average}}\n上映时间：{{item.pubdates[0]}}
</text>
</view>
</view>
</view>
</view>
app.json:
{
"pages": [
"pages/movie/movie",
"pages/home/home",
"pages/detail/detail",
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "dark",
"enablePullDownRefresh": true,
"backgroundColor": "#939393",
"navigationBarBackgroundColor": "#939393",
"navigationBarTitleText": "电影资讯",
"navigationBarTextStyle": "red"
},
"tabBar": {
"list": [
{
"pagePath": "pages/movie/movie",
"text": "热映电影",
"iconPath": "icons/dy-1.png",
"selectedIconPath": "icons/dy.png"
},
{
"pagePath": "pages/home/home",
"text": "home",
"iconPath": "icons/search-1.png",
"selectedIconPath": "icons/search.png"
},
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icons/dy-1.png",
"selectedIconPath": "icons/dy.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "icons/search-1.png",
"selectedIconPath": "icons/search.png"
}
],
"backgroundColor": "#939393",
"color": "#fff",
"selectedColor": "#FF6655"
}
}
detail.wxml:
<!--pages/detail/detail.wxml-->
<view class='content' >
<video src='../../viedo/184.mp4' id="movieVedio">
</video>
<view >
<text class='title'>电影名称：{{movieInfo.title}} 又名 {{movieInfo.aka}}</text>
<text class='title'>电影评分：{{movieInfo.rating.average}}</text>
<text class='title'>想看人数：{{movieInfo.wish_count}}看过人数：{{movieInfo.collect_count}}</text>
<text class='title'>影片类型：{{movieInfo.genres}}</text>
<text class="title">电影简介：{{movieInfo.summary}}</text>
</view>
</view>
detail.wxss:
/* pages/detail/detail.wxss */
.title{
padding-top: 5px;
padding-bottom: 5px;
display: flex;
font-size: 12px;
}
detail.json:
{
"navigationBarTitleText": "详细信息"
}
detail.js:
Page({
/**
* 页面的初始数据
*/
data: {
id:'',
movieInfo:{},
indicatorDots: true,
interval: '3000',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// this.vedioCtx = wx.createVideoContext("movieVedio");
// this.vedioCtx.play();
this.myVideo = wx.createVideoContext("movieVedio");
this.myVideo.play();
var that = this;
this.setData({
id:options.id
})
wx.request({
url: 'https://douban.uieee.com/v2/movie/subject/'+this.data.id,
header:{'content-type':'json'},
success:function(res){
console.log(res.data)
that.setData({
movieInfo:res.data
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
跳转时不用写后缀名称， 跳转时前一个页面一直存在
跳转可以用navigator组件（navigate, redirect两种方式）
页面的值传递
data-传参数
值传递有两种方式：GET,POST
调用视频、播放
搜索
原始调用方式：调用‘豆瓣 -> 电影搜索’
缓存
查询的历史数据
模板
(没有讲）
