微信小程序-数据交互

1.主要代码

movies.wxml文件

<navigator url='/movieDetail/movieDetail?index={{item}}' wx:for='{{moviesArr}}' wx:key='index'>
  <view class='moviesContainer'>
    <image class='movieImg' src="{{item.images.large}}"></image>
    <view class='movie_detail'>
      <text class='movie_name'>{{item.original_title}}</text>
      <text class='movie_year'>年份:{{item.year}}</text>
      <text clas='movie_director'>导演：{{item.director[0].name}}</text>
    </view>
    <text class='movie_rating'>{{item.rating.average}}</text>
  </view>
</navigator>

movies.js文件

　　使用wx.request发送请求，在小程序中出于安全考虑所有的协议都是https协议，且如果没有用开发设置中配置请求的连接时无法访问的。可在（详情-本地设置-不检验合法...）设置。注意一个微信小程序的并发网络请求数量只限制在最多5个。所以在详情页面中，避免不要再发送请求。因此，在主页面获取相关信息后直接存入appDatas中，进入详情界面后直接从中取数据。

 

const MOVIE_URL = 'http://t.yushu.im/v2/movie/in_theaters?apikey=0b2bdeda43b5688921839c8ecb20399b';
let appDatas = getApp();

Page({

  //页面的初始数据
  data: {
    moviesArr:[]
  },

  //生命周期函数--监听页面加载
  onLoad: function (options) {
    wx.request({
      url: MOVIE_URL,
      sucess: (res)=>{
        更新状态值
        this.setData({
          moviesArr:data.subjects
        }) 
        appDatas.globalData.moviesArr = moviesArr   //将数据存入到appDatas中
      }
    })
  }
})

movieDetail.wxml文件

<view class='movieDetailContainer'>
  <image class='movie_img' src='{{movieDetail.images.large}}'></image> 
  <text class='movie_name'>{{movieDetail.original_title}}</text>
  <view class='movie_detail'>
    <text>评分：{{movieDetail.rating.average}}</text>
    <text>导演：{{movieDetail.directors[0].name}}</text>
    <text>主演：{{movieDetail.casts[0].name}}</text>
  </view>
  <button>我要观影</button>
</view>

movieDetail.js文件　

let appDatas = getApp();  //去除数据

Page({

  //页面的初始数据
  data: {
    movieDetail: {}
  },

  //生命周期函数--监听页面加载
  onLoad: function (options) {
    console.log(options);
    this.setData({
      movieDetail: appDatas.globalData.moviesArr(option.index)
    })
  }
})

App.js文件

App({
  globalData: {
    userInfo: null,
    isPlay: false,
    pageId: null,
    moviesArr: []
  }
})

App.json

{
  "pages": [
    "pages/index/index",
    "pages/movies/movies",
    "pages/list/list",
    "pages/detail/detail",
    "pages/movieDetail/movieDetail"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#489881",
    "navigationBarTitleText": "welcome",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "requiredBackgroundModes": [
    "audio"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/list/list",
        "text": "文与字",
        "iconPath": "/images/tab/yuedu.png",
        "selectedIconPath": "/images/tab/yuedu_hl.png"
      },
      {
        "pagePath": "pages/movies/movies",
        "text": "电影频道",
        "iconPath": "/images/tab/dianying.png",
        "selectedIconPath": "/images/tab/dianying_hl.png"
      }
    ]
  }
}