Q&A

LINE LIFF BROWSER

Developed single page application in vue js and bind the code with liff id and working properly in development mode,but when it comes to build version the code is not working properly(like if I click on liff id then line internal browser is opening but content isn't displayed,same in development mode code works well inside line internal browser as well as external browser also!).

  • 0
  • 2
  • 294
  • twitter facebook

Can you show me your sample code? I can't resolve probrem

  • 1

<template> <v-app id="inspire"> <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app color="primary" dark > <!-- <v-app-bar-nav-icon @click.stop="drawer = !drawer" />-->

  <v-toolbar-title style="width: 350px">
    <a href="/" class="white--text" style="text-decoration: none"
      ><v-icon>mdi-truck</v-icon></a
    >
  </v-toolbar-title>
  <v-text-field
    flat
    solo-inverted
    hide-details
    prepend-inner-icon="mdi-magnify"
    label="Search"
    class="hidden-sm-and-down pl-10 ml-4"
  />
  <v-spacer />

    <div>
      <v-btn href="/profile" v-if="loggedIn" icon >
        <img
          v-if="loggedIn"
          :src="$store.state.user_data.image"
          class="rounded-circle"
          width="35"
        />
        <v-icon v-else>mdi-account-circle</v-icon>
      </v-btn>
  </div>


  <v-btn icon>
    <v-badge content="2" value="2" color="green" overlap>
      <v-icon>mdi-bell</v-icon>
    </v-badge>
  </v-btn>
  <v-btn href="/cart" icon>
    <v-badge content="2" value="2" color="green" overlap>
      <v-icon>mdi-cart</v-icon>
    </v-badge>
  </v-btn>
  <span class="ml-3">
    <v-btn @click="login" v-if="!loggedIn" icon>Login</v-btn>
    <v-btn v-else @click="logout" icon>Logout</v-btn>
  </span>
</v-app-bar>
<v-content>
  <v-bottom-navigation :value="activeBtn" color="primary" horizontal>
    <a href="/" class="v-btn">
      <span>Home</span>
    </a>
    <v-menu open-on-hover offset-y>
      <template v-slot:activator="{ on }">
        <v-btn v-on="on">
          <span>Shop</span>
        </v-btn>
      </template>
      <v-card class="mx-auto" max-width="344" outlined>
        <v-list-item
          v-for="(item, index) in items"
          :key="index"
          href="/shop"
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-card>
    </v-menu>
    <a href="/product" class="v-btn">
      <span>Product</span>
    </a>
    <v-btn href="/blog">
      <span>Blog</span>
    </v-btn>
    <!-- <v-btn href="/profile">
      <span>Profile</span>
    </v-btn> -->
  </v-bottom-navigation>
</v-content>
<v-content v-if="loggedIn"
  ><p class="overline text-center">
    Hello, <b>{{ $store.state.user_data.name }}</b>
  </p></v-content
>
<router-view />
<v-footer :padless="true">
  <v-card flat tile width="100%" class="secondary white--text text-center">
    <v-card-text>
      <v-btn class="mx-4 white--text" icon>
        <v-icon size="24px">mdi-home</v-icon>
      </v-btn>
      <v-btn class="mx-4 white--text" icon>
        <v-icon size="24px">mdi-email</v-icon>
      </v-btn>
      <v-btn class="mx-4 white--text" icon>
        <v-icon size="24px">mdi-calendar</v-icon>
      </v-btn>
      <v-btn class="mx-4 white--text" icon>
        <v-icon size="24px">mdi-delete</v-icon>
      </v-btn>
    </v-card-text>

    <v-card-text class="white--text pt-0">
      Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet.
      Mauris cursus commodo interdum. Praesent ut risus eget metus luctus
      accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim
      a sit amet dui. Duis commodo vitae velit et faucibus. Morbi vehicula
      lacinia malesuada. Nulla placerat augue vel ipsum ultrices, cursus
      iaculis dui sollicitudin. Vestibulum eu ipsum vel diam elementum
      tempor vel ut orci. Orci varius natoque penatibus et magnis dis
      parturient montes, nascetur ridiculus mus.
    </v-card-text>

    <v-divider>
      
    </v-divider>

    <v-card-text class="white--text">
      {{ new Date().getFullYear() }} — <strong>WeCode</strong>
    </v-card-text>
  </v-card>
</v-footer>

</v-app> </template> <script> export default { data() { return { isHidden:true, // 1 items: [ { title: "T-Shirts" }, { title: "Jackets" }, { title: "Shirts" }, { title: "Jeans" }, { title: "Shoes" }, ], activeBtn: 1, defaultLiffId: "1528952656-KGNKK2jZw" // loading:false, // a:HTMLElement }; }, created() { this.login(); this.getData();

let uri = window.location.href.split("?");
let getVars = {};
if (uri.length == 2) 
{
    let vars = uri[1].split("&");
    let tmp = "";
    vars.forEach(function (v) {
      tmp = v.split("=");
      if (tmp.length == 2) getVars[tmp[0]] = tmp[1];
    });
    console.log(getVars);
}

if (Object.keys(getVars).indexOf("code") > -1) 
{
    this.getData();
}

}, computed: { loggedIn() { return this.$store.state.loggedIn; }, }, methods: { profile() { console.log("Profile"); this.$router.push("/profile"); }, login() { let self = this; console.log("Login"); liff.init ({ liffId: self.defaultLiffId, withLoginOnExternalBrowser: true }) .then(() => { if (!liff.isLoggedIn()) { liff.login ({ // a:innerHTML=<i class='fa fa-spin fa-spinner'></i>, redirectUri:"", withLoginOnExternalBrowser:true }); } }).catch((err) => { console.log("Initialize app", err); }); }, logout() { let self = this; window.liff.init ({ liffId: self.defaultLiffId, }) .then(() => { if(liff.isLoggedIn()) { liff.logout(); self.$store.commit("logOut"); this.$router.push({ name: "Home" }); localStorage.clear(); } }); }, getData() { let self = this; window.liff.init ({ liffId: self.defaultLiffId, }).then(() => { liff.getProfile().then(function (profile) { self.$store.commit("logIn", profile); }); }); }, }, }; </script>

  • 0
本当によろしいですか? question.vm