微信小程序开发教程：仿制电影评论小程序开发

2017年8月8日，hi商学院的最新消息，hvihi.com了解到微信小程序开发教程是目前大家关注的问题，今天hvihi.com为大家组织了仿电影影评小程序开发相关的开发步骤。

微信小程序电影评论小程序开发步骤：

这是博客项目中包含的文件的屏幕截图：

首先创建一个文件夹和页面页面，如图所示

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

{

'pages': [

'页/hotPage/hotPage'，

'页/comingSoon/comingSoon'，

'页/搜索/检索'，

'页/更/更'

]，

'window': {

'backgroundTextStyle':'light'，

'navigationBarBackgroundColor':'＃ff'，

'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 {

高度: 100％;

显示: flex;

Flex方向:列;

对齐项目: center;

Justify-content: space-between;

填充: 200rpx 0;

Box-sizing: border-box;

/* hotPage.wxss */

.movies {

显示: flex;

}

.myimage {

Flex: 1;

}

.moveInfo {

Flex: 2;

}

.yanyuanlist {

显示: flex;

}

。左{

Flex: 1;

}

.right {

Flex: 2;

}

该页面如图所示：

然后是hotPage.wxml页面：

名称: {{item.title}}

导演: {{item.directors ['0']。name}}

演员:

{{item.name}}

类别: {{item.genres}}

发布时间: {{item.year}}

然后是hotPage.js页面：

Var; var page=0; //more.js

页（{

/**

*页面的初始数据

*/

数据: {

电影: []

}，

/**

*生命周期功能 - 监听器页面加载

*/

onLoad:函数（选项）{

那=这个;

that.linkNet（0）;

}，

jumpTomore: function（e）{

CONSOLE.LOG（e.currentTarget.id）;

wx.navigateTo（{

网址:'/pages/more/more？id='+ e.currentTarget.id，

}）

}，

linkNet:功能（页面）{

Wx.request（{

标头: {

'Content-Type':'json'

}，

网址:'https://api.douban.com/v2/movie/in_theaters'，

数据: {

开始: 10 *页面，

计数: 10，

城市:'沈阳'

}，

成功:函数（e）{

CONSOLE.LOG（E）;

如果（e.data.subjects.length==0）{

wx.showToast（{

标题:'没有更多数据'，

}）

} else {

that.setData（{

电影: that.data.movies.concat（e.data.subjects）

}）

}

}

}）

}，

onReachBottom: function（）{

that.linkNet（++页）;

}

}）

运行程序的结果如下：

然后hotPage.wxss:

图像{

宽度: 350rpx;

高度: 280rpx;

}

然后第二页的布局与第一页的布局相同，所以最好直接复制第一页的hotPage.wxml代码;

相同的comingSoon.js代码和hotPage.js代码是相似的，唯一需要改变的是：

更改网址和数据

.wxss代码一致;

结果如下：

接下来是第三页的代码：

Search.wxml页面代码：

搜索

名称: {{item.title}}

导演: {{item.directors ['0']。name}}

演员:

{{item.name}}

类别: {{item.genres}}

发布时间: {{item.year}}

Search.js页面代码：

Var输入; var that; //search.js

页（{

/**

*页面的初始数据

*/

数据: {

电影: []

}，

/**

*生命周期功能 - 监听器页面加载

*/

onLoad:函数（选项）{

那=这个;

}，

myInput:函数（e）{

输入=e.detail.value;

}，

mySearch: function（）{

Wx.request（{

标头: {

'Content-Type':'json'

}，

网址:'https://api.douban.com/v2/movie/search?q='+输入，

成功:函数（e）{

that.setData（{

电影: e.data.subjects

}）

}

}）

}

}）

search.wxss代码与hotPage.wxss代码相同;

运行代码的结果如下：

最后，详细信息页面，点击视频将跳转到详细信息页面以获取视频的详细信息：

More.wxml页面代码：

名称: {{title}}

导演: {{director}}

主演:

{{item.name}}

年: {{year}}

评分: {{rate}}

简介: {{summary}}

More.js代码：

Var那个;

//more.jsPage（{

/**

*页面的初始数据

*/

数据: {

标题: 0，

imageUrl: 0，

导演: 0，

投射: []，

年: 0，

速率: 0，

摘要: 0

}，

/**

*生命周期功能 - 监听器页面加载

*/

onLoad:函数（选项）{

那=这个;

Wx.request（{

标头: {

'Content-Type':'json'

}，

网址:'https://api.douban.com/v2/movie/subject/'+ options.id，

成功:函数（e）{

CONSOLE.LOG（e）中

that.setData（{

标题: e.data.original_title，

imageUrl: e.data.images.large，

导演: e.data.directors ['0']。姓名，

投射: e.data.casts，

年份: e.data.year，

评分: e.data.rating.average，

摘要: e.data.summary

}）

}

}）

}

}）

运行代码的结果如下：

以上是微信小程序开发教程模拟电影评论小程序开发过程，更多小程序开发教程和小程序请继续关注hvihi.com更新！

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。