zoukankan      html  css  js  c++  java
  • 探秘小程序(10):分享功能+webview

    场景:

    小程序页面用webview嵌入了h5页面,h5页面需要与小程序进行交互,h5页面内容不同,分享的链接也不一样

    分享功能:

    小程序的分享功能即用户点击小程序右上角,转发功能页面。可以指定分享卡片的标题,分享的图片,以及用户点击分享卡面的后跳转的地址demo如下所示:

    Page({

       onShareAppMessage: function (res) {

         if (res.from === 'button') { // 来自页面内转发按钮

           console.log(res.target)

         } 

        return {

           title: '自定义转发标题', path: '/page/user?id=123'

         }

       }

    })
    下面重点来了,踩过的坑了解一下:
    onShareAppMessage,方法必须包含return,并且return 有效,何时无效呢?如果将return包裹在setTimeout这样的异步函数中便无效。

    ②return中path,必须是小程序的页面路径

    ③path中如果包含了其他参数,而参数中又包含了url链接,需要进行encodeURIComponent/decodeURLComponent进行编码解码操作

    ④webview想小程序发送消息时,

      通过h5页面 通过jssdk的postmessage发送数据:wx.miniProgram.postMessage({ data: 'foo' }),必须有data!!!!!!!

      小程序通过bindmessage="XXX"进行获取数据:回调函数xxx中,通过e.detail.data拿到数据、

    ⑤:postmessage在分享、推出页面或者巴拉巴拉的场景下才会执行,那执行的顺序如何呢?猜的没错是postmessage先执行然后onshareAppMessage方法后执行。可是如果在postmessage中使用setData等异步方法进行赋值操作,share回调方法中可能会拿不到值哦~~~~



  • 相关阅读:
    linux 命令汇总
    vue搭建环境并创建项目
    CentOS中利用Docker安装RabbitMQ
    CentOS中利用Docker安装Redis
    CentOS双机中Docker下安装Mysql并配置互为主从模式
    CentOS下挂载数据盘
    bootstrap 自适应和响应式布局的区别
    xampp lampp 改变网页root目录的方法
    vue 自适应 Responsive 设计
    vue的二维码生成器
  • 原文地址:https://www.cnblogs.com/codeww/p/9138559.html
Copyright © 2011-2022 走看看