创建云开发项目

通过微信开发者创建云开发项目，第一需要设置tabBar，就是小程序的底部，这里命名为电影列表和个人中心，关于电影和用户图片可以去阿里巴巴的图标库下载。navigationBarTitleText指的是小程序的名字，具体代码如下。

{"pages": ["pages/movie/moive","pages/profile/profile"],"window": {"backgroundColor": "#F6F6F6","backgroundTextStyle": "light","navigationBarBackgroundColor": "#E54847","navigationBarTitleText": "最新电影","navigationBarTextStyle": "white"},"tabBar": {"color": "#000000","selectedColor": "#E54847","list": [{"pagePath": "pages/movie/moive","text": "电影列表","iconPath": "images/film.png","selectedIconPath": "images/film-actived.png"},{"pagePath": "pages/profile/profile","text": "个人中心","iconPath": "images/profile.png","selectedIconPath": "images/profile-actived.png"}]},"sitemapLocation": "sitemap.json","style": "v2"
}

具体的效果如下图所示。

构建npm项目

小程序对npm支持，很大程度上提高了开发效率。npm 包要求根目录下必须有构建文件生成目录(miniprogram_dist 默认)，此目录可以通过在 package.json 文件中新增一个 miniprogram 字段来指定。

因此我们需要在项目的根目录通过npm init创建package.json

这样会生成 package.json，但是你将会看到没有找到 node_modules 目录。

我查了一下官方文档和相关的博客，需要继续安装的第三方包vant。

npm i vant-weapp -S --production

Vant 是有赞前端团队维护的移动端 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant 可以快速搭建出风格统一的页面，提升开发效率。

vant官方文档：https://youzan.github.io/ 。

安装成功后，就可以看见vant-weapp下的文件夹

这时候就可以在开发工具：工具 -> 构建 npm

最后在项目勾选使用npm模块。

下面我们在movie的页面movie.json添加button

{"usingComponents": {"van-button" :"vant-weapp/button"}
}

具体的movie.wxml的代码如下。

<!--pages/movie/moive.wxml-->
<van-button type="danger">危险按钮</van-button>

具体效果如下

小程序发送请求

在小程序中使用 wx.request() 发送请求

开通云开发后，还可以在云函数中发送请求

由此，可以规避很多限制，如下图所示。

下面，创建一个名为movielist的云函数，具体如下。

下面需要在movielist文件夹中安装request和request-promise

具体的云函数中的index.js代码如下。这里选用的API接口是https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&sort=time&page_limit=${event.count}&page_start=${event.start}。

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
var rp = require("request-promise")
// 云函数入口函数
exports.main = async (event, context) => {return rp(`https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&sort=time&page_limit=${event.count}&page_start=${event.start}`).then(function(res){console.log(res)return res}).catch(function(err){console.err(err)})
}

页面编写

在movie页面中的movie.wxml代码如下

<!--pages/movie/moive.wxml-->
<view  wx:for = "{{movieList}}" wx:key="{{index}}">
<view wx:for="{{item.subjects}}" wx:key="index" class="movie">
<image src="{{item.cover}}" class="movie-img"></image>
<view class="movie-info"><view class="movie-title">{{item.title}}</view><view>观众评分：  <text class="movie-sorce">{{item.rate}}分</text></view>
</view>
</view>
</view

在movie页面中的movie.wxss代码如下

/* pages/movie/movie.wxss */
.movie{height: 300rpx;display: flex;padding: 20px;border-bottom: 1px solid #ccc;
}.movie-img{width: 200rpx;height: 100%;margin-right:20rpx;
}
.movie-info{flex: 1;
}
.movie-title{color: #666;font-size:40rpx;font-weight:bolder;
}.movie-sorce{color: red;
}

在movie页面中的movie.js代码如下

