微信小程序开发(三)----- 云开发案例

时间:2024-04-17 16:50:48

1、发送请求

2、云函数中发送请求,例子request

  • https://github.com/request/request-promise    创建云函数movielist,右键在终端打开,输入  npm   install --save request
  • 然后输入 npm   install --save request-promise,当前云函数的package.json文件依赖为

            

  • 使用
    • 在云函数movielist的index.js中引入包
      // 云函数入口文件
      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);
          });
      }
      View Code
    • 以请求豆瓣电影列表为例子,在movie的js页面,刚进入页面获取数据,因此onLoad生命周期的代码为
      /**
         * 生命周期函数--监听页面加载
         */
        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: \'获取电影列表数据失败\',
              })
            }
          })
        },
      View Code
    • 滚动条滚动到底部时异步的加载10条数据,在生命周期onReachBottom中再次发送请求
      /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function () {
          this.getMovieList()
        }
  • 跳转详情页面演示
    • 点击按钮切换详情
      <button class="movie-comment" catchtap="onCatchSkipToComment" data-movieid="{{item.id}}">评价</button>
    • movie.js
      /**
         * 跳转评价的详情页面
         */
        onCatchSkipToComment(event) {
          // 跳转新页面,保留上一个页面
          wx.navigateTo({
            url: `../comment/comment?movieid=${event.target.dataset.movieid}`,
          })
        },
    • 在comment的js里面
      /**
         * 页面的初始数据
         */
        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)
            }
          })
        },
      View Code
    • 在云函数getDetail的index中
      // 云函数入口文件
      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);
          });
      }
      View Code
  •  获取用户信息
    • WXML
      <!-- 第一种方式 -->
      <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>
    • 微信小程序提供了开放能力open-data,同时button组件内的type属性也支持开放能力
  • 小程序的审核上线
    • 由于后端采用小程序的云开发(免费),因此不需要购买相对应的服务器;
    • 设置体验版:点击微信开发工具的  “上传”  按钮,上传到腾讯云;
    • 可以到微信公众平台版本管理中提交审核,审核通过后成为线上版本

3、遇到的问题

  1. 电影详情中高度模糊(毛玻璃)效果
    • WXML
       <view class=\'detail-container\' style=\'background: url({{movieDetail.images.large}})\'></view>
       <view class=\'detail-mask\'></view>
    • WXSS
      .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;
      }