>

微信小程序之电影影视商酌小程序制作代码,三

- 编辑:金沙国际平台登录 -

微信小程序之电影影视商酌小程序制作代码,三

主页面代码

微信小程序之电影影片商议小程序制作代码,小程序影片商议

本文实例为我们大快朵颐了微信小程序制作影片研商小程序的求实代码,供大家参照他事他说加以考察,具体内容如下

那是博主的品种包蕴的文本截图:

图片 1

首先如图创设文件夹和page页面

然后app.json页面更新代码如下:

{
 "pages": [
 "pages/hotPage/hotPage",
 "pages/comingSoon/comingSoon",
 "pages/search/search",
 "pages/more/more"
 ],
 "window": {
 "backgroundTextStyle": "light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle": "black"
 },
 "tabBar": {
 "list": [{
 "pagePath": "pages/hotPage/hotPage",
 "text": "本地热映"
 },{
 "pagePath": "pages/comingSoon/comingSoon",
 "text": "即将上映"
 },{
 "pagePath": "pages/search/search",
 "text": "影片搜索"
 }]
 }
}

是app.wxss页面(为前面包车型客车页面样式写的):

/**app.wxss**/
.container {
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 padding: 200rpx 0;
 box-sizing: border-box;
} 
/* hotPage.wxss */
.movies{
 display:flex;
}
.myimage{
 flex: 1;
}
.moveInfo{
 flex: 2;
}
.yanyuanlist{
 display:flex;
}
.left{
 flex:1;
}
.right{
 flex:2;
}

页面突显如图:

图片 2

然后是hotPage.wxml页面:

<view class="movies" wx:for="{{movies}}" id="{{item.id}}" bindtap="jumpTomore">

 <view class="myimage">
 <image src="{{item.images.medium}}"></image>
 </view>
 <view class="moveInfo">
 <view class="title">
 名称:{{item.title}}
 </view>
 <view class="daoyan">
 导演:{{item.directors["0"].name}}
 </view>
 <view class="yanyuanlist">
 <view class="left">演员:</view>
 <view class="right">
 <block wx:for="{{item.casts}}">{{item.name}} </block>
 </view>
 </view>
 <view class="fenlei">
 分类:{{item.genres}}
 </view>
 <view class="year">
 上映时间:{{item.year}}
 </view>
 </view>

</view>

然后是hotPage.js页面:

var that;
var page = 0;
// more.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
 movies: []
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 that = this;
 that.linkNet(0);
 },
 jumpTomore: function (e) {
 console.log(e.currentTarget.id);
 wx.navigateTo({
 url: '/pages/more/more?id=' + e.currentTarget.id,
 })
 },
 linkNet: function (page) {
 wx.request({
 header: {
 "Content-Type": "json"
 },
 url: 'https://api.douban.com/v2/movie/in_theaters',
 data: {
 start: 10 * page,
 count: 10,
 city: '成都'
 },
 success: function (e) {
 console.log(e);
 if (e.data.subjects.length == 0) {
 wx.showToast({
 title: '没有更多数据',
 })
 } else {
 that.setData({
 movies: that.data.movies.concat(e.data.subjects)
 })
 }
 }
 })
 },
 onReachBottom: function () {
 that.linkNet(++page);
 }
})

运营程序结果如图:

图片 3

然后是hotPage.wxss:

image{
 width:350rpx;
 height:280rpx;
}

跟着是第2个页面包车型客车布局和率先个页面同样,所以向来把第三个页面hotPage.wxml代码copy过来就好了;
一样comingSoon.js代码和hotPage.js代码也大半,独一供给改造的地方唯有一个:

图片 4

url和data改一下就好了

.wxss代码一致;

运作结果如下:

图片 5

随着是第多少个页面包车型大巴代码:

search.wxml页面代码:

<input placeholder="输入关键字" bindinput="myInput" />
<button bindtap="mySearch">搜索</button>

<view class="movies" wx:for="{{movies}}" id="{{item.id}}" bindtap="jumpTomore">

 <view class="myimage">
 <image src="{{item.images.medium}}"></image>
 </view>
 <view class="moveInfo">
 <view class="title">
 名称:{{item.title}}
 </view>
 <view class="daoyan">
 导演:{{item.directors["0"].name}}
 </view>
 <view class="yanyuanlist">
 <view class="left">演员:</view>
 <view class="right">
 <block wx:for="{{item.casts}}">{{item.name}} </block>
 </view>
 </view>
 <view class="fenlei">
 分类:{{item.genres}}
 </view>
 <view class="year">
 上映时间:{{item.year}}
 </view>
 </view>

