Vue.js 노출 방법 이 WebView 에 사용 되 는 동작

외부 공공 js 파일 app.js 를 새로 만 듭 니 다.대상 을 정의 하고 출력 합 니 다.다음 과 같 습 니 다.

var hybrid = { 
}
 
window.Hybrid = hybrid
 
if (window.Vue) {
 window.Vue.use(hybrid)
}
 
export { hybrid }

필요 한 파일 에 app.js 를 도입 하거나 main.js 에 app.js 를 도입 합 니 다.다음 과 같 습 니 다.(main.js 에 도입)
import { hybrid } from './common/app'
Vue.prototype.$hybrid = hybrid
노출 이 필요 한 방법 을 하 이브 리드 대상 에 게 부여 합 니 다.다음 과 같 습 니 다.

보충 지식:Vue 프로젝트 methods 의 방법 을 window 에 노출
저 는 H5 입 니 다.저희 가 앱 을 쓸 때,즉 앱 내부 에 저희 H5 코드 가 끼 워 져 있 을 때 상호작용 문제 가 발생 할 수 있 습 니 다.만약 에 일반 html js css 를 사용 하면 큰 문제 가 없 을 것 입 니 다.일반 js 방법 은 모두 window 에 노출 되 어 있 기 때문에 저희 회사 의 앱 은 리 셋 을 사용 할 때 window 에서 H5 리 셋 방법 을 찾 습 니 다.
코드 가 이렇게 생 겼 어 요.

mounted() {
   //  backToday     window  ，       
   let me = this;
   window['logoClickBtn'] = (url) => {
     // Toast({ message: url, position: 'bottom', duration: 5000 });
     me.logoClickBtn(url)
   }
 },

그리고 나 서 나 는 대략적인 절차 가 어떤 것 인지 써 보 겠 다.그렇지 않 으 면 너 는 이렇게 쓰 는 것 만 알 고 있 지만,지난 단계 의 조작 은 무엇 이 었 느 냐?

이 방법 은 트리거 조건 이 있 을 것 입 니 다.다시 트리거 할 때 매개 변 수 를 입력 하고 APP 와 연결 에 성공 하면 우리 의 함수 인 callBack 을 다시 호출 합 니 다.
제 프로젝트 는 핸드폰 에 있 는 사진 과 핸드폰 사진 이 올 라 오 면 저희 페이지 에 이 모양 이 어야 하기 때 문 입 니 다.여기에 사진 설명 을 삽입 합 니 다.

코드 가 이 모양 이에 요.


APP 와 연결 이 성공 하면 우리 가 전달 한 방법 명 을 호출 할 것 입 니 다.그러나 APP 에서 우 리 를 호출 하 는 방법 은 모두 window 에 연결 하 는 방법 이기 때문에 우 리 는 우리 의 방법 을 window 에 노출 시 켜 야 합 니 다.Vue 프로젝트 의 this 는 window 가 아 닌 vue 를 가리 키 기 때 문 입 니 다.
코드 가 이 모양 이에 요.

mounted() {
     //  backToday     window  ，       
     let me = this;
     window['logoClickBtn'] = (url) => {
       me.logoClickBtn(url); //            
     }
   },

이 단 계 는 무엇 일 까요?바로 APP 가 우리 에 게 올 린 그림 의 경 로 를 주 고 이 경 로 를 이용 하여 다음 작업 을 하 는 것 이다.즉,

logoClickBtn(url) {
     this.form.logo = url; //         
   },

그리고 저희 페이지 에 그림 이 있 을 거 예요.

서비스 가 열 리 지 않 았 기 때문에 보 여주 지 않 겠 습 니 다.하하,이 절 차 는 통할 수 있 습 니 다.
이상 의 Vue.js 노출 방법 이 WebView 에 사용 하 는 조작 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 많은 사랑 을 주 셨 으 면 좋 겠 습 니 다.