创建hbulderx插件WebViewDialog示例，输入框设置自动聚焦 ，运行无效，在普通浏览器可以自动聚焦
1***@qq.com
- 发布：2022-04-17 11:42
- 更新：2022-04-17 11:42
- 阅读：260
产品分类： HbuilderX
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 10
HBuilderX版本号： 3.4.6
操作步骤：
预期结果：
输入框可以自动聚焦
输入框可以自动聚焦
实际结果：
const path = require('path');
const vueFile = path.join(path.resolve(__dirname), 'static', 'vue.min.js');
const bootstrapCssFile = path.join(path.resolve(__dirname), 'static', 'bootstrap.min.css');
const customCssFile = path.join(path.resolve(__dirname), 'static', 'custom.css');
function Html(projectData) {
projectData = JSON.stringify(projectData)
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="${bootstrapCssFile}">
<link rel="stylesheet" href="${customCssFile}">
<script src="${vueFile}"></script>
</head>
<body>
<div id="app" v-cloak>
<form>
<div class="form-group row m-0 mt-3">
<label for="repo-type" class="col-sm-2 col-form-label">应用包名</label>
<div class="col-sm-10">
<input v-focus type="text" class="form-control outline-none" v-model="appInfo.packageName" placeholder="应用包名"/>
</div>
</div>
</form>
</div>
<script>
Vue.directive('focus', {
inserted: function(el) {
el.focus()
}
});
var app = new Vue({
el: '#app',
data: {
appInfo: {
publishType: "AppStore",
platforms: [],
name: "",
packageName: "",
versionName: "",
versionCode: "",
description: "",
changelog: "",
icon: "",
screenshot: ""
}
},
computed: {
publishPlatforms() {
let publishType = this.appInfo.publishType;
this.appInfo.platforms = [];
if (publishType == 'AppStore') {
return [
{"id":"huawei","name": "华为"}, {"id":"yyb","name": "应用宝"}, {"id":"xiaomi","name": "小米"},
{"id":"360","name": "360"}, {"id":"vivo","name": "vivo"}, {"id":"oppo","name": "oppo"}
];
} else {
return [{"id":"fir","name": "fir.im"}, {"id":"pgyer","name": "蒲公英"}];
}
}
},
created() {
// let projectData = ${projectData};
// let {name,versionName,versionCode, description, appid } = projectData;
// this.appInfo.name = name;
// this.appInfo.versionName = versionName;
// this.appInfo.versionCode = versionCode;
// this.appInfo.description = description;
// this.appInfo.packageName = appid;
},
mounted() {
this.$nextTick(() => {
window.addEventListener('hbuilderxReady', () => {
this.getResult();
this.btnClick();
})
});
},
methods: {
selectPlatforms(data) {
let tmp = this.appInfo.platforms;
if (tmp.includes(data)) {
this.appInfo.platforms = tmp.filter(item => item != data );
} else {
this.appInfo.platforms.push(data);
};
},
uploadImg(imgType) {
hbuilderx.postMessage({
command: 'uploadImg',
data: imgType
});
},
getResult() {
hbuilderx.onDidReceiveMessage((msg) => {
if (msg.command == 'img') {
if (msg.imgType == 'icon' ) {
this.appInfo.icon = msg.data;
};
if (msg.imgType == 'screenshot' ) {
this.appInfo.screenshot = msg.data;
};
};
});
},
btnClick() {
hbuilderx.onDidReceiveMessage((msg)=>{
if(msg.type == 'DialogButtonEvent'){
let button = msg.button;
if(button == '开始提交'){
hbuilderx.postMessage({
command: 'submitApp',
data: this.appInfo
});
} else if(button == '关闭'){
hbuilderx.postMessage({
command: 'closed'
});
};
};
});
}
}
});
</script>
</body>
</html>
`
};
module.exports = Html;
const path = require('path');
const vueFile = path.join(path.resolve(__dirname), 'static', 'vue.min.js');
const bootstrapCssFile = path.join(path.resolve(__dirname), 'static', 'bootstrap.min.css');
const customCssFile = path.join(path.resolve(__dirname), 'static', 'custom.css');
function Html(projectData) {
projectData = JSON.stringify(projectData)
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="${bootstrapCssFile}">
<link rel="stylesheet" href="${customCssFile}">
<script src="${vueFile}"></script>
</head>
<body>
<div id="app" v-cloak>
<form>
<div class="form-group row m-0 mt-3">
<label for="repo-type" class="col-sm-2 col-form-label">应用包名</label>
<div class="col-sm-10">
<input v-focus type="text" class="form-control outline-none" v-model="appInfo.packageName" placeholder="应用包名"/>
</div>
</div>
</form>
</div>
<script>
Vue.directive('focus', {
inserted: function(el) {
el.focus()
}
});
var app = new Vue({
el: '#app',
data: {
appInfo: {
publishType: "AppStore",
platforms: [],
name: "",
packageName: "",
versionName: "",
versionCode: "",
description: "",
changelog: "",
icon: "",
screenshot: ""
}
},
computed: {
publishPlatforms() {
let publishType = this.appInfo.publishType;
this.appInfo.platforms = [];
if (publishType == 'AppStore') {
return [
{"id":"huawei","name": "华为"}, {"id":"yyb","name": "应用宝"}, {"id":"xiaomi","name": "小米"},
{"id":"360","name": "360"}, {"id":"vivo","name": "vivo"}, {"id":"oppo","name": "oppo"}
];
} else {
return [{"id":"fir","name": "fir.im"}, {"id":"pgyer","name": "蒲公英"}];
}
}
},
created() {
// let projectData = ${projectData};
// let {name,versionName,versionCode, description, appid } = projectData;
// this.appInfo.name = name;
// this.appInfo.versionName = versionName;
// this.appInfo.versionCode = versionCode;
// this.appInfo.description = description;
// this.appInfo.packageName = appid;
},
mounted() {
this.$nextTick(() => {
window.addEventListener('hbuilderxReady', () => {
this.getResult();
this.btnClick();
})
});
},
methods: {
selectPlatforms(data) {
let tmp = this.appInfo.platforms;
if (tmp.includes(data)) {
this.appInfo.platforms = tmp.filter(item => item != data );
} else {
this.appInfo.platforms.push(data);
};
},
uploadImg(imgType) {
hbuilderx.postMessage({
command: 'uploadImg',
data: imgType
});
},
getResult() {
hbuilderx.onDidReceiveMessage((msg) => {
if (msg.command == 'img') {
if (msg.imgType == 'icon' ) {
this.appInfo.icon = msg.data;
};
if (msg.imgType == 'screenshot' ) {
this.appInfo.screenshot = msg.data;
};
};
});
},
btnClick() {
hbuilderx.onDidReceiveMessage((msg)=>{
if(msg.type == 'DialogButtonEvent'){
let button = msg.button;
if(button == '开始提交'){
hbuilderx.postMessage({
command: 'submitApp',
data: this.appInfo
});
} else if(button == '关闭'){
hbuilderx.postMessage({
command: 'closed'
});
};
};
});
}
}
});
</script>
</body>
</html>
`
};
module.exports = Html;
bug描述：
hbulderx 插件 createWebViewDialog 。
WebView页面focus 方法无效，页面输入框无法自动聚焦
0 个回复