当前位置：小青苔基地 > 开发 > app > 简单封装uniapp开发的App与webview页面交互jssdk
小青苔基地app

简单封装uniapp开发的App与webview页面交互jssdk

*** 项目开发中使用的  需求是打通两者之间的数据交互

嵌入的webview页面可以与App进行数据交互

H5调用App的方法（反之App可以使用该页面的方法）

[ 太懒了 没有整理 建议直接下载Demo查看 ]

demo示例下载

webview与App交互SDK.zip

 

jssdkimg01.jpgjssdkimg02.jpgjssdkimg03.jpgjssdkimg04.jpg

webview-js-skd.js

//webview-js-skd.js

// 类
class FyJsSDK {
  constructor() {}
  /**
   *               参数     |     类型     |     默认值     |     必选     |     @description
   * @param       action     |   string    |     null       |       y      |     定义的事件名
   * @param       payload    |   Object    |     {}         |       n      |     发送给App的数据
   */
  useFn(params) {
    return new Promise((resolve, reject) => {
      let { action, payload } = params;
      let Handle = function (event) {
        resolve(event.detail);
        window.removeEventListener(action, Handle);
      };
      window.addEventListener(action, Handle);
      uni.postMessage({
        data: {
          action,
          payload,
        },
      });
    });
  }

  // 获取用户数据
  getUserInfo() {
    return this.useFn({
      action: "get_user_info",
      payload: {},
    });
  }
  // 去商品详情
  toGoodsDetails(goods_id, goods_type) {
    return this.useFn({
      action: "to_goods_details",
      // 接受参数 {goods_id} ---> 商品id
      // 接受参数 {goods_type} ---> 商品渠道
      payload: {
        goods_id,
        goods_type,
      },
    });
  }

  // 通过App调用接口 取返回数据
  apiCall(url, params) {
    // 接受参数 {url} ---> 接口地址
    // 接受参数 {params} ---> 接口参数（Object类型）
    return this.useFn({
      action: "api_call",
      payload: {
        url,
        params,
      },
    });
  }
  // 拉起App分享

  /**
      * 参数params     |   类型     |     默认值    |@description 
      | -------------- |---------- | ------------ | --------------------------------------- |
      | shareUrl  	 | String	 | --           | 分享的地址`（type 为 0 时必传）`         |
      | shareTitle	 | String	 | --       	| 分享的标题                               |
      | shareContent	 | String	 | 分享的描述	 | 分享的描述`（type 为 1 时必传）`          |
      | shareImg  	 | String	 | 分享的图片	 | 分享的图片`（type 为 0、2、5 时必传）`    |
      | mediaUrl	     | String	 | --	        | 分享的音视频地址`（type 为 3、4 时必传）` |
      | type  	     | Number	 | 参考平台默认值| 分享形式，如图文、纯文字、纯图片、音乐、视频、小程序等，具体参考下面type说明|
      *** type 值说明
      | 值   	  | 说明 	 | 支持平台	     | 
      | ------- |--------- | ------------- |
      | 0   	  | 图文 	 | 微信、新浪微博 | 
      | 1   	  | 纯文字 	 | 全平台支持     |
      | 2   	  | 纯图片 	 | 全平台支持     |
      | 3   	  | 音乐 	 | 微信、QQ       |
      | 4   	  | 视频 	 | 微信、新浪微博 |
      *** 平台默认值
      | 平台       | 默认值 	  |
      | ---------- |---------  |
      | 新浪微博   | 0 	      |
      | 微信好友   | 0 	      |
      | 微信朋友圈 | 0 	      |
      | QQ        | 1 	     |
   */

  appShare(params) {
    return this.useFn({
      action: "use_app_share",
      payload: {
        params,
      },
    });
  }

