经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序web-view实例
来源:cnblogs  作者:达叔小生  时间:2018/11/1 9:19:30  对本文有异议

标题图

微信小程序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

<!--index.wxml-->
<view class='wrapper'>
  <button class='wepay' bindtap='goBaidu'>点击跳转</button>
</view>

out.wxml

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

图1

图2

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

结语

  • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞
 友情链接:直通硅谷  点职佳  北美留学生论坛