Runsen經過學習和回憶微信小程序的開發的內容和知識點。下面，決定做一個小小的微信小程序云開發豆瓣電影的小項目。

文章目錄

• 創建云開發項目
• 構建npm項目
• 小程序發送請求
• 頁面編寫

創建云開發項目

通過微信開發者創建云開發項目，第一需要設置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有其他用，這里學會下拉刷新頁面訪問即可

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。