首頁 探索 說明
註冊 登入
jared
/
liff_test
1
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
瀏覽代碼

w

Jared 2 年之前
父節點
a61418809a
當前提交
c56e5c0511
共有 7 個文件被更改，包括 518 次插入 和 0 次删除
分割檢視 顯示文件統計
  1. 二進制
      liff2/icon/badge.png
  2. 二進制
      liff2/icon/example.png
  3. 二進制
      liff2/icon/icon.ico
  4. 二進制
      liff2/icon/liff.png
  5. 162 0
      liff2/index.html
  6. 272 0
      liff2/js/liff-functions.js
  7. 84 0
      liff2/js/liff-init.js

二進制
liff2/icon/badge.png
查看文件


二進制
liff2/icon/example.png
查看文件


二進制
liff2/icon/icon.ico
查看文件


二進制
liff2/icon/liff.png
查看文件


+ 162 - 0
liff2/index.html
查看文件 

@@ -0,0 +1,162 @@
 
+<!DOCTYPE html>
 
+<html>
 
+  <head>
 
+    <meta charset="utf-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+    <title>ChoozMo LINE傳單</title>
 
+    <link rel="shortcut icon" href="icon/icon.ico" type="image/x-icon" />
 
+    <link rel="icon" href="icon/icon.ico" type="image/x-icon" />
 
+    <style media="screen">
 
+      body {
 
+        background: #eceff1;
 
+        color: rgba(0, 0, 0, 0.87);
 
+        font-family: Roboto, Helvetica, Arial, sans-serif;
 
+        margin: 0;
 
+        padding: 0;
 
+      }
 
+      #message {
 
+        background: white;
 
+        max-width: 1000px;
 
+        margin: 10px auto 16px;
 
+        padding: 32px 24px;
 
+        border-radius: 10px;
 
+      }
 
+      #message h2 {
 
+        color: #ffa100;
 
+        font-weight: bold;
 
+        font-size: 30px;
 
+        margin: 0 0 8px;
 
+      }
 
+      #message h1 {
 
+        font-size: 22px;
 
+        font-weight: 300;
 
+        color: rgba(0, 0, 0, 0.6);
 
+        margin: 0 0 16px;
 
+      }
 
+      #message p {
 
+        line-height: 140%;
 
+        margin: 16px 0 24px;
 
+        font-size: 14px;
 
+      }
 
+      #message a {
 
+        display: block;
 
+        text-align: center;
 
+        background: #039be5;
 
+        text-transform: uppercase;
 
+        text-decoration: none;
 
+        color: white;
 
+        padding: 16px;
 
+        border-radius: 4px;
 
+      }
 
+      #message,
 
+      #message a {
 
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 
+      }
 
+      #load {
 
+        color: rgba(0, 0, 0, 0.4);
 
+        text-align: center;
 
+        font-size: 13px;
 
+      }
 
+      @media (max-width: 600px) {
 
+        body,
 
+        #message {
 
+          margin-top: 0;
 
+          background: white;
 
+          box-shadow: none;
 
+        }
 
+        body {
 
+          border-top: 16px solid #ffa100;
 
+        }
 
+      }
 
+      table {
 
+        margin-top: 10px;
 
+        border: 2px solid black;
 
+        border-collapse: collapse;
 
+        width: 100%;
 
+      }
 
+
 
+      table td {
 
+        border: 1px solid black;
 
+      }
 
+
 
+      table td.shrink {
 
+        white-space: wrap;
 
+        font-size: 19px;
 
+        padding: 5px;
 
+        background-color: yellow;
 
+      }
 
+      table td.shrink_context {
 
+        white-space: wrap;
 
+        font-size: 19px;
 
+        padding: 5px;
 
+        background-color: rgb(0, 255, 106);
 
+      }
 
+      table td.shrink_top {
 
+        white-space: nowrap;
 
+        background-color: black;
 
+        color: white;
 
+        font-size: 25px;
 
+      }
 
+      table td.expand {
 
+        width: 99%;
 
+        white-space: wrap;
 
+        font-size: 19px;
 
+        padding: 5px;
 
+      }
 
+      table td.expand_top {
 
+        width: 99%;
 
+        white-space: wrap;
 
+        background-color: black;
 
+      }
 
+      tr:hover {
 
+        background-color: gray;
 
+      }
 
+
 
+      button {
 
+        background-color: #4caf50; /* Green */
 
+        border: none;
 
+        color: white;
 
+        padding: 10px 10px;
 
+        text-align: center;
 
+        text-decoration: none;
 
+        display: inline-block;
 
+        font-size: 16px;
 
+        border-radius: 5px;
 
+        -webkit-transition-duration: 0.4s; /* Safari */
 
+        transition-duration: 0.4s;
 
+        cursor: pointer;
 
+      }
 
