文章目录
前言
一、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
})
},
})<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
// })
},
})<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()
})
});
