項目八遇到的知識點

時間  2019-12-01
標籤 項目 遇到 知識 简体版
原文   原文鏈接

1、cli3.0引入Mint UI

一、安裝

二、使用當中遇到的問題

  • 公司要作一個手機端頁面當時想到vux,項目中用到cli3.0,當我引入vux的時候報了錯 npm install @types/vux` if it exists or add a new declaration (.d.ts) file containing `declare module 'vux';
  • 搞了很久都沒解決，最後用了mint-ui，仍是報相似vux的錯，最後終於解決了。。。

main.ts中寫php

import Mint from "mint-ui";
Vue.use(Mint);
import 'mint-ui/lib/style.css'
  • 這樣寫就會報錯，解決方法以下
  • 在項目src下建.d.ts文件
  • shims-mint名字隨便起

shims-mint.d.tscss

declare module "mint-ui" {
  const Mint: any;
  export const Toast: any;
  export const MessageBox: any;
  export default Mint;
}
  • 這樣就能夠在頁面中引用ui組件，toast和messageBox須要從新引用

import { Toast, MessageBox } from "mint-ui";html

頁面vue

<template>
  <div class="base-info">
    <div class="info-item space-between">
      <p class="f15">其餘出行方式</p>
      <div class="info-right">
        <div
          @click="handleTripMode"
          class="info-box"
        >
          <input
            type="text"
            class="f15"
            v-model="tripMode"
            disabled
            placeholder="請選擇"
          >
        </div>
        <img
          src="../../assets/right.svg"
          @click="handleTripMode"
        >
        <mt-popup
          style="width: 100%;height: 5.84rem;"
          popup-transition="popup-fade"
          closeOnClickModal="true"
          v-model="popupVisible"
          position="bottom"
          class="mint-popup"
        >
          <mt-picker
            :slots="dataList"
            :visible-item-count="5"
            :show-toolbar="true"
            defaultIndex
            ref="VisitType"
            value-key="Name"
          >
            <mt-button
              @click="handleCancel"
              class="sure"
            >取消</mt-button>
            <mt-button
              @click="handleConfirm"
              class="sure"
            >確認</mt-button>
          </mt-picker>
        </mt-popup>

      </div>
    </div>
  </div>
</template>

jsgit

<script lang="ts">
  import { Component, Vue, Emit } from "vue-property-decorator";

  @Component({})
  export default class TripMode extends Vue {
    $refs: {
      VisitType: any;
    };
    popupVisible = false;
    // 其餘出行方式
    dataList = [];
    tripMode = "";
    created() {
      this.InitLoad();
    }
    InitLoad() {
      this.dataList = [
        {
          values: ["其餘", "打車", "步行"]
        }
      ];
    }
    handleTripMode() {
      this.popupVisible = true;
    }
    handleCancel() {
      this.popupVisible = false;
    }
    handleConfirm() {
      this.tripMode = this.$refs.VisitType.getValues()[0];
      this.popupVisible = false;
    }
  }
</script>

若是Picker選擇的是對象

InitLoad() {
  let list = [
    {
      id: 1,
      Name: "其餘"
    },
    {
      id: 2,
      Name: "打車"
    },
    {
      id: 3,
      Name: "步行"
    }
  ];
  this.dataList = [
    {
      values: list
    }
  ];
}
handleConfirm() {
  this.tripMode = this.$refs.VisitType.getValues()[0].Name;
  this.popupVisible = false;
}
  • 知識點

1.getValues()：獲取全部 slot 目前被選中的值github

2.value-key 屬性來指定顯示的字段名npm

四、點擊增長/刪除列表

<template>
  <div class="add-info">
    <div
      v-for="(base,index) in objList"
      :key="index"
    >
      <div class="add-item space-between">
        <p class="f15">姓名</p>
        <input
          type="text"
          v-model="base.name"
          placeholder="請輸入姓名"
        >
      </div>
      <div class="add-item space-between">
        <p class="f15">性別</p>
        <input
          type="text"
          v-model="base.sex"
          placeholder="請輸入性別"
        >
      </div>
      <div class="add-item space-between">
        <p class="f15">年齡</p>
        <input
          type="text"
          v-model="base.age"
          placeholder="請輸入年齡"
        >
      </div>
    </div>
    <div class="add-flex">
      <div @click="add">
        <img src="../../assets/add.svg">
        <p>增長</p>
      </div>
      <div @click="detele">
        <img src="../../assets/de.svg">
        <p>刪除</p>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { Component, Vue, Emit } from "vue-property-decorator";

  @Component({})
  export default class TripMode extends Vue {
    objList = [
      {
        name: "", // 姓名
        sex: "", // 性別
        age: "" // 年齡
      }
    ];
    add() {
      let newObj = {
        name: "",
        sex: "",
        age: ""
      };
      this.objList.push(newObj);
      console.log(this.objList);
    }
    detele() {
      let tmpLength = this.objList.length;
      if (tmpLength !== 1) {
        this.objList.splice(tmpLength - 1, 1);
      }
    }
  }