  /**
  使用App弹窗
      参数params     |   类型     |     默认值    |     必选     |      @description 
  * @param title    | String     |      ''       |      否      |      如果没有此参数，则不显示title
  * @param content  | String     |     ''        |      是      |      显示的内容
  * @param contentColor | HexColor | '#7F7F7F'   |      否      |      内容文本颜色
  * @param showCancel | Boolean    |   true      |      否      |      是否显示“取消”按钮
  * @param cancelText | String     |   取消      |      否       |      “取消”按钮的文本
  * @param cancelColor | HexColor  |   '#696969' |      否       |      “取消”按钮的文本颜色
  * @param confirmText | String    |    确定     |       否      |      “确定”按钮的文本
  * @param confirmColor | HexColor | '#387BB8'   |       否      |      “确定”按钮的文本颜色
  * @param success   |  Function   |             |       否       |     res，返回{confirm: false, cancel: true}可进行点击按钮后的操作 
  * @param modalType |  Number     |     0       |       否       |     0: 默认弹窗  1: 搜索弹窗 2: 图片弹窗
  * @param imgSrc    | String      |       modalType = 2 时必传   |      活动图片路径
  * @param imgHeight | Number      | 335  |       |       否      |      活动图片高度 
  * @param imgWidth  | Number      | 265  |       |       否      |      活动图片宽度
  */
  showModal(params) {
    return this.useFn({
      action: "show_modal",
      payload: {
        params,
      },
    });
  }

  inviteFriends() {
    return this.useFn({
      action: "invite_friends",
      payload: {},
    });
  }
}

// 实例化封装的方法库  页面中直接使用 fy.方法名   即可使用该方法  例如：fy.showModal({content:'测试弹窗'})
const fy = new FyJsSDK();

function dispatchJS(eventname, data) {
  window.dispatchEvent(
    new CustomEvent(eventname, {
      detail: data,
    })
  );
}

/**
*  简单版
  function getUserInfo(callback){
      let userInfoHandle = function(event){
          callback(event.detail);
          window.removeEventListener('get_user_info', userInfoHandle);
      }
      window.addEventListener('get_user_info', userInfoHandle);
      uni.postMessage({
          data: {
              action: 'get_user_info'
          }
      });
  }
  function dispatchJS(eventname, data){
      window.dispatchEvent(new CustomEvent(eventname, {
          detail: data,
      }));
  }
*/

/**
* H5使用
* getUserInfo(function(res){
*    console.log(res);
*              //输出 {
                      uid:1,
                      nickName:'嘟嘟嘟嘟嘟嘟嘟嘟嘟'
                     };
* })
*
*/

H5页面使用    index.html

 

 

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>测试页</title>
    <!-- 引入uni的jsSDK -->
    <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js" type="text/javascript"
        charset="utf-8"></script>

    <style>
        button {
            font-weight: 300;
            font-size: 16px;
            text-decoration: none;
            text-align: center;
            line-height: 40px;
            height: 40px;
            padding: 0 40px;
            display: inline-block;
            appearance: none;
            cursor: pointer;
            border: none;
            box-sizing: border-box;
            transition-property: all;
            transition-duration: .3s;
            background-color: #FEAE1B;
            border-color: #FEAE1B;
            color: #FFF;
            width: 80%;
            margin: .5rem 10%;
        }
    </style>
</head>

<body>
    <div id="content">
    </div>
    <button onclick="clickBtn()">测试</button>
    <button onclick="clickBtn2()">进入商品详情</button>
    <button onclick="clickBtn3()">调用接口</button>
    <button onclick="clickBtn4()">调用分享</button>
    <button onclick="clickBtn5()">使用弹窗</button>
    <button onclick="clickBtn6()">邀请好友分享页面</button>
    <script src="./js/webview-js-skd.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        // 展示内容到页面
        function log(logtext) {
            document.getElementById('content').innerHTML = logtext
        }

        function clickBtn() {
            fy.getUserInfo().then(res => {
                log('得到个人信息：' + JSON.stringify(res))
            })
        }
        // 跳转到App内的商品详情
        function clickBtn2(goods_id = '597523922743', goods_type = '1') {
            fy.toGoodsDetails(goods_id, goods_type).then(res => {
                console.log(res)
            })
        }
        // 取数据格式
        function clickBtn3() {
            let url = '/api/mall/banner';
            let params = {
                test: 123456
            }
            fy.apiCall(url, params).then(res => {
                // 这里如果要打印数据需要转json
                console.log(JSON.stringify(res));
                console.log(res.code)
                log('得到数据：' + JSON.stringify(res))
            })
        }

        // 调用App的分享
        function clickBtn4() {
            let shareData = {
                shareUrl: "http://www.linfengya.cn",
                shareTitle: "小枫枫不疯",
                shareContent: "测试分享描述",
                shareImg: "http://www.linfengya.cn/content/uploadfile/202005/e1681588918254.jpg",
                type:0
            }
            fy.appShare(shareData).then(res => {
                // 这里如果要打印数据需要转json
                console.log(JSON.stringify(res));
            })
        }
        // 调用App的弹窗
        function clickBtn5() {
            fy.showModal({
                content:'测试弹窗'
            })
        }
        // 跳转App的某个页面
        function clickBtn6() {
            fy.inviteFriends()
        }

        document.addEventListener('UniAppJSBridgeReady', function () {
            uni.postMessage({
                data: {
                    action: 'webview_ready'
                }
            });
        });
    </script>
