wechat-小程序web-view与网页交互

title: wechat-小程序web-view与网页交互
categories: Wechat
tags: [wechat, web-view]
date: 2018-10-26 14:13:18
comments: false

wechat-小程序web-view与网页交互.

官方api说明文档: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

前置物料

启动好一个网页服务. 比如: http://localhost/SimpleThreeJsExample/index-wx.html

步骤

在Pages下新建一个小程序页面. (四件套)

web001.wxml
```
<view class="container"><web-view src="{{myWebUrl}}" bindmessage="msgHandler"></web-view>
</view>
```
- myWebUrl: 在程序上动态设置的目的网页地址
- msgHandler: 处理网页返回的信息

web001.js

import { gLog } from '../../src/module/log/Logger.js'; // 我自己封装的日志Page({data: { // 初始化 web001.wxml 中的初始数据myWebUrl: ""},onLoad: function (options) {gLog("--- web001 onLoad")let toWebArgs = {arg1: "hello",arg2: 1234,}let url = `http://localhost/SimpleThreeJsExample/index-wx.html?arg1=${toWebArgs.arg1}&arg2=${toWebArgs.arg2}`this.setData({ myWebUrl: url }); // 动态设置 url},/*** 用户分享时可获取当前<web-view/>的URL，即在onShareAppMessage回调中返回webViewUrl参数。  console.log(options.webViewUrl)*/onShareAppMessage: function (options) {gLog("--- web001 onShareAppMessage, options:", options)},// 网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }msgHandler: function(args) {// gLog("--- web001 msgHandler", args)gLog("--- web001 msgHandler", args.detail)},
})

网页 index-wx.html 引入 jweixin-1.3.2.js.

hello world
<!-- for 微信小程序 web-view -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script type="text/javascript" src="asset/js/wx/wx-logic.js"></script> <!-- 自定义逻辑代码 -->

wx-logic.js. 逻辑代码都丢到里面.

console.log("--- wx-logic ok")document.querySelector('#redirect').addEventListener('click', () => {wx.miniProgram.redirectTo({ // 调用小程序apiurl: '../index/index'})// wx.miniProgram.navigateBack({//    delta: 1// })
}, false);// 获取网络参数
function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) {var str = url.substr(1); strs = str.split("&"); for(var i = 0; i < strs.length; i ++) {theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); } } return theRequest;
} var args = GetRequest();
console.log("--- args", args)args.webData = "world" // 随便增加点web的数据
// 向小程序发送信息
wx.miniProgram.getEnv(function (res) {console.log(res.miniprogram) // trueif (res.miniprogram) {wx.miniProgram.postMessage({ data: args, args: args })console.log("asdasdasd")} else {console.log("just support wx")}
})// TODO: 直接显示模型
const threeHelper22 = new ThreeHelper();
threeHelper22.loadObject('asset/model/aaa002.fbx');

测试.
- 内网测试. 在小程序工具中需要勾选不校验 业务域名 验证
- 外网: TODO:
- 运行

参考

https://blog.csdn.net/laishaojiang/article/details/82181952
https://blog.csdn.net/qq_37235231/article/details/82053062

ps

小程序中暂时不能输出网页端的log.

fixed: 可以通过 alert("--- 加载模型: name:" + args.name) 把日志在开发工具中显示出来

源码仓库

https://github.com/yangxuan0261/WxMinProgram

wechat-小程序web-view与网页交互相关推荐

微信小程序与内嵌网页交互实现支付功能
上个月,小程序开放了新功能,支持内嵌网页,所以我就开始了小程序内嵌网页之路,之前我只是个小安卓. 内嵌网页中可使用JSSDK 1.3.0提供的接口,可坑就来了,居然不支持支付接口的调用,经过一番研究, ...
控制微信小程序web view的返回按钮
需求:点击web-view页面的左上角返回按钮时,显示弹窗,点击取消或确认后才能返回.(实际上点击返回按钮会直接返回上一页) 解决方法:由于webview使用的是微信浏览器打开的,我们可以使用js的H ...
机智云小程序启蒙：WebSocket网页控制
机智云小程序启蒙:WebSocket网页控制机智云Web版的JS远程控制设备,是调用了机智云开放的Open API和WebSocket API来实现的.这个是设计小程序最好的基础,也可以使无安卓设备 ...
微信小程序把view居中_初识微信小程序
"晓程序" 小程序连载笔记,通俗易懂,欢迎各位转发关注学习.未经作者授权,禁止转载初识小程序什么是微信小程序微信小程序,小程序的一种,英文名Wechat Mini Progr ...
WeChat小程序·微信登录·开发参考文档
文章目录 1 WeChat小程序登录业务开发 1.1 前期准备 1.2 微信登录流程 1.2.1 官方参考文档 1.2.2 登录流程时序图 1.2.3 步骤分析 1.2.4 重要方法说明 1.2.5 ...
微信小程序中界面常见的交互反馈、用户即时反馈
用户和小程序上进行交互的时候,某些操作可能比较耗时,我们应该予以及时的反馈以舒缓用户等待的不良情绪. 1 触摸反馈通常页面会摆放一些button按钮或者view区域,用户触摸按钮之后会触发下一步的操 ...
微信小程序篇_01 微信小程序与Java后端接口交互
微信小程序与Java后端接口交互准备创建后端项目创建小程序项目本文主要介绍小程序前后端数据的交互,实践演示. 准备创建后端项目我这里就创建一个SpringBoot项目作为演示. 在创建项目 ...
函数计算搭建小程序Web应用后端服务
简介:使用Severless架构搭建移动App.小程序和Web应用后端服务,弹性伸缩使用云资源. 直达最佳实践:[函数计算搭建小程序Web应用后端服务] 最佳实践频道:[点击查看更多上云最佳实践] 这 ...
实现小程序与SSM后台数据交互
实现小程序与SSM后台数据交互项目源码文章目录实现小程序与SSM后台数据交互项目源码 1.controller 2.小程序js 实现效果 1.controller @RequestMappin ...
微信小程序跳转第三方网页、第三方小程序。
微信小程序跳转第三方网页.第三方小程序. 微信小程序跳转第三方网页跳转第三方网页的问题微信小程序跳转第三方小程序微信小程序跳转第三方网页最近需要做一个小程序跳转携程的功能,首先考虑到的是跳转到 ...

wechat-小程序web-view与网页交互

title: wechat-小程序web-view与网页交互
categories: Wechat
tags: [wechat, web-view]
date: 2018-10-26 14:13:18
comments: false

前置物料

步骤

参考

ps

源码仓库

wechat-小程序web-view与网页交互相关推荐

最新文章

热门文章

wechat-小程序web-view与网页交互

title: wechat-小程序web-view与网页交互 categories: Wechat tags: [wechat, web-view] date: 2018-10-26 14:13:18 comments: false

前置物料

步骤

参考

ps

源码仓库

wechat-小程序web-view与网页交互相关推荐

最新文章

热门文章

title: wechat-小程序web-view与网页交互
categories: Wechat
tags: [wechat, web-view]
date: 2018-10-26 14:13:18
comments: false