</script>
<style lang="less">
  .add-info {
    .add-item {
      height: 45px;
      line-height: 45px;
      padding: 0 20px;
      border-bottom: 1px solid #d9d9d9;
    }
    .add-flex {
      display: flex;
      div {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        img {
          width: 24px;
        }
        p {
          display: inline-block;
          margin-left: 20px;
          font-size: 14px;
        }
      }
    }
  }
</style>

五、獲取地址欄參數

方法1

  • 在地址欄獲取code的參數後端

    UrlSearch(name) {
      let [returnVal, index, queryArr] = [
        "",
        window.location.hash.indexOf("?"),
        []
      ];
      if (index >= 0) {
        queryArr = window.location.hash.substring(index).split("&");
        for (let i = 0; i < queryArr.length; i++) {
          const element = queryArr[i];
          if (element.indexOf("=") >= 0) {
            returnVal = element.split("=")[1];
            break;
          }
        }
        return returnVal;
      }
   }

  //  調用 this.UrlSearch("code")

方法2

each(array, fn) {
  for (var i in array) {
    fn(i, array[i]);
  }
}
// 獲取地址欄參數
getHrefData() {
  var href = window.location.href;
  var paramStr = href.substring(href.indexOf("?") + 1);
  var paramArray = paramStr.split("&");
  var reVal = {};
  this.each(paramArray, function(index, item) {
    var tmp = paramArray[index].split("=");
    reVal[tmp[0]] = decodeURI(tmp[1]);
  });
  return reVal;
}
// 調用
const data = this.getHrefData();
const code = data.code; // 獲取code

六、釘釘免登

  • 獲取微應用免登受權碼api

    dd.ready(function() {
      dd.runtime.permission.requestAuthCode({
          corpId: _config.corpId, // 企業id
          onSuccess: function (info) {
             const code = info.code // 經過該免登受權碼能夠獲取用戶身份
          }});
  });
  • 在哪裏調用就寫在哪裏，能夠封裝到方法中

  • 獲取code 通常後端會有個接口，經過code登陸微信

七、釘釘掃碼登陸

經過免登受權碼換取用戶身份

企業內部應用免登服務端接口文檔

第三方企業應用免登服務端接口文檔

  • 我項目中用到的是第三方企業應用免登服務端接口文檔

正在在項目的使用

掃碼登陸第三方網站

（1）、建立掃碼登陸應用受權

釘釘開發者平臺

  • 進入【釘釘開發者平臺-應用開發-移動接入應用-登陸-建立掃碼登陸應用受權】，建立掃碼登陸應用受權

  • 完成以後咱們就能夠拿到appId和appSecret了

（2）、構造掃碼登陸頁面

1.第一種方式是直接使用釘釘提供的掃碼登陸頁面
https://oapi.dingtalk.com/connect/qrconnect?appid=APPID&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIRECT_URI
2.第二種方式是支持網站將釘釘登陸二維碼內嵌到本身的頁面中

步驟1：在頁面中先引入以下js文件

https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js

步驟2： 在須要使用釘釘登陸的地方使用如下js對象

/*
* 解釋一下goto參數，參考如下例子：
* var url = encodeURIComponent('http://localhost.me/index.php?test=1&aa=2');
* var goto = encodeURIComponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=appid&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+url)
*/
var obj = DDLogin({
     id:"login_container",//這裏須要你在本身的頁面定義一個HTML標籤並設置id，例如<div id="login_container"></div>或<span id="login_container"></span>
     goto: "", //請參考註釋裏的方式
     style: "border:none;background-color:#FFFFFF;",
     width : "365",
     height: "400"
 });

  • 這段代碼的意思就是在你id定義的DOM中生成二維碼，掃碼成功以後會給你當前頁面(/login)返回一個臨時受權碼，經過以下代碼接收臨時受權碼，而後構造須要跳轉的地址(/home)帶上臨時受權碼。

    var hanndleMessage = function(event) {
    var origin = event.origin;
    console.log("origin", event.origin);
    if (origin == "https://login.dingtalk.com") {
      //判斷是否來自ddLogin掃碼事件。
      var loginTmpCode = event.data; //拿到loginTmpCode後就能夠在這裏構造跳轉連接進行跳轉了
      window.location.href =
        "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=你的&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://localhost:8080/home&loginTmpCode=" +
        loginTmpCode;
    }
  };
  if (typeof window.addEventListener != "undefined") {
        window.addEventListener("message", hanndleMessage, false);
      } else if (typeof window.attachEvent != "undefined") {
        window.attachEvent("onmessage", hanndleMessage);
      }