+
 
+      button:hover {
 
+        background-color: honeydew;
 
+        color: black;
 
+      }
 
+    </style>
 
+  </head>
 
+  <body>
 
+    <div id="message">
 
+      <center><h2>ChoozMo LINE傳單</h2></center>
 
+
 
+      <center>
 
+        <img
 
+          src="https://firebasestorage.googleapis.com/v0/b/uce-bot.appspot.com/o/user.jpg?alt=media&token=554b90c5-562c-469a-bfee-f36b5e3f54c9"
 
+          style="border-radius: 10px;"
 
+          width="150px"
 
+          height="150px"
 
+          id="profileImage"
 
+        />
 
+      </center>
 
+      <center>
 
+        <button onclick="login()">登入LINE</button>
 
+        <button onclick="logout()">登出LINE</button>
 
+        <button onclick="shareTargetPicker()">發傳單給最多五個好友</button>
 
+      </center>
 
+
 
+    </div>
 
+
 
+    <p id="load">ChoozMo</p>
 
+    <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
 
+    <script src="js/liff-init.js?1234"></script>
 
+    <script src="js/liff-functions.js?12345"></script>
 
+  </body>
 
+</html>

+ 272 - 0
liff2/js/liff-functions.js
查看文件 

@@ -0,0 +1,272 @@
 
+function getProfile() {
 
+  liff
 
+    .getProfile()
 
+    .then(profile => {
 
+      console.log(JSON.stringify(profile));
 
+      window.alert(JSON.stringify(profile));
 
+    })
 
+    .catch(e => {
 
+      console.log(e);
 
+      window.alert(e);
 
+    });
 
+}
 
+function getAccessToken() {
 
+  window.alert(liff.getAccessToken());
 
+}
 
+function getContext() {
 
+  window.alert(JSON.stringify(liff.getContext()));
 
+}
 
+
 
+function sendMessage() {
 
+  liff
 
+    .sendMessages([{ type: "text", text: "中文測試 Hello from LIFF2.0" }])
 
+    .then(() => {
 
+      window.alert("Message has been sent");
 
+    })
 
+    .catch(e => {
 
+      window.alert(e);
 
+    });
 
+}
 
+
 
+function login() {
 
+  liff.login();
 
+}
 
+
 
+function scanCode() {
 
+  liff
 
+    .scanCode()
 
+    .then(result => {
 
+      window.alert(JSON.stringify(result));
 
+    })
 
+    .catch(e => {
 
+      window.alert(e);
 
+    });
 
+}
 
+
 
+function openWindow() {
 
+  liff.openWindow({
 
+    url: "https://sirateek.me",
 
+    external: true
 
+  });
 
+}
 
+
 
+function closeWindow() {
 
+  liff.closeWindow();
 
+}
 
+
 
+function logout() {
 
+  if (liff.isLoggedIn()) {
 
+    liff.logout();
 
+    window.alert("Successfully to Logout");
 
+    location.reload();
 
+  }
 
+}
 
+
 
+
 
