小程序内嵌webView开发。 这边记录一下小程序最基本的功能点:webView和原生之间通信 、转发功能 和 canvas图文分享功能可以点击查看功能开发;下面直接看
自己无聊倒腾的小程序欢迎测试~圣诞节的小程序
官方文档的入口:web-view文档 ##1.web-view基本描述 web-view 组件是小程序自身提供的,提供的API较少。提供了一下4个API 不过我只用了前2个。
src: 加载页面的URL ( tips:这边需要是https类型的,开发的时候无所谓。微信开发者工具-设置-项目设置-选中下面选项)
bindMessage:这个就可以拿到webview页面发给小程序的消息。不过是在分享、销毁时候才能拿得到~
小程序wxml代码
//index.wxml
<web-view src="{{web_src}}"> </web-view>
小程序js代码
//index.js
Page({
data: {
web_src: "https://www.baidu.com", //webview内嵌的url
}
})
可以啦。小程序是不是已经跑起来了~
##2.web-view与原生交互
webview想和小程序原生通信只能通过 wx.miniProgram.postMessage这个API 。只能页面往原生发送消息。
页面需要引入微信JS-SDK1.3.2 自行下载 使用如下
<!-- html -->
<script
type="text/javascript"
src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
></script>
<script>
//跳转到原生的页面,如果跳转的页面时tabbar的页面则无效。需要用下方的跳转方式
wx.miniProgram.navigateTo('pages/index/index');
//跳转到对应的tabbar的页面
wx.miniProgram.switchTab('pages/index/index');
//判断当前是否是小程序页面
wx.miniProgram.getEnv(function(res) {
console.log(res.miniprogram) // true
})
//页面向小程序发送消息
wx.miniProgram.postMessage({ data:{foo: 'bar'} })
</script>
React开发的话也可以直接引入该JS,就可以直接使用,或者使用npm包的方式。需要在pageage.json引入
//package.json
"weixin-js-sdk": "^1.3.2",
//需要使用的页面import进来
import wx from 'weixin-js-sdk';
//发送消息等
wx.miniProgram.postMessage({ data:{foo: 'bar'} })
这边需要注意的的是使用wx.miniProgram.postMessage({ data:{foo: 'bar'} }) 括号里面的数据必须是以 data: {xxx:xx} key必须是data字段 否则没有值。
##3.小程序原生如何处理postMessage传值 webView通过postMessage传来值。我们只能在组件销毁、分享、后退才能进行处理。我们以触发分享为例:
//index.js
/**
* 拿到H5发生给小程序的消息
* res格式 [{xx:xx},{xx,xx}]
*/
msgHandler: function (res) {
//这边的res.detail.data是一个数组.存贮这每一次webview触发postMessage的值
let data = res.detail.data;
//如果获取最新的postMessage的值,取数组最后一个就可以了
let lastData = res.detail.data[res.detail.data.length - 1];
console.log("取到传过来的值,处理业务啦~")
},
//index.wxml
<web-view src="{{web_src}}" bindmessage="msgHandler" > </web-view>
##4.转发功能 转发功能是小程序最基本的功能。需要在我们的我们的页面中加入onShareAppMessage 上代码:
//pages/index/index.js
onShareAppMessage: function (options) {
//1.option.webViewUrl 这边拿到的就是当前展示webview的url链接
//2.为了防止链接有中文,倒是IOS打不开使用encodeURIComponent进行转码
let return_url = encodeURIComponent(options.webViewUrl);
//这边作为分享打开的页面
var path = "pages/sharepage/sharepage?shareUrl=" + return_url;
return {
title: title, //标题 如果不配置则不显示
path: path,//分享打开的路径
imageUrl: imgUrl,//分享的图片,如果不配置就截图 微信的机制
success: function (res) {
console.log("分享成功啦")
}
}
}
这边就是分享的页面。还有分享给别人。别人打开的页面也需要进行处理一下。添加sharePage文件
//sharePage.wxml
<web-view src="{{share_src}}"></web-view>
//sharePage.js
//该页面用于存放分享后的内嵌网页
Page({
data: {
share_src: ''
},
onLoad: function (options) {
//这边可以取到转发后需要打开的url
if(options&& options.shareUrl){
//因为转发前我们对url进行了转码。这边我们用decodeURIComponent进行次转码
this.setData({
share_src: decodeURIComponent(options.shareUrl),
})
}
}
})
功能记录到这边,主要是针对 webview的传值 和分享转发功能的开发。希望帮助到有需要的小伙伴。canvas图文分享功能在其他文章查看。canvas图文分享功能 溜了溜了~