3.實例

最外層的index.html

<script src="http://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>

DingTalk.vue

<template>
  <div class="ding-talk tac">
    <p class="title">釘釘登陸</p>
    <div id="login_container"></div>
  </div>
</template>
<script lang="ts">
 import { Component, Vue, Emit, Prop, Model } from "vue-property-decorator";
 @Component
  export default class DingTalk extends Vue {
    created() {
      document.title = "釘釘掃碼登陸";
      this.InitLoad();
    }
    getDDLogin(){
        let url = encodeURIComponent("http://localhost:8080/#/DingTalk");
        let goto = encodeURIComponent("https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=" + 你的appId+"&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" + url);
        let obj = DDLogin({
                id: "login_container",
                goto: goto,
                style: "border:none;background-color:#FFFFFF;",
                width: "365",
                height: "400"
          });
        let hanndleMessage = function(event) {
            let origin = event.origin;
            if (origin == "https://login.dingtalk.com") {
              //判斷是否來自ddLogin掃碼事件。
              let loginTmpCode = event.data; //拿到loginTmpCode後就能夠在這裏構造跳轉連接進行跳轉了
              let url2 = "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=" + 你的appId + "&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" +url +"&loginTmpCode=" + loginTmpCode;
              // 跳轉成功後url參數中追加臨時受權碼code及state兩個參數。
              window.location.href = url2;
            }
          };
          if (typeof window.addEventListener != "undefined") {
            window.addEventListener("message", hanndleMessage, false);
          } else if (typeof window.attachEvent != "undefined") {
            window.attachEvent("onmessage", hanndleMessage);
          }
    }
    InitLoad(){
        const data = this.getHrefData();
        const code = data.code; // code 是地址欄中
        if(code){
            // 若是有code表示掃碼成功
            // 接口數據
    
        }
    }
    each(array, fn) {
      for (var i in array) {
        fn(i, array[i]);
      }
    }
    // 獲取地址欄參數
    getHrefData() {
      var href = window.location.href;
      var paramStr = href.substring(href.indexOf("?") + 1);
      var paramArray = paramStr.split("&");
      var reVal = {};
      this.each(paramArray, function(index, item) {
        var tmp = paramArray[index].split("=");
        reVal[tmp[0]] = decodeURI(tmp[1]);
      });
      return reVal;
    }
  }
</script>
<style lang="less">
  .ding-talk {
    width: 100%;
    height: 100%;
    background-color: rgb(51, 51, 51);
    padding: 50px;
    .title {
      font-size: 20px;
      color: #fff;
      margin-bottom: 10px;
    }
  }
</style>

八、微信公衆號受權登陸

微信網頁受權

<script lang="ts">
import { Component, Vue, Emit } from "vue-property-decorator";
@Component
export default class WechatList extends Vue {
    created() {
        this.initData();
    }
    initData() {
        const data = this.getHrefData();
        const code = data.code; // 獲取到的地址欄中的code
        // 判斷是否登陸
        if( code ){
            // 獲取code

        }else {
            let weixinUrl = "";
            let jumpUrl = encodeURIComponent('跳轉的地址');
            weixinUrl ="https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + 公衆號的appid + "&redirect_uri=" + jumpUrl +"&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
            window.location.href = weixinUrl;
        }
    }
    each(array, fn) {
      for (var i in array) {
        fn(i, array[i]);
      }
    }
    // 獲取地址欄參數
    getHrefData() {
      var href = window.location.href;
      var paramStr = href.substring(href.indexOf("?") + 1);
      var paramArray = paramStr.split("&");
      var reVal = {};
      this.each(paramArray, function(index, item) {
        var tmp = paramArray[index].split("=");
        reVal[tmp[0]] = decodeURI(tmp[1]);
      });
      return reVal;
    }
}
</script>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程