🌈layui
📄接口调用
🔥post方式
$.ajax({
type: "POST",
url: "/flowable/node/operateList",
data: JSON.stringify(dataObj),
contentType: "application/json",
success: function (res) {
console.log("res___",res);
}
})
🔥get方式
$.get("/member/menu/tree?type=1", function (res) {
//...
})
🌈uniapp小程序
📄接口调用
🔥post方式
// 传统post
let param = {"entity": {"cruser": this.nickName},"pager": {"current": 1,"size": 99}};
uni.request({
url: baseUrl + "/tlujy/jmetathumbsup/listing",
data: JSON.stringify(param),
method: "POST",
header: {'Content-Type': 'application/json'}
}).then((result) => {
let [err, res] = result;
console.log("打印", res);
})
// uni.$u.http 文档：https://www.uviewui.com/js/http.html
let httpData = {
entity: {userid: this.userInfo.id, throughType: this.activeName},
pager: {
current: 1,
size: 10,
sortProps: [{
"key": "crtime",
"value": false
}]
}
}
uni.$u.http.post(baseUrl + '/SX/jmetasxzgsfqthroughlist/listing', httpData).then(res => {
console.log("res", res);
})
🔥get方式
// 传统get
uni.request({
url:baseUrl+ "/media/appexcellent/follow/"+this.userID ,
method:"GET",
}).then((result)=>{
let [err,res]=result;
console.log("打印", res);
})
//uni.$u.http
uni.$u.http.get(baseUrl + '/SX/sxzgsfqcompany/' + id).then(res => {
//...
}).catch(err => {})
🔥delete方式
//删除单个
uni.request({
url: baseUrl + "/tlujy/xinwencomment/" + id,
method: "delete",
}).then((result) => {
let [err, res] = result;
console.log('删除信息',res)
})
// 删除多个
uni.request({
url: baseUrl + "/tlujy/material/real/{ids}/batch".replace('{ids}',_this.checkedArr), //选中的id存进checkedArr
method:'DELETE',
header: {'content-type': 'application/json'},
success: (res) => {
_this.getImage() //重新获取图片
uni.showToast({title:'删除成功！'})
}
});
📄uni-app微信小程序保持登录状态
流程：首页为未登录状态 => 进行登录 => 首页状态改变 => 退出应用再次进入仍然是已登录状态。
Vuex：使用 vuex 进行管理登陆状态和保存用户信息
1. 根目录新建store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
// 是否登录标识
hasLogin: false,
// 账号信息
userInfo: {}
},
mutations: {
//登录
login(state, userInfo) {
state.hasLogin = true
// 从一个或多个源对象复制到目标对象, 相同属性会被覆盖
state.userInfo = Object.assign({}, state.userInfo, userInfo);
//将用户信息保存在本地
uni.setStorageSync('userInfo', state.userInfo)
},
//退出登录
logout(state) {
state.userInfo = {}
state.hasLogin = false
uni.removeStorageSync('userInfo')
}
}
})
export default store
2. main.js配置
import App from './App'
import Vue from 'vue'
import uView from '@/uni_modules/uview-ui'
import store from './store/index.js' // 1.导入store
Vue.use(uView)
Vue.config.productionTip = false
App.mpType = 'app'
Vue.prototype.$store = store // 2.vuex
const app = new Vue({
store, // 3.使用
...App
})
app.$mount()
3. login中使用vuex
在 login.vue（登录页面）输入用户名密码后，调用接口进行登录，登录成功后调用 vuex 的方法改变应用的登陆状态。
<script>
import { mapMutations } from 'vuex';
export default {
methods: {
...mapMutations(['login']),
onSubmit() {
// 手机号密码登录
let httpData = {"name": this.phone,"passWord": this.password};
uni.$u.http.post(baseUrl + '/member/home/wxbackAjaxLogin', httpData).then(res => {
if (res.data.success) {
// 登录成功后改变vuex的状态
let userInfo = {"mspToken": res.data.mspToken,"id": res.data.userid}
this.login(userInfo)
//跳转首页
uni.switchTab({
url: '/pages/index/index'
})
}
});
},
}
}
</script>
4. 改变首页状态
在index.vue中，通过 vuex 中保存的 hasLogin 判断是否是登录状态，从而显示不同的内容。
<template>
<view class="page">
<view v-if="!hasLogin">现在是未登录状态，点击按钮进行登录</view>
<view v-else>现在是登录状态，您的用户id是：{{userInfo.userName}}</view>
<button type="primary" @click="bindLogin">{{hasLogin ? '退出登录' : '登录'}}</button>
</view>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex';
export default {
computed: {
...mapState(['hasLogin', 'userInfo'])
},
methods: {
...mapMutations(['logout']),
bindLogin() {
if (this.hasLogin) {
this.logout()
} else {
uni.navigateTo({
url: '/pages/login/login'
})
}
}
}
}
</script>
<style>
.page{
padding: 50upx 30upx;
}
view{
line-height: 1.5;
font-size: 32upx;
}
button{
margin-top: 30upx;
height: 80upx;
line-height: 80upx;
}
</style>
5. 再次进入应用
在 App.vue 中判断是否保存用户信息 "userInfo"，如果保存则认为是登录状态，未保存则为未登录状态。
App.vue 中得到用户信息后需要同步改变 vuex 的状态，使所有页面都能共享登陆状态与用户信息。
<script>
import { mapMutations } from 'vuex';
export default {
onLaunch: function () {
//获取保存在本地的用户信息
let userInfo = uni.getStorageSync('userInfo');
if(userInfo.id) {
//更新登录状态 这样就实现了全局保持登录状态
this.login(userInfo)
}
},
methods: {
...mapMutations(['login'])
}
}
</script>
📄H5和小程序获取页面url
1. 问题说明
项目中，跳转页面过程中，有时会带有一些参数，比如：http.../pages/index/index?id=XXX&name=XXX
要拿到链接后的参数有多种方法，在h5页面中可以用 location.href 直接获取页面路径，然后再进行处理。而在小程序中就要用 getCurrentPages() 获取页面栈后再进行操作。
2. h5获取url中"?"符后的参数
getRequest() {
let url = location.href;
let requestParams = {};
if (url.indexOf("?") !== -1) {
let str = url.substr(url.indexOf("?") + 1); //截取?后面的内容作为字符串
let strs = str.split("&"); //将字符串内容以&分隔为一个数组
for (let i = 0; i < strs.length; i++) {
requestParams[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
// 将数组元素中'='左边的内容作为对象的属性名，'='右边的内容作为对象对应属性的属性值
}
}
return requestParams;
}
3. 微信小程序获取页面url
小程序不能直接用 location.href 获取参数，需要使用 getCurrentPages() 获取页面栈后再进行操作
// mounted中调用
getRequest() {
let pages = getCurrentPages(); //获取加载的页面
let currentPage = pages[pages.length - 1]; //获取当前页面的对象
let url = currentPage.route //当前页面url
let options = currentPage.options; // 获取url中所带的参数
console.log("获取url中所带的参数",options)
//比如：获取参数后面的id和name
this.lmid = options.id
this.lmname = options.name
}
可以写成工具函数放到utils中：
/*获取当前页url*/
function getCurrentPageUrl(){
var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length-1] //获取当前页面的对象
var url = currentPage.route //当前页面url
return url
}
/*获取当前页带参数的url*/
function getCurrentPageUrlWithArgs(){
var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length-1] //获取当前页面的对象
var url = currentPage.route //当前页面url
var options = currentPage.options //如果要获取url中所带的参数可以查看options
//拼接url的参数
var urlWithArgs = url + '?'
for(var key in options){
var value = options[key]
urlWithArgs += key + '=' + value + '&'
}
urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length-1)
return urlWithArgs
}
module.exports = {
getCurrentPageUrl: getCurrentPageUrl,
getCurrentPageUrlWithArgs: getCurrentPageUrlWithArgs
}
4. 参考文章
📄uniapp跳转外部链接
uni.navigateTo 可以跳转到项目的内部页面，然后内部页面接收需要跳转到外部的URL，通过 webview 来打开外部链接。
1. 新建一个内部页面webview.vue
<template>
<view>
<web-view :src="url"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url: ''
}
},
onLoad(options) {
this.url = decodeURIComponent(options.url)
console.log(this.url)
// 传入需要跳转的链接 使用web-view标签进行跳转
}
}
</script>
<style lang="scss"> </style>
在 pages.json 里面注册这个页面
{
"path" : "pages/common/webview",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
2. 点击跳转外部链接
界面：
<view @click="skipLink()"> 跳转外部链接 </view>
跳转方法：
skipLink() {
// URL是要跳转的外部地址 作为参数
let url = 'http...'
uni.navigateTo({
// 传url到webview界面,实现跳转
url: '/pages/common/webview?url=' + url
})
}
3. 参考链接
📄uniapp中页面刷新后返回失败
goBack(){
// 获取页面栈
const pages = getCurrentPages()
if (pages && pages.length > 1) {
uni.navigateBack({
delta: 1 // 数量根据缓存的页面数量
})
} else {
history.go(-1)
}
}
📄小程序页面内上传图片功能
1. 需求说明
微信小程序中上传图片，要求最多上传6张图片，上传到6张后隐藏上传按钮。
参考代码，可直接使用：
<view class="upload-image-box">
<view class="upload-image-item" v-for="(item, index) in totalImg" :key="index">
<view class="close-icon" @tap="deleteImg(index)">
<uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
</view>
<view class="image-box"><image :src="item.url" mode="aspectFill" class="img"></image></view>
</view>
<view class="upload-image-item" v-if="totalImg.length < 6" @tap="chooseImgs">
<view class="uploadBtn">
<uni-icons type="plusempty" size="40" color="rgba(0, 0, 0, 0.65)"></uni-icons>
<view>上传照片</view>
</view>
</view>
</view>
<view class="uploadMess">
<view>上传图片说明</view>
<view>要求：格式PNG/JPG,6M以内，最多6张</view>
<view>内容：图纸等</view>
</view>
<script>
export default {
data(){
maxSize: 1024*1024*6, //图片大小限制6M
maxLength: 6,
totalImg: [], //原图
urlImgs: [], // 已上传的图
},
methods:{
//上传图片 单个上传 方便检测每张图片的大小
chooseImgs() {
const nowCount = this.maxLength - this.totalImg.length;
const _this = this;
uni.chooseImage({
count: 6,
success: res => {
uni.showLoading({
title: '上传中...'
});
const tempFilePaths = res.tempFilePaths;
const tempFiles = res.tempFiles;
tempFiles.forEach((ele, index) => {
if (ele.size > _this.maxSize) {
return uni.showToast({
icon: 'none',
title: '图片大小不能超过6MB'
});
}
});
// 上传图片到服务器
for (let i = 0; i < tempFilePaths.length; i++) {
uni.uploadFile({
url: uploadFile, //uploadFile为上传到服务器的接口地址
filePath: tempFilePaths[i],
name: 'file',
success: uploadFileRes => {
let url = JSON.parse(uploadFileRes.data).data;
this.urlImgs.push(url);
this.totalImg.push({
url: tempFilePaths[i]
});
uni.hideLoading();
},
fail: () => {
return uni.showToast({
icon: 'none',
title: '图片上传失败'
});
}
});
}
}
});
},
// 删除图片 本地和线上都删除
deleteImg(index) {
this.totalImg.splice(index, 1);
this.urlImgs.splice(index, 1);
},
}
}
</script>
<style lang="scss" scoped>
.upload-image-box {
display: flex;
flex-wrap: wrap;
padding: 10px 0;
.close-icon {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0;
top: 0;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #ff5a5f;
z-index: 2;
}
.upload-image-item {
width: 33.33%;
position: relative;
padding-top: 33.33%;
box-sizing: border-box;
.image-box {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 5px;
right: 0px;
bottom: 5px;
left: 0px;
border: 1px solid rgba(0, 0, 0, 0.15);
padding: 8px 7px 7px 8px;
border-radius: 2px;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.uploadBtn {
background-color: rgba(0, 0, 0, 0.04);
position: absolute;
top: 5px;
right: 0px;
bottom: 5px;
left: 0px;
padding: 8px 7px 7px 8px;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 2px;
overflow: hidden;
text-align: center;
image {
width: 100%;
height: 100%;
}
}
}
}
.uploadMess {
text-align: left;
background-color: #F8F8F8;
padding-top: 10px;
padding-left: 12px;
padding-bottom: 12px;
border-radius: 4px;
color: #B3B3BB;
font-size: 12px;
}
</style>
2. 参考文章
📄小程序使用腾讯导航路线规划功能
小程序后台添加腾讯位置服务路线规划插件
小程序后台 > 设置 > 第三方设置 > 插件管理 > 添加《腾讯位置服务路线规划》插件
插件详情中查看AppId和版本号
AppId和版本号，参考 腾讯位置服务路线规划开发文档
项目的pages.json中引入插件并开启位置服务
注意：manifest.json 源码文件的 mp-weixin 对象中也需要添加
"plugins": {
"routePlan": {
"version": "1.0.19",
"provider": "wx50b5593e81dd937a"
}
},
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
实现Demo
<template>
<view>
<button class="btn-long" @click="doNavi()">导航</button>
</view>
</template>
<script>
export default {
methods: {
doNavi() {
let plugin = requirePlugin('routePlan');
let key = 'QTOBZ-VSO35-MKWIS-I2I4G-ATD5S-NZBID'; //使用在腾讯位置服务申请的key
let referer = '小程序'; //调用插件的app的名称
let endPoint = JSON.stringify({ //终点
'name': '山西质监检测中心六号楼食品院',
'latitude': 37.69331695869906,
'longitude': 112.7597089963646
});
uni.navigateTo({
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
});
}
},
}
</script>
参考文章
📄处理付款二维码
一般情况下，图像数据（尤其是GIF格式）不会以纯文本形式返回，而是以二进制流或Base64编码的字符串返回。比如付款二维码可能会是GIF格式，我们在处理时就要确保返回的是二进制数据
1. 设置响应类型：
responseType: 'arraybuffer'//设置响应类型为arraybuffer (二进制数据)2. 处理响应数据: 将二进制数据转换为Base64字符串
getPriceQR() {
let param = { memberLimit: '20' }
uni.request({
url: baseUrl + '/media/memberShip/purchasebywx?userId=' + this.userID,
data: JSON.stringify(param),
method: "POST",
responseType: 'arraybuffer', //设置响应类型为arraybuffer (二进制数据)
header: {'Content-Type': 'application/json'}
}).then((result) => {
let [err, res] = result;
// console.log("res",res);
// 将图像数据处理成 base64 格式
let selectedQR = 'data:image/png;base64,' + btoa(new Uint8Array(res.data)
.reduce((data, byte) => data + String.fromCharCode(byte), ''))
})
}
🌈常用 JS 方法
📄数组去重
1. 通用方式
let dataArr = res.data.obj.records;
var newDataArr = [];
for (var i = 0; i < dataArr.length; i++) {
var flag = true;
if(newDataArr.length > 0){
for(let n = 0; n < newDataArr.length; n++) {
if(newDataArr[n].docid == dataArr[i].docid){flag = false;};
}
};
if(flag){
newDataArr.push(dataArr[i]);
};
}
console.log("数组去重后>>>", newDataArr);
2. Jquery方式
var dataArr = data_s.obj.records
var newDataArr = []
// 数组去重
$.each(dataArr,function(i,v){
var flag = true;
if(newDataArr.length > 0){
$.each(newDataArr,function(n,m){
if(newDataArr[n].perId == dataArr[i].perId){flag = false;};
});
};
if(flag){
newDataArr.push(dataArr[i]);
};
});
console.log("搜索结果-筛选后",newDataArr);
📄常用for循环
// for in循环出的是key >> 一般常用来遍历对象或json
for (let i in arr) {
console.log(item); // 0 1 2 3
}
// for of循环出的是val >> 数组对象都可以遍历
for (let item of arr) {
console.log(item); //{userid:"", status:"", ...}
}
// forEach 遍历数组中的每个元素，直接对原数组进行操作，不会返回一个新数组，
arr.forEach((item,index) => {
console.log(item,index); //{}1, {}2,...
})
// map 遍历数组中的每个元素，并返回一个新的数组
let arr = [10, 20, 40, 50]
let newArr = arr.map(value => {
return value*2 //20, 40, 80, 100
})
📄JS 删除数组中某个元素
1. 删除数组中某个指定下标的元素
注意：不能用 forEach 方法比对数组下标值，因为 forEach 在循环的时候是无序的
splice 删除
var delete_index = 2
var arr = [1,2,3,4,5]
// arr => [1,2,3,4,5]
var new_arr = arr.splice(delete_index, 1)
// new_arr => [3]
// arr => [1,2,4,5]
for 删除
var delete_index = 2,
arr = [1,2,3,4,5],
new_arr = []
for (let i = 0, len = arr.length; i < len; i++) {
if (i != delete_index) {
new_arr.push(arr[i])
}
}
// arr => [1,2,3,4,5]
// new_arr => [1,2,4,5]
2. 删除数组中某个指定元素的元素
splice 删除
var element = 2,
arr = [1,2,3,4,5]
arr.splice(arr.indexOf(2), 1)
// arr => [1,3,4,5]
filter 删除
filter：将数组中符合条件的元素保存到一个新的数组中（过滤数组中的元素）
// 对象数组
let arr = [
{name:"张三",age:18},
{name:"李四",age:19},
{name:"王五",age:20}
]
let list = arr.filter((item) => item.name !== '张三')
console.log(list);
// list => 李四、王五
// 数组
let arr = [4,5,7,9]
let list = arr.filter((item) => item !== 9)
console.log(list);
// list => [4, 5, 7]
📄段落展开/收起
//html
<view class="express">
<view class="info">
<view :class="{hide:!iSinfo}">
{{newInfo}}
</view>
<text @tap="showinfo" v-if="!iSinfo">展开</text>
</view>
<text @tap="showinfo" v-if="iSinfo" class="hidebtn">收起</text>
</view>
//data数据
iSinfo: false,
// methods
//全文展开收起
showinfo() {
this.iSinfo = !this.iSinfo
},
// 获取dom元素 请求到数据后再调用
getData() {
if (this.newInfo == '' || this.newInfo.length == 0) {
this.iSinfo = true
} else {
let info_length = this.newInfo.length //字符长度
if (info_length > 68) {
this.iSinfo = false //false隐藏
} else {
this.iSinfo = true //true不隐藏
}
}
},
// css
.hide {
word-break: break-word; //换行模式
overflow: hidden;
text-overflow: ellipsis; //修剪文字
display: -webkit-box;
-webkit-line-clamp: 3; //此处为上限行数
-webkit-box-orient: vertical;
}
📄下拉刷新和上拉加载
mescroll.js 高性能下拉刷新和上拉加载插件，支持 uni-app。
<template>
<view class="page">
<!-- 分页更多用法请查看官网 http://www.mescroll.com-->
<mescroll-body @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
<view v-for="data in dataList"> 数据列表... </view>
</mescroll-body>
</view>
</template>
<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
data() {
return {
downOption: {
auto: false //是否在初始化后,自动执行downCallback; 默认true
},
dataList: [], //商品数据
}
},
methods: {
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
upCallback(page) {
//联网加载数据
this.loadData(page.num)
},
// 特价商品
loadData(pageNo) {
let httpData = {
entity: {
userid: this.userInfo.id,
throughType: this.activeName,
},
pager: {
current: pageNo,
size: 10,
sortProps: [{
"key": "crtime",
"value": false
}]
}
}
uni.$u.http.post(baseUrl + '/SX/jmetasxzgsfqthroughlist/listing', httpData).then(res => {
uni.stopPullDownRefresh();
//方法一(推荐): 后台接口有返回列表的总页数 totalPage
this.mescroll.endByPage(res.length, res.pages); //必传参数(当前页的数据个数, 总页数)
if (pageNo == 1) {
this.dataList = res
} else {
this.dataList = this.dataList.concat(res);
}
}).catch(() => {
//联网失败, 结束加载
this.mescroll.endErr();
});
},
},
}
</script>
<style scoped lang="scss">
.page {
padding-top: 2rpx;
}
.goodsBox {
padding: 50rpx 32rpx;
border-bottom: 2rpx solid #f5f5f5;
background: #fff;
.goodsImg {
width: 80rpx;
height: 80rpx;
border-radius: 40rpx;
}
.info {
height: 80rpx;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding-left: 20rpx;
.title {
font-size: 30rpx;
color: #333;
}
.desc {
width: 100%;
font-size: 26rpx;
color: #666;
}
}
}
</style>
📄获取 URL 中 "?" 符号后的参数
function getUrlParams(url) {
// 使用正则表达式匹配 URL 中的参数
// [?&] 匹配问号或和号，是参数的开始
// ([^=#]+) 匹配不是=或#的字符一次或多次，代表参数名
// = 匹配等号，参数名和值之间的连接
// ([^&#]*) 匹配不是&或#的字符零次或多次，代表参数值
let reg = /[?&]([^=#]+)=([^&#]*)/g,
params = {},
match;
// 使用正则表达式的 exec 方法在字符串中查找匹配项
while (match = reg.exec(url)) {
// 将匹配到的参数名和值存储到 params 对象中
params[match[1]] = match[2];
}
return params;
}
// 获取当前页面的完整 URL。
// 例: http://example.com/index.html?name=John&age=30
let currentUrl = window.location.href;
let parameters = getUrlParams(currentUrl);
//输出{name: "John",age: "30"}
console.log(parameters);
🌈常用功能
📄页面中嵌入PDF或Word文档
$(document).ready(function() {
// 定义文档路径
let pdfpath = 'https://www.zhtnqi.com/files/headimg/75ed241d-e933-4fce-b93a-ae5440d8a4bf.pdf';
if (pdfpath) {
// 初始化要插入的内容
let content = '';
// 判断文件类型 1.Word文档（.doc或.docx） 2.PDF文件
if (pdfpath.endsWith('.doc') || pdfpath.endsWith('.docx')) {
let wordUrl = 'https://view.officeapps.live.com/op/embed.aspx?src=' + pdfpath;
content = `<iframe class="filename" src="${wordUrl}" width="100%" height="600" frameborder="1"></iframe>`;
} else if (pdfpath.endsWith('.pdf')) {
content = `<embed src="${pdfpath}" type="application/pdf" width="100%" height="700px" />`;
}
$('.content').html(content);
}
});
📄跨源通信：在不同服务器间安全传递Token
1. 问题描述
服务器A 上有一个页面，该页面通过 iframe 方式嵌入到 服务器B 的页面中。我想在 服务器A 的页面中存储一个 token，并且在 服务器B 的页面中获取这个 token。
2. 难点
这个问题涉及到跨域资源共享（CORS）和浏览器的同源策略。由于 服务器A 和 服务器B 是不同的域，所以它们不能直接共享数据，比如通过 localStorage 把 token 存到本地就不可取。
3. 解决方法
window.postMessage 方法允许不同源之间的窗口进行通信，服务器A 的页面是通过iFrame嵌入到另一个服务器页面的，正好适用。所以可以在iFrame页面（服务器A）上发送消息，在父页面（服务器B）上设置事件监听器来接收这些消息。
发送消息的页面（服务器A）
在 服务器A 的页面中，使用以下代码向 服务器B 发送消息：
function sendMessageToParent(token) {
var parentWindow = window.parent; // 获取目标页面的window对象
var message = { type: 'token', data: token };
// 使用'*'作为目标源可以接收来自任何源的消息, 也可以指定目标源。
parentWindow.postMessage(message, '*');
}
// 发送 token 到 服务器B
var tokenValue = 'token';
sendMessageToParent(tokenValue);
接收消息的页面（服务器B）
在 服务器B 的页面中，使用以下代码接收来自 服务器A 的消息：
function receiveMessage(event) {
// 通过event.origin检查消息发送者的源
// if (event.origin !== 'http://服务器A') { return; }
// 检查消息类型
if (event.data.type && event.data.type === 'token') {
var token = event.data.data;
console.log('接收token: ', token);
//token存到本地
localStorage.setItem("token",token)
}
}
// 添加事件监听器来接收消息
window.addEventListener('message', receiveMessage, false);
🌈vue项目
📄vue项目运行问题
// 项目运行基本步骤
1、下载依赖文件：npm intsall
2、修改项目配置，如后台地址：src\conf\conf.js
3、启动项目：npm run dev
4、打包命令：npm run build //打包后的代码在 dist文件夹
//如果运行失败 尝试以下命令然后重新运行
npm cache clean --force
删掉node_modules文件夹
删掉package-lock.json文件
