uni-appH5与原生APP交互

691 阅读1分钟

ios:Objective-C ; Android:java;H5:uni-app

与原生交互定义好通讯规则

先拿到app的token再进行后续操作

                   **index.vue**
                   
                      onLoad() {
			this.H5getAppToken()
                      },
                      methods: {
                            H5getAppToken() {
                                    let data = { // data是与app通讯的参数
                                            "type": "GETHTTP", 
                                            "typeKey": "GETTOEN",
                                            "result": ""
                                    }
                                    this.$JSTOAPP(data)   
                                    this.getAppGiveH5Token()
                            },
                            getAppGiveH5Token() {
				window["onAppMateCallBack"] = (msg) => {  //msg是原生返回的参数 
					if (msg.typeKey == 'getToken') {
                                           uni.setStorageSync('$iosAndroidTOjsToken', msg.result.token);
					}
				}
			},
                        }
                        
                  ** main.js**
                       
                       Vue.prototype.$JSTOAPP = function jsToapp(data) {
                              window['jsToApp'](JSON.stringify(data));
                        };
                   //有时候需要判断系统调用 上面能用这里可以忽略
                     if (uni.getSystemInfoSync().platform == 'ios') {
                          window['jsToApp'] = (jsonStr) => {
                            window['webkit'].messageHandlers['jsCallWebView'].postMessage(jsonStr);
                          };
                    } else if (uni.getSystemInfoSync().platform == 'android') {
                          window['jsToApp'] = (jsonStr) => {
                            window['appMateJs']['jsCallWebView'](jsonStr);
                          };
                    }
                        
                      
                        

跳转app其他页面

例如:
                    <template>
                        <view class="">
                            <view class="" @click="getbackBtn()">
                                返回app
                            </view>
                        </view>
                    </template>
                    
                    <script>
                        export default {
                            methods: {
                                getbackBtn() {
                                    let data = {
                                            "type": "参数",
                                            "typeKey": "参数",
                                            "result": ""
                                    }
                                    this.$JSTOAPP(data)
                                },
                            }
                        }
                 
                    </script>
    

调试:app内部打开本地拼接参数 http://192.168.0.1/pages/index/index.vue?useJs=true

ps:Cannot read properties of undefined (reading 'jsCallWebView') 报错不能在浏览器运行只能在app内部

不断学习中...