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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了wechat-小程序web-view与网页交互，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2849字，纯文字阅读大概需要5分钟。

内容图文

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

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

---

前置物料

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

---

步骤

1. 在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: ""
       },
       onl oad: function (options) {
         gLog("--- web001 onl oad")
     
         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)
       },
     })
     

2. 网页 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({ // 调用小程序api
     		url: '../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) // true
     	if (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');
     

3. 测试.

   • 内网测试. 在小程序工具中 需要勾选 不校验 业务域名 验证

   • 外网: TODO:

   • 运行

---

参考

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

---

ps

• 小程序中暂时不能输出 网页端 的log.(知道麻烦告诉我一下下)

内容总结

以上是互联网集市为您收集整理的wechat-小程序web-view与网页交互全部内容，希望文章能够帮你解决wechat-小程序web-view与网页交互所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---