</view>

页面代码:

var input;
var that;
// search.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
 movies: []
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 that = this;
 },
 myInput: function (e) {
 input = e.detail.value;
 },
 mySearch: function () {
 wx.request({
 header: {
 "Content-Type": "json"
 },
 url: 'https://api.douban.com/v2/movie/search?q=' + input,
 success: function (e) {
 that.setData({
 movies: e.data.subjects
 })
 }
 })
 }


})

.wxss代码同hotPage.wxss代码一致;

运营代码结果如下:

图片 6

最终是详细的情况页面,点击影片后会跳转到详细情况页面获得影片的详细新闻:

more.wxml页面代码:

<!--more.wxml-->
<image src="{{imageUrl}}"></image>
<view class="moveInfo">
 <view class="title">名字:{{title}}</view>
 <view class="director">导演:{{director}}</view>
 <view class="castleft">主演:</view>
 <view class="casts" wx:for="{{casts}}">
 <block class="castright">{{item.name}}</block>
 </view>
 <view class="year">年份:{{year}}</view>
 <view class="rate">评分:{{rate}}</view>
 <view class="summary">介绍:{{summary}}</view>
</view>

more.js代码:

var that;
// more.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
 title: 0,
 imageUrl: 0,
 director: 0,
 casts: [],
 year: 0,
 rate: 0,
 summary: 0
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 that = this;
 wx.request({
 header: {
 "Content-Type": "json"
 },
 url: 'https://api.douban.com/v2/movie/subject/' + options.id,
 success: function (e) {
 console.log(e)
 that.setData({
 title: e.data.original_title,
 imageUrl: e.data.images.large,
 director: e.data.directors["0"].name,
 casts: e.data.casts,
 year: e.data.year,
 rate: e.data.rating.average,
 summary: e.data.summary
 })
 }
 })
 }

})

运作代码结果如下:

图片 7

好了、全体代码如上都交由了..加油

上述正是本文的全体内容,希望对我们的读书抱有支持,也冀望大家多多帮助帮客之家。

本文实例为大家享用了微信小程序制作影视探究小程序的求实代码,供大家参照他事他说加以考察,具体内容...

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../wenjian/jquery-2.2.3.min.js"></script></head><body><select id="sheng">    <option>请选择</option></select><select id="shi">    <option >请选择</option></select><select id="qu">    <option >请选择</option></select></body></html><script>    $.ajax({        data: {parent_id: 0}, //发送的数据        dataType: "json", //返回值的类型 text为string型        type: 'post',   //发送请求的方法        url: 'sheng_l.php',//发送请求的地址        success: function  {//发送成功时的回调函数    //            console.log;            for (var i in data) {                $("#sheng").append("<option value='"+ data[i][2] +"'>" + data[i][1]  +"</option>")            }        }    })    $.ready(function () {        $("#sheng").change(function () {            $("#shi").get(0).options.length= 1;//            $.get.options.length= 1;            var data = $("#sheng").find("option:selected").val();            $.ajax({                data:{parent_id:data},                type:"post",                dataType:"json",                url:"sheng_l.php",                success:function  {                    for(var i in data){                        $("#shi").append("<option value='" + data[i][2] +"'>" + data[i][1] +"</option>")                    }                }            })        })    })    $.ready(function () {        $("#shi").change(function () {            $("#qu").get(0).options.length= 1;            var data = $("#shi").find("option:selected").val();            $.ajax({                data:{parent_id:data},                type:"post",                dataType:"json",                url:"sheng_l.php",                success:function  {                    for (var i in data){                        $("#qu").append("<option value='" +data[i][2] +"'>" +data[i][1] +"</option>")                    }                }            })        })    })

拍卖页面代码

<?php/** * Created by fcc * User: Administrator * Date: 2017/10/29 * Time: 20:56 */require_once "../wenjian/DBDA.class.php";$db = new DBDA();$sql = "select * from region WHERE father_id = {$_POST['parent_id']}";$result = $db->Query($sql);echo json_encode($result);

本文由编程发布,转载请注明来源:微信小程序之电影影视商酌小程序制作代码,三