初試vue-cli使用HBuilderx打包app的坑
微信授權(quán)登錄提示code-2
appid和appsecret應(yīng)該是移動(dòng)應(yīng)用,而非網(wǎng)頁(yè)應(yīng)用
微信授權(quán)登錄提示code:-100/自定義基座無(wú)法微信登錄和分享
開(kāi)發(fā)者賬號(hào)配置的應(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)背景圖片使用相對(duì)路徑,打包測(cè)試不出現(xiàn)
修改config/index,js內(nèi)的這一行
// Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './',
import進(jìn)來(lái)的樣式表沒(méi)有被lib-flexible轉(zhuǎn)為rem
轉(zhuǎn)換寫(xiě)法,改為<style scoped src='../../assets/css/formReset.css'></style>
ApplePay沙盒測(cè)試登錄app store失敗
不能直接登錄app store,需要在點(diǎn)擊付款時(shí)登錄沙盒賬號(hào)
微博分享閃退
Dcloud的鍋,在授權(quán)失敗時(shí)授權(quán)層會(huì)閃現(xiàn)閃退,授權(quán)失敗有兩種情況,1網(wǎng)絡(luò)問(wèn)題授權(quán)失敗2你沒(méi)安裝新浪微博,要再加一層判斷,如果授權(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ī)測(cè)試,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打開(kāi)第三方鏈接出現(xiàn)的諸多問(wèn)題
①在打開(kāi)的連接中執(zhí)行一段腳本
$this.payw.evalJS(script);
安卓測(cè)試無(wú)錯(cuò),iPhone不執(zhí)行
解決:
將evalJS代碼放在loaded里
$this.payw.addEventListener('loaded',function () { $this.payw.evalJS(string); });
②loaded內(nèi)代碼執(zhí)行了兩次,導(dǎo)致頁(yè)面跳轉(zhuǎn)兩次
Dcloud的鍋,解決辦法:
var isLoaded = false; $this.payw.addEventListener('loaded',function () { if(isLoaded){return true} isLoaded=true; $this.payw.evalJS(string); });
③使用loading監(jiān)聽(tīng)頁(yè)面跳轉(zhuǎn),跳轉(zhuǎn)到執(zhí)行成功頁(yè)面即close當(dāng)前webview,但I(xiàn)OS下監(jiān)聽(tīng)無(wú)效
Dcloud的鍋,loading中webview.getUrl獲取的永遠(yuǎn)是上一步的url,而不是當(dāng)前頁(yè)面的真正url
一開(kāi)始想更換loaded,后來(lái)發(fā)現(xiàn)在IOS上loaded有些webview只執(zhí)行一次,有些則能每次跳轉(zhuǎn)都執(zhí)行,不太穩(wěn)定,最終決定使用progressChanged
解決方案:使用loaded來(lái)evalJS,progressChanged來(lái)對(duì)比地址
var isLoaded = false; payw.addEventListener('loaded',function () { if(isLoaded){return true} isLoaded=true; payw.evalJS(string); }) payw.addEventListener('progressChanged',function () { // 監(jiān)聽(tīng)是否成功 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也會(huì)引發(fā)執(zhí)行多次的問(wèn)題
可以在判斷成功后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
// 寫(xiě)在mounted內(nèi) // 處理安卓返回鍵問(wèn)題 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();// 判斷是后退還是回到其他頁(yè)面的方法 } } }
動(dòng)態(tài)添加的HTML節(jié)點(diǎn)如何綁定事件
有這個(gè)需求是因?yàn)橛卸嗾Z(yǔ)言版本,文本從后臺(tái)讀取。
比如
By creating your account, you agree to the Terms of Use and Privacy Policy of this site.
放在底部,點(diǎn)擊其他地方無(wú)反應(yīng),但點(diǎn)擊Terms of Use或者Privacy Policy則要出現(xiàn)條款浮層
解決辦法:
后臺(tái)添加語(yǔ)言僅修改文字,不要?jiǎng)h除標(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)簽寫(xiě)為:
<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)簽,通過(guò)event.target.nodeName來(lái)判斷
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 淺談vue項(xiàng)目利用Hbuilder打包成APP流程,以及遇到的坑
- vue項(xiàng)目打包為APP,靜態(tài)資源正常顯示,但API請(qǐng)求不到數(shù)據(jù)的操作
- vue-cli或vue項(xiàng)目利用HBuilder打包成移動(dòng)端app操作
- 通過(guò)cordova將vue項(xiàng)目打包為webapp的方法
- vue項(xiàng)目中使用Hbuilder打包app 設(shè)置沉浸式狀態(tài)欄的方法
- 使用vue打包時(shí)vendor文件過(guò)大或者是app.js文件很大的問(wèn)題
- Vue項(xiàng)目如何打包成移動(dòng)端APP
相關(guān)文章
在vue中路由使用this.$router.go(-1)返回兩次問(wèn)題
這篇文章主要介紹了在vue中路由使用this.$router.go(-1)返回兩次問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12vue 組件之間事件觸發(fā)($emit)與event Bus($on)的用法說(shuō)明
這篇文章主要介紹了vue 組件之間事件觸發(fā)($emit)與event Bus($on)的用法說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07淺談vue-cli加載不到dev-server.js的解決辦法
本篇文章主要介紹了淺談vue-cli加載不到dev-server.js的解決辦法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11vue3實(shí)現(xiàn)動(dòng)態(tài)添加路由
這篇文章主要介紹了vue3實(shí)現(xiàn)動(dòng)態(tài)添加路由方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04Vue實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的三種方式總結(jié)
項(xiàng)目當(dāng)中如果做新增/修改/刪除等等操作通常情況下都需要刷新數(shù)據(jù)或者刷新當(dāng)前頁(yè)面。本文為大家整理了三種不同的實(shí)現(xiàn)方法,需要的可以參考一下2023-01-01使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能
這篇文章主要介紹了使用Vue中 v-for循環(huán)列表控制按鈕隱藏顯示功能,需要的朋友可以參考下2019-04-04