赞
踩
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
src | string | 否 | webview 指向网页的链接。可打开关联的公众号的文章,其它网页需登录小程序管理后台配置业务域名。 | 1.6.4 | |
bindmessage | eventhandler | 否 | 网页向小程序 postMessage 时,会在以下特定时机触发并收到消息:小程序后退、组件销毁、分享、复制链接(2.31.1)。e.detail = { data },data是多次 postMessage 的参数组成的数组。 | 1.6.4 | |
bindload | eventhandler | 否 | 网页加载成功时候触发此事件。e.detail = { src } | 1.6.4 | |
binderror | eventhandler | 否 | 网页加载失败的时候触发此事件。e.detail = { url, fullUrl },其中 fullUrl 为加载失败时的完整 url | 1.6.4 |
web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。 支持的接口有:
接口名 | 说明 | 最低版本 |
---|---|---|
wx.miniProgram.navigateTo | 参数与小程序接口一致 | 1.6.4 |
wx.miniProgram.navigateBack | 参数与小程序接口一致 | 1.6.4 |
wx.miniProgram.switchTab | 参数与小程序接口一致 | 1.6.5 |
wx.miniProgram.reLaunch | 参数与小程序接口一致 | 1.6.5 |
wx.miniProgram.redirectTo | 参数与小程序接口一致 | 1.6.5 |
wx.miniProgram.postMessage | 向小程序发送消息,会在以下特定时机触发组件的message事件:小程序后退、组件销毁、分享、复制链接(2.31.1) | 1.7.1 |
wx.miniProgram.getEnv | 获取当前环境 | 1.7.1 |
(来自于微信小程序开发文档)
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
- npm install weixin-js-sdk
- //通过import引入
- import wx from "weixin-js-sdk";
- <template>
- <div class="home">
- <button @click="sentMessage()">点击</button>
- </div>
- </template>
-
- <script>
- import wx from "weixin-webview-jssdk";
- export default {
- methods: {
- //调用函数发送数据
- sentMessage() {
- // wx.miniProgram.navigateTo({ url: 'pages/index/index' })
- wx.miniProgram.postMessage({ data: { foo: {} } });
- }
- }
- };
- </script>
-
- <style lang="scss" scoped>
- .home {
- width: 100%;
- height: 600px;
- }
- </style>
- //在.wxml文件中添加web-view引入所需要展示的链接
- //bindGetMsg为接收到数据发送时触发的函数,在.js或者.ts文件下进行定义
- <web-view src="此处填写需要引入的链接" bindmessage="bindGetMsg" ></web-view>
- Page({
- bindGetMsg: function (res) {
- console.log('从h5页面获取到的信息----->', res)
- }
- });
- //wx.setStorageSync(key, value)第一个参数是存的key名称,第二个参数为需要存储的值
- Page({
- onLoad: function (options) {
- /**
- * --------如果请求的数据比较多,很占资源,可以利用小程序的缓存---------------------
- * 1.判断本地存储中有没有旧数据(有没有过期,time:Date.now(),数据,data:[...])
- * 2.如果有旧数据,同时就数据没有过期,就使用本地存储中的旧数据即可
- * 3.如果没有旧数据,则直接发送请求
- */
- // 获取本地存储中的数据
- const datas = wx.getStorageSync('datas');
- // 判断
- if (!datas) {
- // 没有缓存的数据
- console.log('没有缓存的数据')
- } else {
- // 可以用旧数据
- console.log('缓存数据存在', datas)
- }
- },
- bindGetMsg: function (res) {
- wx.setStorageSync('datas', res)
- console.log('从h5页面获取到的信息----->', res)
- }
- });
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。