HiDocs

1.获取不同的配置文件进行统一入口，结合工厂函数加工数据

config.js ——> 基础静态内容模版

export const gethonorDescMapConfig = () => { //统一的模版获取函数，统一的入口 ——> 尽量给配置文件创建入口（多在根源这里去考虑），并根据标志变量自动返回配置文件，不要单独去引入每个文件，比较麻烦，因为配置文件的名字不一样！
  let [isSpring] = judgeTempSeason();
  console.log(isSpring);
  if (isSpring) {
    return springHonorDescMapConfig;
  } else {
    return summerHonorDescMapConfig;
  }
};

//配置文件示例：
const springHonorDescMapConfig = new Map([
  [
    2,
    {
      title: "三连胜战队",
      acquireTime: "",
      acquireDescribe: "连续三天战队赢得胜利",
    },
  ],
  [
    4,
    {
      title: "满勤战队",
      acquireTime: "",
      acquireDescribe: "战队所有成员完成单日PK局数上限",
    },
  ],
  [
    3,
    {
      title: "最精彩的比赛",
      acquireTime: "",
      acquireDescribe: "与对手一起贡献了单日奖杯数差额最小的比赛",
    },
  ],
  [
    1,
    {
      title: "最强战队（单日）",
      acquireTime: "",
      acquireDescribe: "单日战队奖杯数排名第一",
    },
  ],
]);

获取配置文件：

data(){
	return{
		honorDescMap: gethonorDescMapConfig(),
	}
}

对每项数据根据配置文件，在工厂函数中进行处理 ——> 统一化的思想

res.data.forEach((item) => {
  item = getHonorDesc(item, this.honorDescMap, this.teamInfo); //获取被加工的每一项
  item.day = formatDateStr(item.day);
});

工厂函数：util.js里面

// 获取荣耀描述的工厂函数
export function getHonorDesc(item, honorDescMap, teamInfo, isSpring = false) {
  console.log(item);
  item.honorDesc = Object.assign({}, honorDescMap.get(item.type)); //得到荣誉内容的对应静态内容模版
  //配置动态内容：
  item.honorDesc.acquireTime = item.day;
  if (item.type == 9) {
    let member = item.data ? JSON.parse(item.data) : item.data;
    item.honorDesc.userName = member.real_name;
    item.honorDesc.cupNumber = member.score;
    item.honorDesc.accountId = member.account_id;
  }
  let dataTypes = [6, 7, 8, 11, 12, 13, 14, 15, 16];
  if (dataTypes.includes(item.type)) {
    item.honorDesc.acquireDescribe = getAcquireDescribe(
      item,
      teamInfo,
      isSpring
    );
  }
  if (item.type == 2) {
    // 连胜从3，4，5...9 连胜
    let winText = getWinNum(item.wining_num);
    let winTitle = getWinNum(item.wining_num);
    item.honorDesc.title = `${winText}连胜战队`;
    item.honorDesc.acquireDescribe = `战队连续${winText}天战胜对手`;
  }
  if (item.type == 5) {
    item.honorDesc.acquireDescribe = `${teamInfo.cupName}战队奖杯数排名第一`;
  }
  item.honorDesc.warZone = item.war_zone;

  const types = [6, 7, 8, 10]; // 战区中的冠 亚 季
  if (types.includes(item.type)) {
    item.honorDesc.title = getHonorTitle(item, isSpring);
  }
  return item;
}

2.background图片调整位置

要具体设置背景图像的对齐方式，你可以使用background-position属性。这个属性允许你指定背景图像相对于元素的位置。

background-position可以接受以下值：

top：将背景图像在垂直方向上置于元素的顶部。——>垂直方向
bottom：将背景图像在垂直方向上置于元素的底部。——>垂直方向
left：将背景图像在水平方向上置于元素的左边。——>水平方向
right：将背景图像在水平方向上置于元素的右边。——>水平方向
center：将背景图像在水平和垂直方向上都居中对齐。——>垂直/水平方向

此外，你还可以使用具体的像素值或百分比值来进行更精确的定位。

例如，要将背景图像置于元素顶部居中的位置，可以这样设置：

css

background-position: top center;

要将背景图像置于元素顶部偏移20像素的位置并水平居中，可以这样设置：

css

background-position: top 20px center;

你可以根据需要在CSS中使用background-position属性，根据具体的值来定位背景图像的对齐方式。

记住，第一个值表示水平方向上的偏移，第二个值表示垂直方向上的偏移。如果只提供一个值，它将被视为水平方向的偏移量，垂直方向将默认为center。

注意：只有 top，bottom，left，right 后面可以跟着像素值

例子：可以直接把background-position写在 background 的后面，简化写法！

top 20px center的值定义了背景图像的水平和垂直定位。它将图像定位在距离顶部20像素的位置，并水平居中。

80%的值表示将背景图像的大小设置为父元素宽度的80%。

css

background: url("../../assets/images/winterGame/yesterdayStar.png") no-repeat top 20px center;
background-size: 80%;

3.vue2中 watch 写法

其实就是一个 watch 对象的写法，watch选项后面是一个对象，属性名对应 data 的里面的属性名，监听新旧值

const vm = new Vue ({
    el: '#app',
  	data(){
      return{
        username: "",
      }
    },
    watch: {
        //监听 username 值的变化
        //newVal 是变化之后的值，oldVal 是变化之前的值
        username( newVal, oldVal) {
        console.log( newVal, oldVal)
       }
    }
})

4.h5 嵌入到微信小程序中

