前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【愚公系列】2022年09月 微信小程序-webview内嵌网页的授权认证

【愚公系列】2022年09月 微信小程序-webview内嵌网页的授权认证

作者头像
愚公搬代码
发布2022-09-28 18:50:38
7270
发布2022-09-28 18:50:38
举报
文章被收录于专栏:历史专栏历史专栏

文章目录

前言

一、webview内嵌网页的授权认证

1.内嵌页面

2.登录页面

二、web端相关函数

1.判断是否是小程序环境

前言

随着微信小程序的广泛应用,小程序的用户越来越多,但受其小程序体积限制的影响,不能够完全满足用户的要求,应运而生的web-view组件很好的解决的这一问题。

web-view主要是内嵌H5网站页面又以下几个优点:

内嵌web-view能够直接运行在小程序中,大大减少了用户的开发成本

能够实现小程序与h5的跳转,有良好的扩展性,方便用户多端间引流

小程序相关API

一、webview内嵌网页的授权认证

1.内嵌页面

代码语言:javascript
复制
// miniprogram/pages/2.18/web-view/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    url:'',
    webViewData:{}
  },
  onReceivedMessage(e){
    let data = e.detail.data
    // data可能是多次 postMessage 的参数组成的数组
    if (Array.isArray(data)) data = data[0]
    console.log('onReceivedMessage',JSON.parse(data));
    this.setData({
      webViewData:JSON.parse(data)
    })
  },
  onShareAppMessage(options) {
    console.log('title',this.data.webViewData.title);
    console.log('webViewUrl',options.webViewUrl)
    return {
      title: this.data.webViewData.title,
      path: `/web-view/index?web-view-url=${options.webViewUrl}`
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let token = getApp().globalData.token
    let url = `http://localhost:3000/user/web-view?token=${token}`
    console.log('token', token);
    this.setData({
      url
    })
  },
})

代码语言:javascript
复制
<web-view bindmessage="onReceivedMessage" src="{{url}}" style="z-index:-1"></web-view>

2.登录页面

代码语言:javascript
复制
Page({
  /**
   * 页面的初始数据
   */
  data: {},
  onShareAppMessage:function(options) {
    console.log('分享')
    return {
      title: '登陆',
      path: '/pages/index'
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // wx.showShareMenu({
    //   withShareTicket: true
    // })
  },
})

代码语言:javascript
复制
<view class="page-section">
    <text class="page-section__title">微信登陆</text>
    <view class="btn-area">
    <button bindgetuserinfo="login" open-type="getUserInfo" type="primary">登陆</button>
    <navigator style="padding-top:20rpx;" url="/web-view/index" open-type="navigate">web view</navigator>
    <button open-type="share" type="primary">分享</button>
    </view>
</view>

二、web端相关函数

1.判断是否是小程序环境

代码语言:javascript
复制
<!DOCTYPE html>
<html>

<head>
  <title>{{title}}</title>
  <script type="text/javascript" src="/static/js/jweixin-1.6.0.js"></script>
  <script type="text/javascript" src="/static/js/jquery.js"></script>
  <script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
  <style>
    * {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <h1>{{title}}</h1>

  {{if title}}
  <p>has title.</p>
  {{/if}}

  <p>
  {{each title $value $index}}
  <span>{{$index}}:{{$value}}</span>
  {{/each}}
  </p>

  <p>
    {{each arr }}
    <span>{{$index}}:{{$value}}</span>
    {{/each}}
  </p>

  <p>{{now | dateFormat "yyyy-MM-dd hh:mm:ss"}}</p>

  <p>Art-Template Welcome to {{title}}</p>
  <input id="name" value="ly" /><br /><br />
  <input id="send-btn" type="button" value="send"></input>
  <p id="output"></p>
  <input id="share-btn" type="button" value="share" style="width: 100px;height:30px;border:solid 1px grey;"></input>
  <script type="text/javascript">
    

    // 当处于小程序内
    document.addEventListener('intoMiniprogram', () => {
      retrieveHomeData()
    }, false)

    // 检查是不是位于小程序内
    let isInMiniprogram = false
    function changeIsInMiniprogramState() {
      if (!isInMiniprogram) {
        isInMiniprogram = true
        $.cookie("isInMiniprogram", true)
        document.dispatchEvent(new Event('intoMiniprogram'))
        console.log('isInMiniprogram', isInMiniprogram);
      }
    }
    if (/token=\d+/.test(window.location.search)) {
      changeIsInMiniprogramState()
    } else if ( /miniProgram/.test(navigator.userAgent) ){
      changeIsInMiniprogramState()
    }else if (($.cookie("isInMiniprogram") || '') == 'true') {
      changeIsInMiniprogramState()
    } else {
      function onWeixinJSBridgeReady() {
        if (window.__wxjs_environment === 'miniprogram'){
          changeIsInMiniprogramState()
        }
      }
      if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
        document.addEventListener('WeixinJSBridgeReady', onWeixinJSBridgeReady, false)
      } else {
        onWeixinJSBridgeReady()
      }
    }
    // retrieveHomeData()

    // 在小程序中,模拟调用接口
    function retrieveHomeData() {
      $('#send-btn').bind('click', (e) => {
        let name = $('#name').val()
        console.log('name', name);
        let authorization = $.cookie("Authorization") || ''
        $.ajax({
          url: `http://localhost:3000/user/home?name=${name}`,
          method: 'get',
          headers: {
            'Authorization': authorization
          },
          success(res) {
            console.log('res', res)
            $("#output").text(JSON.stringify(res))
          },
          fail(err) {
            $("#output").text(err)
          }
        })
      })
      $('#share-btn').bind('click', (e) => {
        console.log('share btn click')
        wx.miniProgram.postMessage({
          data: JSON.stringify({
            action: 'share',
            title: window.document.title
          })
        });
        // wx.miniProgram.navigateBack()
      })
    }
  </script>
  <script type="text/javascript" src="/static/js/vconsole.min.js"></script>
  <script>
    // 初始化
    var vConsole = new VConsole();
    console.log('Hello world');
  </script>
</body>
</html>

接口端

代码语言:javascript
复制
// 一个web-view页面,是给小程序加载的
router.all('/web-view', async function (ctx) {
  let token = ctx.request.query.token
  ctx.session.sessionKeyRecordId = ~~ctx.session.sessionKeyRecordId + 1

  if (token) ctx.cookies.set('Authorization', `Bearer ${token}`, { httpOnly: false });
  let title = 'web view from koa' + ctx.session.sessionKeyRecordId

  await ctx.render('index', {
    title,
    arr: [1, 2, 3],
    now: new Date()
  })
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-09-07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档