+function createFlexMessageData() {
 
+  var myFlexContent = 
+  {
 
+    "type": "bubble",
 
+    "size": "mega",
 
+    "header": {
 
+      "type": "box",
 
+      "layout": "vertical",
 
+      "contents": [
 
+        {
 
+          "type": "box",
 
+          "layout": "vertical",
 
+          "contents": [
 
+            {
 
+              "type": "text",
 
+              "text": "ChoozMo x 引新聞",
 
+              "color": "#ffffff66",
 
+              "size": "sm"
 
+            },
 
+            {
 
+              "type": "text",
 
+              "text": "AI主播新聞曝光服務",
 
+              "color": "#ffffff",
 
+              "size": "xl",
 
+              "flex": 4,
 
+              "weight": "bold"
 
+            }
 
+          ]
 
+        }
 
+      ],
 
+      "paddingAll": "20px",
 
+      "backgroundColor": "#0367D3",
 
+      "spacing": "md",
 
+      "height": "100px",
 
+      "paddingTop": "22px"
 
+    },
 
+    "body": {
 
+      "type": "box",
 
+      "layout": "vertical",
 
+      "contents": [
 
+        {
 
+          "type": "image",
 
+          "url": "https://img.youtube.com/vi/K5DEJXajtqA/0.jpg",
 
+          "size": "full",
 
+          "aspectRatio": "16:9",
 
+          "aspectMode": "cover",
 
+          "margin": "none",
 
+          "offsetTop": "none"
 
+        },
 
+        {
 
+          "type": "text",
 
+          "text": "以集仕多為例。您也能享有同等級曝光。",
 
+          "color": "#b7b7b7",
 
+          "size": "xs"
 
+        },
 
+
 
+        {
 
+          "type": "box",
 
+          "layout": "horizontal",
 
+          "contents": [
 
+            {
 
+              "type": "image",
 
+              "url": "https://s.yimg.com/rz/p/yahoo_news_zh-Hant-TW_h_p_newsv2.png",
 
+              "margin": "xs"
 
+            },
 
+            {
 
+              "type": "box",
 
+              "layout": "vertical",
 
+              "contents": [],
 
+              "flex": 0
 
+            },
 
+            {
 
+              "type": "text",
 
+              "text": "線上活動不受疫情影響 逆勢催生台灣元宇宙策展創新服務",
 
+              "gravity": "center",
 
+              "flex": 4,
 
+              "size": "sm",
 
+              "wrap": true
 
+            }
 
+          ],
 
+          "spacing": "xs",
 
+          "cornerRadius": "30px",
 
+          "margin": "xl",
 
+          "action": {
 
+            "type": "uri",
 
+            "label": "action",
 
+            "uri": "https://tw.news.yahoo.com/%E7%B7%9A%E4%B8%8A%E6%B4%BB%E5%8B%95%E4%B8%8D%E5%8F%97%E7%96%AB%E6%83%85%E5%BD%B1%E9%9F%BF-%E9%80%86%E5%8B%A2%E5%82%AC%E7%94%9F%E5%8F%B0%E7%81%A3%E5%85%83%E5%AE%87%E5%AE%99%E7%AD%96%E5%B1%95%E5%89%B5%E6%96%B0%E6%9C%8D%E5%8B%99-035234457.html"
 
+          }
 
+        },
 
+
 
+        {
 
+          "type": "box",
 
+          "layout": "horizontal",
 
+          "contents": [
 
+            {
 
+              "type": "image",
 
+              "url": "https://cc.tvbs.com.tw/img/upload/2021/03/03/20210303100057-83c4f845.png",
 
+              "margin": "xs"
 
+            },
 
+            {
 
+              "type": "box",
 
+              "layout": "vertical",
 
+              "contents": [],
 
+              "flex": 0
 
+            },
 
+            {
 
+              "type": "text",
 
+              "text": "疫情催生元宇宙策展創新服務　VR觀展全新體驗",
 
+              "gravity": "center",
 
+              "flex": 4,
 
+              "size": "sm",
 
+              "wrap": true
 
+            }
 
+          ],
 
+          "spacing": "xs",
 
+          "cornerRadius": "30px",
 
+          "margin": "xl",
 
+          "action": {
 
+            "type": "uri",
 
+            "label": "action",
 
+            "uri": "https://news.tvbs.com.tw/life/1783151"
 
+          }
 
+        },
 
+
 
+        {
 
+          "type": "box",
 
+          "layout": "horizontal",
 
+          "contents": [
 
+            {
 
+              "type": "image",
 
+              "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/LINE_logo.svg/2048px-LINE_logo.svg.png",
 
+              "margin": "xs"
 
+            },
 
+            {
 
+              "type": "box",
 
+              "layout": "vertical",
 
+              "contents": [],
 
+              "flex": 0
 
+            },
 
+            {
 
+              "type": "text",
 
+              "text": "線上活動不受疫情影響 逆勢催生台灣元宇宙策展創新服務",
 
+              "gravity": "center",
 
+              "flex": 4,
 
+              "size": "sm",
 
+              "wrap": true
 
+            }
 
+          ],
 
+          "spacing": "xs",
 
+          "cornerRadius": "30px",
 
+          "margin": "xl",
 
+          "action": {
 
+            "type": "uri",
 
+            "label": "action",
 
+            "uri": "https://today.line.me/tw/v2/article/gzBJpea"
 
+          }
 
+        }
 
+
 
+
 
+      ],
 
+      "offsetTop": "none"
 
+    },"footer": {
 
+      "type": "box",
 
+      "layout": "vertical",
 
+      "contents": [
 
+        {
 
+          "type": "text",
 
+          "text": "幫您的產品服務在Yahoo, LINE today, TVBS, Pchome 等12個媒體曝光",
 
+          "wrap": true,
 
+          "color": "#AAAAAA",
 
+          "size": "xs",
 
+          "offsetStart": "md"
 
+        },
 
+        {
 
+          "type": "button",
 
+          "action": {
 
+            "type": "uri",
 
+            "label": "請來採訪我",
 
+            "uri": "https://page.line.me/choozmo"
 
+          },
 
+          "style": "primary"
 
+        }
 
+      ]
 
+    }
 
+  };
 
+
 
+  var flex = {
 
+      "type": "flex",
 
+      "altText": 'title',
 
+      "contents": myFlexContent,
 
+    };
 
+
 
+  return flex;
 
+}
 
