自从微信小程序支持内嵌网页之后,呼声高涨得不得了。的确,这个确实让我开发我们公司的小程序高效了很多,主要是可以引入现有的功能完整的普通网页。需求是这样子的:小程序启动授权等操作成功后直接跳转到内嵌网页,内嵌的网址也就是公司的官网产品项目,而后,产品项目里面的各个网页都能支持分享操作,当然,对方打开的一定是你分享的那个页面而不是整个小程序初始页面。解决思路:官方提供的转发接口onShareAppMessage中自定义路径即可转发指定的页面。使用web-view存放内嵌网页,路径以参数的形式传递,但初始化加载页面的时候再填充路径。web-viewsrc=”web_src”/web-view一开始是想着既然内嵌网页的路径可以动态添加,那我转发时再重新跳转回内嵌网页,附上我转发的这个地址就好了,但是,但是,打开转发了的页面时,竟然提示找不到路径,可谓愁死人了。控制台打印检查发现,onShareAppMessage(options)中options携带了一个参数webViewUrl,即当前转发的文件的路径,在转发成功之后,通过this.setData({web_src:options.webViewUrl})赋值后,打开的转发页面依旧提示找不到页面。经仔细研究onShareAppMessage接口中各个值的含义和功能后,得出以下结论onShareAppMessage:function(res){if(res.from===’button’){//来自页面内转发按钮console.log(res.target)}return{title:’自定义转发标题’,path:’/page/user?id=123′,success:function(res){//转发成功},fail:function(res){//转发失败}}}path:转发路径,注:当前页面path,必须是以/开头的完整路径个人对这个path的理解是这样子的,微信小程序接口里面的path,是不是指代微信小程序里跳转到其他页面的路径,如果一个内嵌路径无法实现转载操作页面和分享页面,那我就分开好了,再加一个内嵌路径来专门存放转发的结果。果不其然,这样子一处理,还真能实现了需求,话不多说,上代码:步骤一:准备工作,在app.js里定义一个全局变量,用于存放内嵌网页的地址,如,globalData:{userInfo:null,ctxPath:’https://xxxxxx’,}步骤二:在初始化页面,即首页存放一个按钮,定义跳转到内嵌网页的事件,如,buttonclass=”welcom-button”bindtap=”toHome”开启/button对应的事件为:toHome:function(){letthat=this;wx.redirectTo({url:’../pcweb/pcweb’})},步骤三:使用web-view加载内嵌网页,(注:pcweb.wxml中)web-viewsrc=”{{web_src}}”/web-view对应的事件为://生命周期函数–监听页面加载onLoad:function(options){//初始化页面的时候加载补充内嵌网页的路径letthat=this;that.setData({web_src:ctxPath})},备注:因为内嵌网页网址之前存放成全局变量在app.js里,故我们要先引入全局变量varapp=getApp();varctxPath=app.globalData.ctxPath;//内嵌网页的路径分享操作实现:onShareAppMessage:function(options){letthat=thisletreturn_url=options.webViewUrl//分享的当前页面的路径varpath=’pages/sharepage/sharepage?shareUrl=’+return_url//小程序存放分享页面的内嵌网页路径console.log(path,options)return{title:’内嵌网页分享’,path:path,success:function(res){//转发成功wx.showToast({title:”转发成功”,icon:’success’,duration:2000})},fail:function(res){//转发失败}}},步骤四:定义存放分享页面的内嵌网页路径,即sharepage.wxml,附上如下代码:web-viewsrc=”{{share_src}}”/web-view//share_src:分享后的路径定义事件:onLoad:function(options){console.log(options)letthat=this;that.setData({share_src:options.shareUrl,})},打开分享的页面时获取之前分享操作时传递的参数,即路径,并在打开分享的初始化函数中填充路径值options.shareUrl,同样,倘若想要在打开分享的页面中进行分享操作的话,然后需要补充分享事件,只是这次跳转的路径指向本身,并且分享成功时将分享时的路径再次赋值给share_src,onShareAppMessage(options){varthat=thisvarreturn_url=options.webViewUrlvarpath=’pages/sharepage/sharepage?shareUrl=’+return_url//分享成功后跳转回本页面console.log(path,options)return{title:’内嵌网页分享’,path:path,success:function(res){//转发成功wx.showToast({title:”转发成功”,icon:’success’,duration:2000})that.setData({share_src:return_url//再次赋值分享内嵌网页的路径})},fail:function(res){//转发失败}}},至此,小程序内嵌网页的分享就完成了。总结:当本页面执行操作受阻了,不妨添加个页面时候,也许就会有不一样的收获。我的Github微信小程序内嵌网页分享项目地址:https://github.com/sennyla/WebchatShare.githttps://github.com/sennyla/WebchatShare.githttps://github.com/sennyla/WebchatShare.githttps://github.com/sennyla/WebchatShare.git
微信网页怎么制作,微信小程序,实现内嵌网页的分享
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信网页怎么制作,微信小程序,实现内嵌网页的分享
相关推荐
七内蒙古E企盈小程序夕专享小程序特色模板 俘获用户“芳心” – E企盈小程序
数据恢复软件(二):用C++重写恢复B乐都县E企盈小程序MP位图文件的小程序
公众号再次改版高坪区E企盈小程序小程序又多了一个入口
微信小程序加载图片时,湘桥区E企盈小程序先拉长,再恢复正常
转:(很有用)有多个按钮,点击一个变色,点击另吴中区E企盈小程序一个变色,原来的恢复颜色的方法
第12课微信小程序Component构造器自道里区E企盈小程序定义组件:
导航中的南海区E企盈小程序小竖线总结
小程序:after实现德格县E企盈小程序1px纵向分割线
汉沽区E企盈小程序企业微信内测朋友圈和客户群功能:小程序C位出道!
小程序运行加载密山市E企盈小程序机制
小程通城县E企盈小程序序中间有字的分隔线
公众号和小程序可以同名了名称支持同主体复盘锦E企盈小程序用
最新评论
独特万商直播系统,直播系统技术开发公司
万商直播系统开发公司
优秀的团队,万商直播管理系统
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务