初試vue-cli使用HBuilderx打包app的坑
微信授權(quán)登錄提示code-2
appid和appsecret應(yīng)該是移動應(yīng)用，而非網(wǎng)頁應(yīng)用
微信授權(quán)登錄提示code:-100/自定義基座無法微信登錄和分享
開發(fā)者賬號配置的應(yīng)用簽名應(yīng)該是md5加密后的值，而不是原字符串
生產(chǎn)環(huán)境proxyTable不生效，導(dǎo)致接口500
兩種解決辦法：
①入口文件使用網(wǎng)絡(luò)地址，且和接口在同一域名下
②（推薦）
入口文件依舊是index.html
在config/prod.env和config/dev.env下添加API_ROOT
'use strict'
module.exports = {
NODE_ENV: '"production"',
API_ROOT: '"http://cross.precision-wechat.com"'
}
在main.js里設(shè)置baseUrl
axios.defaults.baseURL = process.env.API_ROOT
css內(nèi)背景圖片使用相對路徑，打包測試不出現(xiàn)
修改config/index,js內(nèi)的這一行
// Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './',
import進(jìn)來的樣式表沒有被lib-flexible轉(zhuǎn)為rem
轉(zhuǎn)換寫法，改為<style scoped src='../../assets/css/formReset.css'></style>
ApplePay沙盒測試登錄app store失敗
不能直接登錄app store，需要在點(diǎn)擊付款時(shí)登錄沙盒賬號
微博分享閃退
Dcloud的鍋，在授權(quán)失敗時(shí)授權(quán)層會閃現(xiàn)閃退，授權(quán)失敗有兩種情況，1網(wǎng)絡(luò)問題授權(quán)失敗2你沒安裝新浪微博，要再加一層判斷，如果授權(quán)失敗則進(jìn)行提示。
plus.share.getServices(function(s){
s.forEach(function(item) {
if(item.id === 'sinaweibo') {
$this.shares = item;
}
});
if($this.shares.authenticated) {
// 已授權(quán)
$this.shares.send($this.sinashareMsg, function() {
plus.nativeUI.toast($this.langs.SHARE_SUCCESS);
}, function(e) {
plus.nativeUI.toast($this.langs.SHARE_FAIL);
})
}else {
// 未授權(quán)
$this.shares.authorize(function() {
$this.shares.send($this.sinashareMsg, function() {
plus.nativeUI.toast($this.langs.SHARE_SUCCESS);
}, function(e) {
plus.nativeUI.toast($this.langs.SHARE_FAIL);
})
}, function(e) {
// 授權(quán)失敗
plus.nativeUI.toast($this.langs.SHARE_FAIL);
})
}
}, function(e){
plus.nativeUI.toast(e.message);
});
IOS真機(jī)測試，el-input光標(biāo)全滿，輸入時(shí)錯(cuò)位
設(shè)置line-height=字體大小
iPhone X底部有個(gè)安全區(qū)，導(dǎo)致fixed+bottom的導(dǎo)航?jīng)]有保持在最底部
打包后在index.html`
<meta name="viewport" content="width=device-width,initial-scale=1.0">`的content里加一句`viewport-fit=cover`
使用plus.createWebview創(chuàng)建webview打開第三方鏈接出現(xiàn)的諸多問題
①在打開的連接中執(zhí)行一段腳本
$this.payw.evalJS(script);
安卓測試無錯(cuò)，iPhone不執(zhí)行
解決：
將evalJS代碼放在loaded里
$this.payw.addEventListener('loaded',function () {
$this.payw.evalJS(string);
});
②loaded內(nèi)代碼執(zhí)行了兩次，導(dǎo)致頁面跳轉(zhuǎn)兩次
Dcloud的鍋，解決辦法：
var isLoaded = false;
$this.payw.addEventListener('loaded',function () {
if(isLoaded){return true}
isLoaded=true;
$this.payw.evalJS(string);
});
③使用loading監(jiān)聽頁面跳轉(zhuǎn)，跳轉(zhuǎn)到執(zhí)行成功頁面即close當(dāng)前webview，但I(xiàn)OS下監(jiān)聽無效
Dcloud的鍋，loading中webview.getUrl獲取的永遠(yuǎn)是上一步的url，而不是當(dāng)前頁面的真正url
一開始想更換loaded，后來發(fā)現(xiàn)在IOS上loaded有些webview只執(zhí)行一次，有些則能每次跳轉(zhuǎn)都執(zhí)行，不太穩(wěn)定，最終決定使用progressChanged
解決方案：使用loaded來evalJS，progressChanged來對比地址
var isLoaded = false;
payw.addEventListener('loaded',function () {
if(isLoaded){return true}
isLoaded=true;
payw.evalJS(string);
})
payw.addEventListener('progressChanged',function () {
// 監(jiān)聽是否成功
console.log(payw.getURL())
var callbacklink = payw.getURL().split('?')[0];
// if(callbacklink === successUrl) {
// plus.webview.close(payw)
// console.log('success');
// }
// if(callbacklink === failUrl) {
// // 支付失敗
// plus.webview.close(payw);
// console.log('fail');
// }
// if(callbacklink === cancelUrl) {
// plus.webview.close(payw)
// console.log('cancel');
// }
})
④progressChanged也會引發(fā)執(zhí)行多次的問題
可以在判斷成功后remove掉事件
$this.fbsharew.addEventListener('progressChanged', handlePChange );
function handlePChange (e) {
if($this.fbsharew.getURL().split('?')[0] === finishlink) {
$this.fbsharew.removeEventListener('progressChanged', handlePChange );
}
}
處理安卓返回鍵，使返回時(shí)關(guān)閉所有webview
// 寫在mounted內(nèi)
// 處理安卓返回鍵問題
plus.key.removeEventListener('backbutton', handleBack );
plus.key.addEventListener('backbutton', handleBack )
function handleBack() {
var wvs=plus.webview.all();
for(var i=0;i<wvs.length;i++){
if(wvs[i].getURL() !== plus.webview.currentWebview().getURL()) {
plus.webview.close(wvs[i]);
$this.switchUrl();// 判斷是后退還是回到其他頁面的方法
}
}
}
動態(tài)添加的HTML節(jié)點(diǎn)如何綁定事件
有這個(gè)需求是因?yàn)橛卸嗾Z言版本，文本從后臺讀取。
比如
By creating your account, you agree to the Terms of Use and Privacy Policy of this site.
放在底部，點(diǎn)擊其他地方無反應(yīng)，但點(diǎn)擊Terms of Use或者Privacy Policy則要出現(xiàn)條款浮層
解決辦法：
后臺添加語言僅修改文字，不要刪除標(biāo)簽
<p>By creating your account, you agree to the<span data-id="0"> Terms of Use </span>and<span data-id="1"> Privacy Policy </span>of this site.</p>
這段html標(biāo)簽寫為：
<div class="terms" @click="popup($event)" v-html="langs.REGISTER_FOOTER"></div>
事件處理：
popup (event) {
let id = event.target.getAttribute('data-id')
if(id === '0') {
console.log('Terms of Use')
}
if(id === '1') {
console.log('Privacy Policy')
}
}
只有一個(gè)點(diǎn)擊范圍的可以直接使用<span>標(biāo)簽，通過event.target.nodeName來判斷
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue3中如何通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定,本文結(jié)合示例代碼給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
Vue3使用Suspense優(yōu)雅地處理異步組件加載的示例代碼
Vue3是Vue.js的最新版本,它帶來了許多令人興奮的新特性和改進(jìn),其中一個(gè)重要的特性是Suspense,它為我們提供了一種優(yōu)雅地處理異步組件加載和錯(cuò)誤處理的方式,本文給大家介紹了Vue3使用Suspense優(yōu)雅地處理異步組件加載的示例,需要的朋友可以參考下2024-01-01
IDEA創(chuàng)建Vue項(xiàng)目的兩種方式總結(jié)
這篇文章主要介紹了IDEA創(chuàng)建Vue項(xiàng)目的兩種方式總結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。2023-04-04
vue+golang實(shí)現(xiàn)上傳微信頭像功能
這篇文章主要介紹了vue+golang實(shí)現(xiàn)上傳微信頭像功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
Vue3使用vue-office插件實(shí)現(xiàn)word預(yù)覽功能
vue-office是一個(gè)支持多種文件(docx、.xlsx、pdf)預(yù)覽的vue組件庫,支持vue2和vue3,這篇文章主要介紹了Vue3使用vue-office插件實(shí)現(xiàn)word預(yù)覽功能,需要的朋友可以參考下2024-04-04
詳解vue中使用transition和animation的實(shí)例代碼
這篇文章主要介紹了詳解vue中使用transition和animation的實(shí)例代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
Vue實(shí)現(xiàn)Header漸隱漸現(xiàn)效果的實(shí)例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)Header漸隱漸現(xiàn)效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
這篇文章主要為大家介紹了vue?實(shí)現(xiàn)滑動塊解鎖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
keepalive是Vue的內(nèi)置組件,作用是將組件緩存在內(nèi)存當(dāng)中,防止重復(fù)渲染DOM,屬于消耗內(nèi)存獲取速度,這篇文章主要介紹了vue3項(xiàng)目keepAlive使用方法,主要將keepaliev在vue3.0中的用法,需要的朋友可以參考下2024-03-03
vue+element+springboot實(shí)現(xiàn)文件下載進(jìn)度條展現(xiàn)功能示例
本文主要介紹了vue + element-ui + springboot 實(shí)現(xiàn)文件下載進(jìn)度條展現(xiàn)功能，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11