</body>

</html>

 

uni页面  webView.vue

<template>
	<view>
		<web-view :webview-styles="webviewStyles" @message="getMessage" :src="url"></web-view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				// 加载webview进度条颜色
				webviewStyles: {
					progress: {
						color: '#FEE039'
					}
				},
				url: 'http://***.*********.com/webview/index.html',//网络路径
				wv: null
			};
		},
		methods: {
			getMessage(e) {
				if (e.detail && e.detail.data && e.detail.data.length > 0) {
					for (let message of e.detail.data) {
						/**
						 * @param { wvParams }
						 * @description 获取到H5传入过来的参数
						 */
						let wvParams = message.payload;
						const actions = () => {
							// 加载完webview
							const webviewReady = () => {
								this.wv = this.$scope.$getAppWebview().children()[0];
							}
							// 发送user表数据
							const setUserInfo = () => {
								console.log(wvParams)
								this.wv.evalJS(`dispatchJS('${message.action}', ${JSON.stringify({uid:1,nickName:'嘟嘟嘟嘟嘟嘟嘟嘟嘟'})})`);
							}
							// 跳商品详情
							const toGoodsDetails = () => {
								let {
									goods_id,
									goods_type
								} = wvParams;
								uni.navigateTo({
									url: `/pages/goodsDetails/goodsDetails?goods_id=${goods_id}&goods_type=${goods_type}`
								})
							}
							// 帮忙API调用
							const apiCall = () => {
								console.log(wvParams)
								this.$fy.post(wvParams.url, wvParams.params).then(res => {
									this.wv.evalJS(`dispatchJS('${message.action}', ${JSON.stringify(res)})`);
								}).catch(err => {
									this.wv.evalJS(`dispatchJS('${message.action}', ${JSON.stringify(err)})`);
								})
							}
							const useAppShare = () => {
								let shareObj = appShare(wvParams.params, res => {
									this.wv.evalJS(`dispatchJS('${message.action}', '分享成功回调')`);
									// 分享成功后关闭弹窗
								});
							}
							const showModal = () => {
								this.$showModal(wvParams.params);
							}
							const inviteFriends = () => {
								uni.navigateTo({
									url: '/pages/inviteFriends/inviteFriends'
								})
							}
							
							return new Map([
								['webview_ready', () => webviewReady()],
								['get_user_info', () => setUserInfo()],
								['to_goods_details', () => toGoodsDetails()],
								['api_call', async () => await apiCall()],
								['use_app_share', async () => await useAppShare()],
								['show_modal', () => showModal()],
								['invite_friends', () => inviteFriends()],
							])
						}
						let action = [...actions()].filter(([key, value]) => (key == (message.action)));
						// 通过事件名找到对应指向的方法 直接调用并改变this指向；
						action.forEach(([key, value]) => value.call(this));
						
						console.log(message)
					}
				}
			}
		},
		onLoad(options) {
			if (options.url && options.url.indexOf('http') > -1) {
				this.url = decodeURIComponent(options.url)
			}
		},
	}
</script>

<style lang="scss" scoped>

</style>












<!-- 
 
------------------------简单理解------------------------

// if (message.action == 'webview_ready') {
// this.wv = this.$scope.$getAppWebview().children()[0];
// }
// if (message.action == 'get_user_info') {
// let userinfo = {
					uid:1,
					nickName:'嘟嘟嘟'
					};
// this.wv.evalJS(`dispatchJS('${message.action}', ${JSON.stringify(嘟嘟嘟嘟嘟嘟嘟嘟嘟)})`);
// }
// if (message.action == 'to_goods_details') {
// // dosomething
// }
 
 
 -->
1.本站默认解压密码为：xiaoqingtai.com
2.本站所有内容均由互联网收集整理，仅供大家参考、学习，禁止商用。
3.本站所有内容版权归原著所有，如有侵权请及时联系我们做删除处理。
请扫描下方二维码关注微信公众号或直接微信搜索“小青苔基地”关注
小青苔基地 » 简单封装uniapp开发的App与webview页面交互jssdk

小青苔基地 SVIP

分享到：

相关推荐

发表评论