微信小程序web-view实例

旧城等待， 2021-09-16 20:02 438阅读 0赞

![标题图][1240]

## 微信小程序`web-view`实例 ##

`index.js`

//index.js
    //获取应用实例
    const app = getApp()
    
    Page({
    
          /**
           * 页面的初始数据
           */
          data: {
    
          },
          goBaidu: function(e) {
            wx.navigateTo({
              url: '../out/out', 
              success: function(e) {
    console.log(e);
              }, 
              fail: function(err) {
    console.log(err);
              }
            })
          },
    
    
            /**
             * 生命周期函数--监听页面加载
             */
            onLoad: function(options) {
    
              },
    
              /**
               * 生命周期函数--监听页面初次渲染完成
               */
              onReady: function() {
    
              },
    
              /**
               * 生命周期函数--监听页面显示
               */
              onShow: function() {
    
              },
    
              /**
               * 生命周期函数--监听页面隐藏
               */
              onHide: function() {
    
              },
    
              /**
               * 生命周期函数--监听页面卸载
               */
              onUnload: function() {
    
              },
    
              /**
               * 页面相关事件处理函数--监听用户下拉动作
               */
              onPullDownRefresh: function() {
    
              },
    
              /**
               * 页面上拉触底事件的处理函数
               */
              onReachBottom: function() {
    
              },
    
              /**
               * 用户点击右上角分享
               */
              onShareAppMessage: function() {
    
              }
          })

`index.wxml`

<view class='wrapper'>
      <button class='wepay' bindtap='goBaidu'>点击跳转</button>
    </view>

`out.wxml`

<web-view src="https://www.baidu.com/"></web-view>

![图1][1]

![图2][2]

> 达叔小生：往后余生，唯独有你  
> You and me, we are family !  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： 达叔小生  
> [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

[1240]: /images/20210724/8df144631ea74fb598e27618c66618fc.png
[1]: /images/20210724/7fd6159309ab4cc2a8b1c9647ba49b56.png
[2]: /images/20210724/18a8cfa14cfd49088a7294db1394228a.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1