vue cli로 기본 프로젝트 생성한 것을 기준으로 합니다.
* vue-cli설치와 기본 프로젝트 생성
yarn global add @vue/cli
...
yarn global add @vue/cli-init
...
vue init webpack vue-project
...
yarn run dev
* index.html
vue는 SPA이므로 객체가 제거되지 않고 전역에서 접근할 수 있도록 루트 html에 window.Kakao로 init합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-project</title>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>window.Kakao.init("JS키를 입력해주세요");</script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>* HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
... 생략
<h2>Ecosystem</h2>
<ul>
<li>
... 생략
<img
class="kakao_btn"
src="@/assets/kakaolink.png"
@click="kakaoLink"
/>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
methods: {
kakaoLink () {
window.Kakao.Link.sendDefault({
objectType: 'text',
text:
'기본 템플릿으로 제공되는 텍스트 템플릿은 텍스트를 최대 200자까지 표시할 수 있습니다. 텍스트 템플릿은 텍스트 영역과 하나의 기본 버튼을 가집니다. 임의의 버튼을 설정할 수도 있습니다. 여러 장의 이미지, 프로필 정보 등 보다 확장된 형태의 카카오링크는 다른 템플릿을 이용해 보낼 수 있습니다.',
link: {
mobileWebUrl:
'https://developers.kakao.com',
webUrl:
'https://developers.kakao.com'
}
}
)
}
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
...생략
'카카오 REST API & SDK > 카카오톡 공유하기' 카테고리의 다른 글
| 카카오톡 공유하기, 메시지 커스터마이징 (0) | 2022.10.25 |
|---|---|
| 카카오톡 미리보기 초기화 / OG(Open Graph) 캐시 삭제 (0) | 2022.08.26 |
| 카카오 링크/메시지 androidExecutioncParams, iosExecutionParams 사용 (0) | 2021.09.27 |
| 카카오톡 공유하기(구. 카카오 링크) 사용중 자주 겪는 에러와 문의 (0) | 2021.04.25 |
| android + (kakao Javascript SDK)하이브리드앱 예제 - 카카오톡 링크 (0) | 2021.03.21 |
댓글