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

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);
        });
    }

  • 以请求豆瓣电影列表为例子，在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: '获取电影列表数据失败',
            })
          }
        })
      },

  • 滚动条滚动到底部时异步的加载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)
          }
        })
      },

  • 在云函数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);
        });
    }

•  获取用户信息
  • 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;
    }