关于小程序

165 阅读1分钟
  1. 使用组件库
    (1)在终端中打开miniprogram
    (2)npm init -y
    (3)npm i @vant/weapp -S --production
    (4)在小程序开发页面左上角的工具中点击构建npm
    (5)在小程序开发页面右上角详情的本地设置中勾选使用npm模块
  2. 获取接口数据(以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)
    });
}
  1. 在js文件中页面的初始数据处设置js文件中使用的data数据及方法,通过this.调用