微信小程序web-view显示html页面

最新推荐文章于 2024-05-02 14:26:53 发布

weixin_44812351

最新推荐文章于 2024-05-02 14:26:53 发布

阅读量1.9k

点赞数

文章标签：前端 javascript 微信小程序

本文链接：https://blog.csdn.net/weixin_44812351/article/details/125422533

版权

点击页面跳转到对应的网页，本来是想用豆瓣API获取数据再自己排版的，但是豆瓣API好像不能用了，所以直接跳转到都应的HTML页面。

film.js内容，把id和豆瓣页面的id对应

Page({

  /**
   * 页面的初始数据
   */
  data: {
    weekFilmList:[
      {
        name:"小鬼当家2",
        comment:"哇哦噢噢噢噢噢噢噢噢哦哦哦",
        imagePath:"../../img/1.jpg",
        aqiyiPlay:true,
        tencentPlay:false,
        youkuPlay:true,
        bilibiliPlay:true,
        id:1293353
      },
    ],
    currentIndex: 0,
    aqiyiImagePath:"../../img/爱奇艺.png",
    tencentImagePath:"../../img/腾讯视频.png",
    youkuImagePath:"../../img/优酷.png",
    bilibiliImagePath:"../../img/bilibili.png",
  },

  toFilmDetail:function(event){
    var filmId = event.currentTarget.dataset.filmId
    console.log(filmId);
    wx.navigateTo({
      url: '../filmDetail/filmDetail?id='+filmId,
    })
  },

filmDetail.wxml

<!--pages/filmDetail/filmDetail.wxml-->
<web-view src="{{path}}"></web-view>

filmDetail.js

// pages/filmDetail/filmDetail.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    path: "https://movie.douban.com/subject/1293081/"
  },

  /**
   * 生命周期函数--监听页面加载  
   */
  onLoad(options) {
    console.log(options.id)
    this.setData({
      fid: options.id
    })
    this.setData({
      path: "https://movie.douban.com/subject/"+options.id
    })
  },
})

先在data中随意设置一个path，然后再在onload中根据点击的页面获取对应的id设置正确的url，大概就是这样，主要就是要用到web-view，还有就是path需要获取对应的id。如果是固定的跳转到每个html页面的话，那直接src="……"就可以了。