微信小程序開發（三）----- 雲開發案例

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