+
 
+function shareTargetPicker() {
 
+  liff
 
+    .shareTargetPicker([
 
+      createFlexMessageData()      
+    ])
 
+    .then(() => {
 
+      alert("Shared to the friend(s) you picked");
 
+    })
 
+    .catch(function(res) {
 
+      alert(res);
 
+    });
 
+}

+ 84 - 0
liff2/js/liff-init.js
查看文件 

@@ -0,0 +1,84 @@
 
+// ----- Configuration Zone! -----
 
+// Don't forget to change this to your LIFF ID
 
+
 
+const liffId = "1657114132-XEmRVaPz";
 
+
 
+// Don't forget to change this to your LIFF ID
 
+
 
+liff.init(
 
+  { liffId: liffId },
 
+  () => {
 
+    initLIFF();
 
+  },
 
+  err => {
 
+    window.alert(err);
 
+  }
 
+);
 
+function initLIFF() {
 
+  if (liff.isLoggedIn()) {
 
+    liff
 
+      .getProfile()
 
+      .then(profile => {
 
+        document.getElementById("profileImage").src = profile.pictureUrl;
 
+//        document.getElementById("userId").innerHTML = profile.userId;
 
+  //      document.getElementById("displayName").innerHTML = profile.displayName;
 
+  //      document.getElementById("statusMessage").innerHTML =
 
+    //      profile.statusMessage;
 
+//        document.getElementById("pictureUrl").href = profile.pictureUrl;
 
+  //      document.getElementById("pictureUrl").innerHTML = profile.pictureUrl;
 
+    //    document.getElementById(
 
+      //    "email"
 
+      //  ).innerHTML = liff.getDecodedIDToken().email;
 
+      })
 
+      .catch(e => {
 
+      //  document.getElementById("userId").innerHTML = "No data, " + e;
 
+      //  document.getElementById("displayName").innerHTML = "No data, " + e;
 
+      //  document.getElementById("statusMessage").innerHTML = "No data, " + e;
 
+       // document.getElementById("pictureUrl").innerHTML = "No data, " + e;
 
+        //document.getElementById("email").innerHTML = "No data, " + e;
 
+      });
 
+  } else {
 
+//    document.getElementById("userId").innerHTML = "No data, Login first";
 
+  //  document.getElementById("displayName").innerHTML = "No data, Login first";
 
+ //   document.getElementById("statusMessage").innerHTML = "No data, Login first";
 
+  //  document.getElementById("pictureUrl").innerHTML = "No data, Login first";
 
+  //  document.getElementById("email").innerHTML = "No data, Login first";
 
+  }
 
+
 
+//  document.getElementById("getOS").innerHTML = liff.getOS();
 
+  //document.getElementById("getLanguage").innerHTML = liff.getLanguage();
 
+ // document.getElementById("getVersion").innerHTML = liff.getVersion();
 
+ // document.getElementById("isInClient").innerHTML = liff.isInClient();
 
+  //document.getElementById("isLoggedIn").innerHTML = liff.isLoggedIn();
 
+  var context = liff.getContext();
 
+  if (context !== null) {
 
+//    document.getElementById("context_type").innerHTML = context.type;
 
+ //   document.getElementById("context_viewType").innerHTML = context.viewType;
 
+  //  document.getElementById("context_userId").innerHTML = context.userId;
 
+    if (context.utouId) {
 
+//      document.getElementById("context_utouId").innerHTML = context.utouId;
 
+    } else {
 
+ //     document.getElementById("context_utouId").innerHTML =
 
+  //      "You are not in the utou";
 
+    }
 
+    if (context.roomId) {
 
+//      document.getElementById("context_roomId").innerHTML = context.roomId;
 
+    } else {
 
+ //     document.getElementById("context_roomId").innerHTML =
 
+  //      "You are not in the room";
 
+    }
 
+    if (context.groupId) {
 
+  //    document.getElementById("context_groupId").innerHTML = context.groupId;
 
+    } else {
 
+  //    document.getElementById("context_groupId").innerHTML =
 
+   //     "You are not in the group ";
 
+    }
 
+  } else {
 
+ //   document.getElementById("context_type").innerHTML = "No data.";
 
+  //  document.getElementById("context_viewType").innerHTML = "No data.";
 
+   // document.getElementById("context_userId").innerHTML = "No data.";
 
+   // document.getElementById("context_utouId").innerHTML = "No data.";
 
+    //document.getElementById("context_roomId").innerHTML = "No data.";
 
+   // document.getElementById("context_groupId").innerHTML = "No data.";
 
+  }
 
+}