初试vue-cli使用HBuilderx打包app的坑

微信授权登录提示code-2

appid和appsecret应该是移动应用，而非网页应用

微信授权登录提示code:-100/自定义基座无法微信登录和分享

开发者账号配置的应用签名应该是md5加密后的值，而不是原字符串

生产环境proxyTable不生效，导致接口500

两种解决办法：
①入口文件使用网络地址，且和接口在同一域名下
②（推荐）

入口文件依旧是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里设置baseUrl

axios.defaults.baseURL = process.env.API_ROOT

css内背景图片使用相对路径，打包测试不出现

修改config/index,js内的这一行

// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',

import进来的样式表没有被lib-flexible转为rem

转换写法，改为<style scoped src='../../assets/css/formReset.css'></style>

ApplePay沙盒测试登录app store失败

不能直接登录app store，需要在点击付款时登录沙盒账号

微博分享闪退

Dcloud的锅，在授权失败时授权层会闪现闪退，授权失败有两种情况，1网络问题授权失败2你没安装新浪微博，要再加一层判断，如果授权失败则进行提示。

plus.share.getServices(function(s){
s.forEach(function(item) {
if(item.id === 'sinaweibo') {
$this.shares = item;
}
});
if($this.shares.authenticated) {
// 已授权
$this.shares.send($this.sinashareMsg, function() {
plus.nativeUI.toast($this.langs.SHARE_SUCCESS);
}, function(e) {
plus.nativeUI.toast($this.langs.SHARE_FAIL);
})
}else {
// 未授权
$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) {
// 授权失败
plus.nativeUI.toast($this.langs.SHARE_FAIL);
})
}
}, function(e){
plus.nativeUI.toast(e.message);
});

IOS真机测试，el-input光标全满，输入时错位

设置line-height=字体大小

iPhone X底部有个安全区，导致fixed+bottom的导航没有保持在最底部

打包后在index.html`

<meta name="viewport" content="width=device-width,initial-scale=1.0">`的content里加一句`viewport-fit=cover`

使用plus.createWebview创建webview打开第三方链接出现的诸多问题

①在打开的连接中执行一段脚本

$this.payw.evalJS(script);

安卓测试无错，iPhone不执行

解决：

将evalJS代码放在loaded里

$this.payw.addEventListener('loaded',function () {
$this.payw.evalJS(string);
});

②loaded内代码执行了两次，导致页面跳转两次

Dcloud的锅，解决办法：

var isLoaded = false;
$this.payw.addEventListener('loaded',function () {
if(isLoaded){return true}
isLoaded=true;
$this.payw.evalJS(string);
});

③使用loading监听页面跳转，跳转到执行成功页面即close当前webview，但IOS下监听无效

Dcloud的锅，loading中webview.getUrl获取的永远是上一步的url，而不是当前页面的真正url

一开始想更换loaded，后来发现在IOS上loaded有些webview只执行一次，有些则能每次跳转都执行，不太稳定，最终决定使用progressChanged

解决方案：使用loaded来evalJS，progressChanged来对比地址

var isLoaded = false;
payw.addEventListener('loaded',function () {
if(isLoaded){return true}
isLoaded=true;
payw.evalJS(string);
})
payw.addEventListener('progressChanged',function () {
// 监听是否成功
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也会引发执行多次的问题

可以在判断成功后remove掉事件

$this.fbsharew.addEventListener('progressChanged', handlePChange );
function handlePChange (e) {
if($this.fbsharew.getURL().split('?')[0] === finishlink) {
$this.fbsharew.removeEventListener('progressChanged', handlePChange );
}
}

处理安卓返回键，使返回时关闭所有webview

// 写在mounted内
// 处理安卓返回键问题
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();// 判断是后退还是回到其他页面的方法
}
}
}

动态添加的HTML节点如何绑定事件

有这个需求是因为有多语言版本，文本从后台读取。

比如

By creating your account, you agree to the Terms of Use and Privacy Policy of this site.

放在底部，点击其他地方无反应，但点击Terms of Use或者Privacy Policy则要出现条款浮层

解决办法：

后台添加语言仅修改文字，不要删除标签

<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标签写为：

<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')
}
}

只有一个点击范围的可以直接使用<span>标签，通过event.target.nodeName来判断

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

• vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法