- 使用组件库
(1)在终端中打开miniprogram
(2)npm init -y
(3)npm i @vant/weapp -S --production
(4)在小程序开发页面左上角的工具中点击构建npm
(5)在小程序开发页面右上角详情的本地设置中勾选使用npm模块 - 获取接口数据(以getmovielist为例)
(1)在cloudfunction下新建node.js云函数getmovielist
(2)在终端中打开getmovielist
(3)npm install --save request
(4)npm install --save request-promise
(5)在index.js中插入var rp = require('request-promise');
(6)将以下函数插入到index.js中云函数入口函数中
return await rp('https://douban.uieee.com/v2/movie/top250?start=0&count=10')
.then(function (res) {
console.log(res)
return res
})
.catch(function (err) {
console.log(err)
});
(7)将getmovielist文件夹上传并部署
(8)在miniprogram下的相应page页面中的js文件(movie.js)的“生命周期函数--监听页面加载”中接收数据
wx.cloud.callFunction({
name:'getmovielist'
}).then(res=>{
console.log(JSON.parse(res.result))
}).catch(err=>{
console.log(err)
})
(9)在js文件(movie.js)中的初始数据中设置movielist:[]空数组
(10)在“生命周期函数--监听页面加载”中的then函数中通过this.setData为movielist空数组赋值
3. 云函数中打印的日志要到 云开发控制台=>云函数=>日志 中看
4. 每次对云函数文件有更新时,都要点击更新文件
5. 向云函数中传数据
(1)在miniprogram下的相应page页面中的js文件(movie.js)的生命周期函数中设置data传输数据
wx.cloud.callFunction({
name: 'getmovielist',
data: { ------------------------------------->传输数据
start: this.data.movielist.length,
count: 10
}
}).then(res => {
let result = JSON.parse(res.result).subjects
console.log(result)
this.setData({
movielist: this.data.movielist.concat(result)
})
}).catch(err => {
console.log(err)
})
(2)在云函数的index.js文件中通过event.接收数据
exports.main = async (event, context) => {
return await rp(`https://start=${event.start}&count=${event.count}`)---->拼接
.then(function (res) {
console.log(res)
return res
})
.catch(function (err) {
console.log(err)
});
}
- 在js文件中页面的初始数据处设置js文件中使用的data数据及方法,通过this.调用