// pages/movie/moive.js
Page({/*** 页面的初始数据*/data: {movieList:[]},getmovielist:function(){wx.showLoading({title: '正在加载中',})wx.cloud.callFunction({name: "movielist",data:{start:this.data.movieList.length *=10,count:10}}).then(res => {console.log(res)this.setData({movieList: this.data.movieList.concat(JSON.parse(res.result))})wx.hideLoading()}).catch(err=>{console.error(err)wx.hideLoading()})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getmovielist()},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {this.getmovielist()}
})

因为个人的APPID有其他用，这里学会下拉刷新页面访问即可

五十三、微信小程序云开发豆瓣电影小项目相关推荐

基于微信小程序云开发的投票小程序源码，图文投票微信小程序源码
功能介绍投票活动十分火,商家,企业,机构偶尔都会来一场投票活动评选,本小程序支持图文投票,简单方便.随时随地完成投票,可以方便设定投票模式(按天按全程,投票数限定). 本代码前后端完整代码包投票列表 ...
微信小程序云开发成绩查询小程序的制作过程。
微信小程序云开发成绩查询小程序的制作过程. 如果觉得我讲的好可以点个关注. 明确自己的目的,到底要做一个怎么样的小程序. 我先上效果图: 确定后就可以开始自己布局.主要是用css 1.先看首页,首页主 ...
微信小程序云开发-树洞小程序Treehole（介绍）
记录一款基于云开发的微信小程序. 树洞,顾名思义是作为匿名吐槽的平台,主要功能可以参照微信朋友圈的形式,不过采取的是匿名的方式. 主要基于微信小程序云开发,前端个人主页页面的界面使用的是ColorUi ...
小程序·云开发，属于小程序的全栈开发机遇
web前端教程用大白话,来讲编程近日,腾讯云"小程序·云开发"解决方案正式上线. 该方案通过简化复杂的后端和运维操作,让即便不具备一定后端知识的开发者也能高效开发出一款高质量的 ...
基于小程序云开发的在线答题小程序源码含答题分类答题记录错题集适合学习适合毕业设计使用
基于小程序云开发开发的在线答题小程序源码核心功能: 1.答题分类 2.开始答题 3.答题评分 4.答题记录 5.错题集部分界面截图: 如有疑问,可联系博主!
小程序云开发_借助小程序云开发制作校园导览小程序丨实战
导语偌大校园,寻路犯难.没关系!本文教你借助云开发制作精美校园导览小程序,带你走遍校园的每个角落,发现不一样的风景. 背景刚入学的新生要想不迷失在偌大的校园,除了依靠不怎么可靠的路边标识外,总会收 ...
微信小程序云开发-树洞小程序Treehole（评论帖子/发布话题实现）
这一节介绍的是评论帖子,还有发布话题功能的实现. 首先说说评论帖子的功能. 先看一下效果图: 从上一节可知,进行评论跳转的时候需要带来一些关于帖子的数据. 这一个页面对于布局来说,也是十分的重要.评论 ...
关于微信小程序云开发以及云开发实例展示
本文分享给使用微信云开发的同学序言首先,云开发是一种趋势,因为跨平台解决方案可以提高开发效率,减少开发成本.使用云开发,开发者无需关注服务器.网络和数据库等底层技术,可以专注于业务逻辑的开发,从而 ...
基于微信小程序云开发实现考研题库小程序项目（完整版）
今天手把手的带大家实现一款答题类的题库小程序,如果着急的话,可以直接去看文末源码.下载与项目部署. 考研题库小程序云开发实战,完整版提供给大家学习.题库小程序,基于云开发的微信答题小程序,软件架构是微 ...
微信小程序云开发用户身份登录_你必须要掌握的微信小程序云开发
微信小程序开发已经成为目前最火爆的技能之一,无论是在求职.毕设.兴趣培养等方面都已经成为一项必备技能,而小程序云开发技术的出现更是点燃了整个小程序生态圈. 在2019微信公开课PRO小程序分论坛上,腾 ...

五十三、微信小程序云开发豆瓣电影小项目

文章目录

创建云开发项目

构建npm项目

小程序发送请求

页面编写

五十三、微信小程序云开发豆瓣电影小项目相关推荐

最新文章

热门文章