Runsen經(jīng)過學(xué)習(xí)和回憶微信小程序的開發(fā)的內(nèi)容和知識點(diǎn)。下面，決定做一個(gè)小小的微信小程序云開發(fā)豆瓣電影的小項(xiàng)目。

文章目錄

• 創(chuàng)建云開發(fā)項(xiàng)目
• 構(gòu)建npm項(xiàng)目
• 小程序發(fā)送請求
• 頁面編寫

創(chuàng)建云開發(fā)項(xiàng)目

通過微信開發(fā)者創(chuàng)建云開發(fā)項(xiàng)目，第一需要設(shè)置tabBar，就是小程序的底部，這里命名為電影列表和個(gè)人中心，關(guān)于電影和用戶圖片可以去阿里巴巴的圖標(biāo)庫下載。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": "個(gè)人中心","iconPath": "images/profile.png","selectedIconPath": "images/profile-actived.png"}]},"sitemapLocation": "sitemap.json","style": "v2" }

具體的效果如下圖所示。

構(gòu)建npm項(xiàng)目

小程序?qū)pm支持，很大程度上提高了開發(fā)效率。npm 包要求根目錄下必須有構(gòu)建文件生成目錄(miniprogram_dist 默認(rèn))，此目錄可以通過在 package.json 文件中新增一個(gè) miniprogram 字段來指定。

因此我們需要在項(xiàng)目的根目錄通過npm init創(chuàng)建package.json

這樣會生成 package.json，但是你將會看到?jīng)]有找到 node_modules 目錄。

我查了一下官方文檔和相關(guān)的博客，需要繼續(xù)安裝的第三方包vant。

npm i vant-weapp -S --production

Vant 是有贊前端團(tuán)隊(duì)維護(hù)的移動端 Vue 組件庫，提供了一整套 UI 基礎(chǔ)組件和業(yè)務(wù)組件。通過 Vant 可以快速搭建出風(fēng)格統(tǒng)一的頁面，提升開發(fā)效率。

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

安裝成功后，就可以看見vant-weapp下的文件夾

這時(shí)候就可以在開發(fā)工具：工具 -> 構(gòu)建 npm

最后在項(xiàng)目勾選使用npm模塊。

下面我們在movie的頁面movie.json添加button

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

具體的movie.wxml的代碼如下。

<!--pages/movie/moive.wxml--> <van-button type="danger">危險(xiǎn)按鈕</van-button>

具體效果如下

小程序發(fā)送請求

在小程序中使用 wx.request() 發(fā)送請求

開通云開發(fā)后，還可以在云函數(shù)中發(fā)送請求

由此，可以規(guī)避很多限制，如下圖所示。

下面，創(chuàng)建一個(gè)名為movielist的云函數(shù)，具體如下。

下面需要在movielist文件夾中安裝request和request-promise

具體的云函數(shù)中的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}。

// 云函數(shù)入口文件 const cloud = require('wx-server-sdk') cloud.init() var rp = require("request-promise") // 云函數(shù)入口函數(shù) 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({/*** 頁面的初始數(shù)據(jù)*/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()})},/*** 生命周期函數(shù)--監(jiān)聽頁面加載*/onLoad: function (options) {this.getmovielist()},/*** 頁面上拉觸底事件的處理函數(shù)*/onReachBottom: function () {this.getmovielist()} })

因?yàn)閭€(gè)人的APPID有其他用，這里學(xué)會下拉刷新頁面訪問即可

總結(jié)

以上是生活随笔為你收集整理的五十三、微信小程序云开发豆瓣电影小项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。