微信小程序开发（三） - 云开发案例

用户我家大花猫 發表於 2019-12-16 17:35:00

微信小程序开发（三）----- 云开发案例

1、发送请求
<img src="https://img2018.cnblogs.com/i-beta/1730357/201912/1730357-20191216151339900-385327937.png">
2、云函数中发送请求，例子request
<ul>
<li>https://github.com/request/request-promise    创建云函数movielist，右键在终端打开，输入  npm   install --save request</li>
<li>然后输入 npm   install --save request-promise，当前云函数的package.json文件依赖为</li>
</ul>
         <img src="https://img2018.cnblogs.com/i-beta/1730357/201912/1730357-20191216152725176-595589490.png">   
<ul>
<li>使用
<ul>
<li>在云函数movielist的index.js中引入包
<div class="cnblogs_code"><img id="code_img_closed_24d1ac49-3b9a-4249-84e7-de650ea8f297" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_24d1ac49-3b9a-4249-84e7-de650ea8f297" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_24d1ac49-3b9a-4249-84e7-de650ea8f297" class="cnblogs_code_hide">
<pre>// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

var rp = require('request-promise');

// 云函数入口函数
exports.main = async(event, context) => {
// ES6字符串模板的形式
return rp(`http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=${event.start}&count=${event.count}`)
 .then(function(res) {
 // 显示在云函数的服务端
 console.log(res);
 return res;
})
.catch(function(err) {
 console.error(err);
});
}</pre>
</div>
View Code</div>
</li>
<li>以请求豆瓣电影列表为例子，在movie的js页面，刚进入页面获取数据，因此onLoad生命周期的代码为
<div class="cnblogs_code"><img id="code_img_closed_29399515-4652-41c3-b052-5e7615af3d03" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_29399515-4652-41c3-b052-5e7615af3d03" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_29399515-4652-41c3-b052-5e7615af3d03" class="cnblogs_code_hide">
<pre>/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getMovieList();
},
/**
* 获取电影列表的数据
*/
getMovieList() {
// 加载框
 wx.showLoading({
 title: '加载中',
})
wx.cloud.callFunction({
 name: 'movielist',
 data: {
 start: this.data.movieList.length,
 count: 10
 },
 success: res => {
 this.setData({
 // 对返回的字符串进行解析，并且每次返回的数据应该拼接在原有数据的后面
 movieList: this.data.movieList.concat(JSON.parse(res.result).subjects)
 });
 // 隐藏加载框
 wx: wx.hideLoading()
 },
 fail: error => {
 wx.showToast({
 title: '获取电影列表数据失败',
 })
 }
})
},</pre>
</div>
View Code</div>
</li>
<li>滚动条滚动到底部时异步的加载10条数据，在生命周期onReachBottom中再次发送请求
<div class="cnblogs_code">
<pre>/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.getMovieList()
}</pre>
</div>
</li>
</ul>
</li>
<li>跳转详情页面演示
<ul>
<li>点击按钮切换详情
<div class="cnblogs_code">
<pre><button class="movie-comment" catchtap="onCatchSkipToComment" data-movieid="{{item.id}}">评价</button></pre>
</div>
</li>
<li>movie.js
<div class="cnblogs_code">
<pre>/**
* 跳转评价的详情页面
*/
onCatchSkipToComment(event) {
// 跳转新页面，保留上一个页面
 wx.navigateTo({
 url: `../comment/comment?movieid=${event.target.dataset.movieid}`,
})
},</pre>
</div>
</li>
<li>在comment的js里面
<div class="cnblogs_code"><img id="code_img_closed_f9e0d0e2-803a-4995-a09b-0071f5e37550" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_f9e0d0e2-803a-4995-a09b-0071f5e37550" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_f9e0d0e2-803a-4995-a09b-0071f5e37550" class="cnblogs_code_hide">
<pre>/**
* 页面的初始数据
*/
data: {
movieDetail : {}
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 获取上一个页面传过来的参数
this.getMovieDetail(options.movieid)
},
/**
* 获取电影详情信息
*/
getMovieDetail(movieid) {
wx.showLoading({
 title: '加载中',
})
wx.cloud.callFunction({
 name: 'getDetail',
 data: {
 movieid: movieid
 },
 success: res => {
 this.setData({
 movieDetail : JSON.parse(res.result)
 })
 console.log(this.data.movieDetail)
 wx.hideLoading()
 },
 fail: error => {
 console.log(error)
 }
})
},</pre>
</div>
View Code</div>
</li>
<li>在云函数getDetail的index中
<div class="cnblogs_code"><img id="code_img_closed_7ad3ffc9-53fd-4548-947d-fe32c8501c2d" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_7ad3ffc9-53fd-4548-947d-fe32c8501c2d" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_7ad3ffc9-53fd-4548-947d-fe32c8501c2d" class="cnblogs_code_hide">
<pre>// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

var rp = require('request-promise');

// 云函数入口函数
exports.main = async (event, context) => {
return rp(`http://api.douban.com/v2/movie/subject/${event.movieid}?apikey=0df993c66c0c636e29ecbb5344252a4a`)
 .then(function (res) {
 // 显示在云函数的服务端
 console.log(res);
 return res;
})
.catch(function (err) {
 console.error(err);
});
}</pre>
</div>
View Code</div>
</li>
</ul>
</li>
<li> 获取用户信息
<ul>
<li>WXML
<div class="cnblogs_code">
<pre>
<view class='profile'>
<view class="profile-img">
<open-data type="userAvatarUrl"></open-data>
</view>
<open-data type="userNickName" class="profile-name"></open-data>
</view>

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取用户信息</button></pre>
</div>
</li>
<li>微信小程序提供了开放能力open-data，同时button组件内的type属性也支持开放能力</li>
</ul>
</li>
<li>小程序的审核上线
<ul>
<li>由于后端采用小程序的云开发（免费），因此不需要购买相对应的服务器；</li>
<li>设置体验版：点击微信开发工具的  “上传”  按钮，上传到腾讯云；</li>
<li>可以到微信公众平台版本管理中提交审核，审核通过后成为线上版本</li>
</ul>
</li>
</ul>
3、遇到的问题
<ol>
<li>电影详情中高度模糊（毛玻璃）效果</li>
</ol>
<ul>
<li style="list-style-type: none">
<ul>
<li>WXML
<div class="cnblogs_code">
<pre> <view class='detail-container' style='background: url({{movieDetail.images.large}})'></view>
<view class='detail-mask'></view></pre>
</div>
</li>
<li>WXSS
<div class="cnblogs_code">
<pre>.detail-container {
height: 400rpx;
filter: blur(40rpx);
opacity: 0.4;
}

.detail-mask {
position: absolute;
width: 100%;
height: 400rpx;
background-color: #333;
top: 0;
left: 0;
z-index: -1;
}</pre>
</div>
</li>
</ul>
</li>
</ul>

</div>
<div id="MySignature" role="contentinfo">
北栀女孩儿 
来源：https://www.cnblogs.com/wxh0929/p/12050298.html

頁: [1]

琼殿技术论坛's Archiver

微信小程序开发（三）----- 云开发案例