笔记

微信授权登录

1. 微信开放平台，注册应用。
2. 发请求获取生成二维码所需参数
3. 引入wxlLogin.js,new WxLogin()利用iframe嵌入页面微信服务器每隔一段时间询问是否登录
4. 授权成功微信服务器向我们的服务器发请求,我们的服务器携带用户信息重定向到前端

微信支付

1. 来到订单详情页  点击支付获取支付二维码（参数：订单号）
2. qrcode插件 toDataURL字符串转二维码(base64)  :src:imageUrl 页面显示二维码
3. 长轮询发请求查看查询支付状态，服务器返回的数据 data : true,代表支付成功
4. 支付成功 关闭对话框，关闭定时器并且显示提示信息，再次获取订单详情的数据
5. 不想支付，关闭弹窗

按钮级别

1. 定义全局方法

Vue.prototype.$has = function btnPermission(qx) {
    *return* ['add', 'edit'].includes(qx)
}

2.模板上使用

<button v-if='$has("add")'>新增</button>
<button v-if='$has("edit")'>编辑</button>
<button v-if='$has("delete")'>删除</button>

性能优化

1. 按页面渲染顺序，调整接口请求顺序
2. 数据在网络中的传输时间大于数据在服务端的处理时间 可以合并请求
3. SEO  :使用ssr 使用语义化标签 TDK规范   
4. 大文件分片上传

逻辑封装

1. 导出新建mixin对象

export const hunhe = {
    data() {
        return {
            name: 'judyking',
            age: 21
        }
    },
    methods: {
        say() {
            console.log(this.name);
        }
    }
}

2. 局部导入，局部使用

import {hunhe,hunhe1} from './mixin'
export default {
mixins:[hunhe,hunhe1],
name: "App",
};

3. 全局导入，全局使用

import {hunhe，hunhe1} from './mixin'
Vue.mixin(hunhe)
Vue.mixin(hunhe1)

组件封装

1. 自定义属性传数据渲染
2. 插槽使用控制结构
3. 父组件中定义事件（逻辑多样）子组件中触发实现 

this.$emit("事件名",子传父的值)
//事件处理程序
handler(val){
// val是子传递给父的数据
      console.log("val:",val);
}

//应用场景
      <Goods :dataItem="newGoodses">
        <template #title>
          <div>
            <h3>新品上线</h3>
          </div>
        </template>
      </Goods>

用自定义属性将数据渲染到封装的组件 利用具名插槽展示不同推荐商品的标题

首屏SSR

1. 首先，在 Nuxt.js 项目中添加一个 data-ssr 属性，用于标记该元素是否需要进行首屏 SSR 渲染

<template>
<div>
  <div v-if="showSSR">
    <div data-ssr>这里是首屏内容</div>
  </div>
  <div v-else>
    <div>这里是普通内容</div>
  </div>
</div>
</template>

2. 通过操作dom吧后端返回的部分html内容插入页面

国际化（vue i18n）

1. 下载vue-i18n依赖，"vue-i18n": "^6.1.3"

npm install vue-i18n@6

2. 创建语言包并导出

import Vue from 'vue'
import VueI18n from 'vue-i18n';
Vue.use(VueI18n)
// 1、创建中文语言包对象
const zh = {
    username: '用户名',
    email: '邮箱',
    mobile: '手机'
}
// 2、创建英文语言包对象
const en = {
    username: 'Username',
    email: 'Email',
    mobile: 'Mobile'
}

// 4、创建 VueI18n 实例，并为 messages 和 locale 属性赋值
 const i18n = new VueI18n({
    // 3、组合语言包对象
    messages:{
        zh,
        en
    },
    locale: 'en'
})

export default i18n

3. 引入语言包

import i18n from "./assets/language";
new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

4. 使用语言包

 <!-- 国际化 -->
    <div>
      <p>{{ $t("username") }}</p>
      <p>{{ $t("email") }}</p>
      <p>{{ $t("mobile") }}</p>
    </div>
    <button @click="btn('zh')">中</button>
    <button @click="btn('en')">英</button>
    
  methods: {
    btn(type) {
      // 切换语言
      this.$i18n.locale = type;
    },
  },