要在H5页面中接入微信JS-SDK，并使用 SDK API 的方法，你可以按照以下详细步骤进行操作：

注册微信公众号：首先，你需要在微信公众平台注册一个微信公众号，并获取到相应的公众号 AppID。
引入微信JS-SDK：在需要接入微信JS-SDK的H5页面中，通过以下代码引入微信JS-SDK的脚本：
html
```
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
```
配置公众号权限：在微信公众平台中，配置公众号的权限，确保你的公众号已经获得了需要使用的接口权限，例如获取用户信息、分享等。
初始化微信JS-SDK：在H5页面中，使用微信JS-SDK提供的wx.config方法进行初始化配置。将以下代码添加到页面中的<script>标签内或者外部的JavaScript文件中：
js
```
wx.config({
  debug: false,  // 是否开启调试模式，建议在开发阶段设置为true，方便排查问题
  appId: '你的AppID',
  timestamp: '',  // 生成签名的时间戳，一般在服务器端生成
  nonceStr: '',   // 生成签名的随机串，一般在服务器端生成
  signature: '',  // 签名，一般在服务器端生成
  jsApiList: []   // 需要使用的JS接口列表
});

wx.ready(function() {
  // 在这里可以调用微信JS-SDK提供的接口
});
```
在上述代码中，你需要替换以下参数：
- debug: 设置为 true 可以在开发阶段打开调试模式，方便排查问题；设置为 false 则关闭调试模式。
- appId: 将其替换为你的微信公众号的 AppID。
- timestamp、nonceStr、signature: 这些参数需要在服务器端生成，用于验证签名的有效性。你需要在服务器端编写相应的代码来生成这些参数。
- jsApiList: 需要使用的JS接口列表，根据你的需求添加相应的接口。
生成签名：在服务器端，你需要根据当前页面的URL、时间戳、随机字符串、以及你的微信公众号的 AppID 和 AppSecret 等信息，通过相关算法生成签名。生成签名的算法可以参考微信官方文档中的说明。
注册域名：在微信公众平台中，配置允许使用JS-SDK的域名。在 "公众号设置" -> "功能设置" -> "网页授权域名" 中添加你的域名。
调用微信JS-SDK接口：在wx.ready方法中，可以调用微信JS-SDK提供的接口，例如分享、支付、定位等。具体的接口调用方式和参数可以参考微信官方文档，根据你的需求选择相应的接口进行调用。

这些是在H5页面中接入微信JS-SDK的详细步骤。请注意，生成签名的步骤需要在服务器端完成，确保生成签名的安全性。

注意：

如果你只需要在H5页面中使用微信JS-SDK的跳转方法来跳转到微信小程序，不需要调用其他微信JS-SDK的接口，那么你可以省略wx.config的步骤。

你可以直接在H5页面中使用以下代码进行跳转到微信小程序：

var url = '你的小程序跳转链接';  // 小程序的路径
wx.miniProgram.navigateTo({ url: url });

上述代码中，你需要将url替换为你要跳转的微信小程序的路径。

请注意，如果你需要使用其他微信JS-SDK的接口或功能，例如分享、支付等，那么你仍然需要进行完整的微信JS-SDK配置和初始化，包括wx.config的步骤。

在微信中嵌入h5 页面怎么做？

要在微信中嵌入H5页面，你可以通过两种方式实现：通过微信小程序的 WebView 组件或在微信公众号中使用网页授权方式。

微信小程序的 WebView 组件：在微信小程序中，你可以使用 WebView 组件将H5页面嵌入到小程序中。在小程序的页面中添加 WebView 组件，并将其指向你要嵌入的H5页面的URL。
在小程序的 WXML 文件中添加 WebView 组件：
html
```
<web-view src="H5页面的URL"></web-view>
```
将 'H5页面的URL' 替换为你要嵌入的H5页面的URL地址。
WebView 组件还支持其他属性和事件，例如设置标题栏、监听页面加载状态等。你可以根据需要进一步自定义和控制 WebView 组件的行为。
微信公众号中使用网页授权方式：在微信公众号中，你可以使用网页授权的方式让用户在微信内直接访问H5页面。这需要进行一些配置和授权操作。
首先，在微信公众平台中配置网页授权域名。在 "公众号设置" -> "功能设置" -> "网页授权域名" 中添加你的H5页面所在的域名。
然后，你可以通过微信提供的网页授权接口，获取用户的授权信息，包括用户的基本信息和访问令牌（access_token）等。获取用户授权后，你可以将用户重定向到你的H5页面。
在微信公众号中，你可以使用以下方式进行网页授权重定向：
js
```
var redirectUrl = encodeURIComponent('H5页面的URL');
var authUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=YOUR_APPID&redirect_uri=' + redirectUrl + '&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';
window.location.href = authUrl;
```
将 'H5页面的URL' 替换为你要嵌入的H5页面的URL地址，将 YOUR_APPID 替换为你的微信公众号的 AppID。
这段代码会将用户重定向到微信网页授权页面，用户在授权完成后会被重定向回你指定的H5页面，并可以通过获取的授权信息进行相应的业务处理。

以上是在微信中嵌入H5页面的两种常用方式。你可以根据具体的需求选择合适的方法进行实现。

1.获取不同的配置文件进行统一入口，结合工厂函数加工数据 ​

2.background图片调整位置 ​

3.vue2中 watch 写法 ​

4.h5 嵌入到微信小程序中 ​

1.获取不同的配置文件进行统一入口，结合工厂函数加工数据

2.background图片调整位置

3.vue2中 watch 写法

4.h5 嵌入到微信小程序中