Vuex：主要是保存info信息梅肤，位于store>modules->actInfo.js, 在store目錄下的index.js中調(diào)用引入vue和vuex。
在main.js中import引入耿战，并且掛載到vue實例上。
在computed中引入了mapGetters焊傅。https://www.jb51.net/article/138239.htmios和安卓下播放音樂的坑：
原始代碼：
var playPromise = document.querySelector('#musicli').play();
if (playPromise !== undefined) {
playPromise.then(_ => {
console.log(111);
})
.catch(error => {
console.log(error);
});
}
document.addEventListener('click',function clickDom()
{
function audioAutoPlay() {
var audio = document.querySelector('#musicli');
audio.play();
}
audioAutoPlay();
});
項目中使用的有效代碼：
//需要播放音樂時就調(diào)用此函數(shù)
audioAutoPlay(){
var playPromise = document.querySelector('#myAudio').play();
if (playPromise !== undefined) {
playPromise.then(() => {
var audio = document.querySelector('#myAudio');
audio.currentTime=0;
audio.play();
})
.catch(error => {
console.log(error);
// var audio = document.querySelector('#myAudio');
// audio.play(); 寫在這里沒用剂陡，還是不會播放
});
}
}
//使用案例:實現(xiàn)的效果為連續(xù)播放3次wall.mp3，然后播放一次repairWall.mp3
repairSuccess(){
var self = this;
this.changeAudio('https://...upload/wall.mp3');
setTimeout(function(){
self.audioAutoPlay();
},1);
setTimeout(function(){
self.audioAutoPlay();
},600);
setTimeout(function(){
self.audioAutoPlay();
},601);
setTimeout(function(){
self.audioAutoPlay();
},1201);
setTimeout(function(){
self.changeAudio('https://...upload/repairWall.mp3');
self.audioAutoPlay();
},1700);
(function(){
setTimeout(function(){
self.changeAudio('https://...upload/repairWall.mp3');
self.audioAutoPlay();
},1700);
}
上面的代碼已經(jīng)完美解決了ios下完全不能播放音樂的問題（原因是由于ios出于為用戶節(jié)省流量的考慮狐胎，避免自動播放音樂鸭栖，只有在用戶做了交互之后才能播放音樂）。但是還有待完善的地方握巢，算是bug吧晕鹊，就是當(dāng)音樂切換的時候，總是第一次不能播放成功，第二次才能播放成功溅话，如果不切換音樂的話晓锻，則幾乎不會有任何問題。
使用mpvue開發(fā)小程序遇到的坑
通過npm install引入的組件飞几，會在node_modules 目錄下带射，有些可能是自開發(fā)的組件，可直接在node_modules里修改循狰，但一定要確保你的操作是正確的窟社。
在Vue中計算屬性(copmuted)是基于它們的依賴進行緩存的，而方法(methods)不是绪钥。如果我們有一個計算屬性灿里，那么vue會記住計算的屬性所依賴的值，vue只有在依賴發(fā)生變化時才可以計算值程腹，否則匣吊，將返回以前緩存的值。而methos里面的方法在每次頁面渲染時都會被執(zhí)行一次寸潦。從而使用計算屬性要比方法性能更好色鸳。
移動端復(fù)制功能：
<script type="text/javascript">
function copyUrl2()
{
var Url2=document.getElementById("biao1").innerText;
var oInput = document.createElement('input');
oInput.value = Url2;
document.body.appendChild(oInput);
oInput.select(); // 選擇對象
document.execCommand("Copy"); // 執(zhí)行瀏覽器復(fù)制命令
oInput.className = 'oInput';
oInput.style.display='none';
alert('復(fù)制成功');
}
</script>
<div cols="20" id="biao1">12345678</div>
<input type="button" onClick="copyUrl2()" value="點擊復(fù)制代碼" />
- 一鍵復(fù)制（兼容ios）
let input = document.querySelector('#demoInput');
input.select();
input.setSelectionRange(0, input.value.length);
if (document.execCommand('copy')) {
lib.tip.toggle('復(fù)制成功');
}
- 相關(guān)理論
1)node.js 是一個事件驅(qū)動I/O服務(wù)端JavaScript環(huán)境，基于Google的V8引擎见转。目的是為了提供撰寫可擴展網(wǎng)絡(luò)程序命雀，如Web服務(wù)。
2)node模塊管理是通過NPM（即 Node Package Manage斩箫，是 NodeJS 模塊管理工具）來處理各模塊之間的依賴吏砂。
3)bower是使用nodejs開發(fā)，用于web包管理乘客。作為包管理狐血，bower能提供添加新web包，更新web包易核，刪除web包匈织，發(fā)布web包功能，管理包依賴牡直。
4)gulp處理html壓縮/預(yù)處理/條件編譯缀匕，圖片壓縮，精靈圖自動合并等任務(wù)井氢。
5)webpack是模塊化管理的工具弦追，使用webpack可實現(xiàn)模塊按需加載岳链，構(gòu)建js/css任務(wù)花竞，模塊預(yù)處理，模塊打包等功能。 - 新建express 項目：
1. npm install express -save
2. npm install -g express-generator
3. express -e new_express
4. cd new_express && npm install
5. npm start
- 當(dāng)出現(xiàn)跨域的時候约急，瀏覽器會主動發(fā)送options驗證是否允許訪問接口零远。所以options為瀏覽器主動發(fā)出，而后端沒有配置支持options之后厌蔽，則瀏覽器發(fā)出一次options之后就不會再繼續(xù)發(fā)送get獲取post請求了牵辣，那么前端能做的就是關(guān)閉瀏覽器的跨域限制。
mac下的chrome：
1. 關(guān)閉所有窗口
2. 終端輸入：open -a Google\ Chrome --args --disable-web-security
mac下的safari：
開發(fā)->停用跨源限制
-
token 身份驗證
1）首先客戶端登陸后奴饮，發(fā)起請求纬向，由服務(wù)器返回token給前端。
2）之后每次客戶端請求時都需要將token帶上戴卜，以用于身份驗證逾条，并且可將所需用戶信息(如：userId)通過該中間件掛載在請求內(nèi)容中。
request.jpg
可在瀏覽器Request Headers中看到攜帶有access-token字段及內(nèi)容投剥。
3）服務(wù)端中間件處理（node.js):
const accessToken = req.get('access-token');
if(!accessToken){
return res.sendStatus(401);
}
//通過token和加密規(guī)則解析出userId
//...
req.userId = userId; // 掛載userId
next();
