详细问题描述
使用了webview 打不开页面
[内容]
<template>
<scroll-view @scroll="test">
<!-- <view class="news banner">
<view class="news-top-imgs">
<view class="page-section swiper">
<view class="page-section-spacing">
<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
<view v-for="(slid,index) in detailData.slideshow" :key="index" >
<swiper-item>
<view class="swiper-item bar-img" :style="{backgroundImage: 'url('+dataUrl+'upload/'+slid+')'}"></view>
</swiper-item>
</view>
</swiper>
</view>
</view>
</view>
<view class="news-title bar">
<text class="news-title-text">{{detailData.title}}</text>
<view class="news-title-time">
<text class="news-title-time-t1">3小时前</text>
<text class="news-title-time-t1">3654阅读</text>
</view>
</view>
<view class="news-comtent bar content">
</view>
<view class="news-comment-list bar">
<view class="news-comment-bar">
<text class="news-comment-bar-text">全部评论:</text>
<text class="news-comment-bar-number">({{commentCount}})</text>
</view>
<view class="comment-none" v-if="contentData.length < 1">
<text class="correlation-video-title">暂无评论!</text>
</view>
<view v-for="(item, index) in contentData" :key="index">
<view class="news-comment-t1">
<view class="news-comment-info">
<image class="news-comment-info-img" :src="item.user_img===null?defaultImg:item.user_img"></image>
<view class="news-comment-info-t2">
<text class="news-comment-info-text">{{item.user_name===null?'无名猫猫':item.user_name}}</text>
<text class="news-comment-info-time">{{item.add_time}}</text>
</view>
</view>
<view class="news-comment-content">
<view class="news-comment-content-t1">
<text class="news-comment-content-text">{{item.content}}</text>
</view>
</view>
</view>
</view>
</view>
<chat-input @send-message="send_comment" @blur="blur" :focus="focus" ></chat-input>
<view class="news-bottom bar" v-if="focus===false">
<view @click="onInputClick()">
<input type="text" disabled="disabled" class="news-bottom-input" @input="confirmData" @confirm="confirmSub" placeholder="我来说一说..." v-model="sayText" />
</view>
<view class="news-bottom-img">
<image class="news-bottom-img-t1" :src="icons[0]"/>
<image class="news-bottom-img-t1 share" :src="icons[1]" />
<image class="news-bottom-img-t1" :src="icons[2]" @click="onLike(detailData.id)"></image>
</view>
</view>
</view> -->
</scroll-view>
</template>
<script>
import chatInput from '../../components/input/chatinput.vue'; //input框
import uParse from '../../components/uParse/src/wxParse.vue'
import commonData from '@/common/commonData.js';
export default {
data() {
return {
banner: {},
detailData:{},
dataUrl:'',
nid:'',
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
commentCount:0,
defaultImg:'../../static/touxiang15@3x.png',
uid:0,
icons:[
'../../static/icon1@2x.png',
'../../static/icon2@2x.png',
'../../static/icon3@2x.png',
],
contentData:[],
focus: false, //是否自动聚焦输入框
height:'500upx',
}
},
components:{uParse,chatInput},
onShareAppMessage() {
return {
title: this.banner.title,
path: '/pages/detail/newsDetails?query=' + JSON.stringify(this.banner)
}
},
onLoad(event) {
// 目前在某些平台参数会被主动 decode,暂时这样处理。
try {
this.banner = JSON.parse(decodeURIComponent(event.query));
} catch (error) {
this.banner = JSON.parse(event.query);
}
this.getDetail(); //获取文章内容
this.getComment(); //获取评论列表
this.dataUrl = commonData.requestUrl;
uni.setNavigationBarTitle({
title: this.banner.title
});
this.webview();
},
methods: {
test:function(e){
console.log(e)
},
webview(){
var pages = getCurrentPages();
var page = pages[pages.length - 1];
// #ifdef APP-PLUS
var currentWebview = page.$getAppWebview();
// #endif
// let webviewUrl = commonData.requestUrl+'AWebview/H5forShow/'+this.banner.id;
let webviewUrl = 'http://wsd.591hufu.com/price';
var pusher = plus.webview.open(webviewUrl,'style',{
top:'10px',left:'0px',width:'100%', position: 'static',
});
currentWebview.append(pusher);
},
getDetail() {
let that = this;
uni.request({
url: commonData.requestUrl+'ANews/getNewsDetails/' + that.banner.id,
success: (result) => {
if (result.data.status == 200) {
/* this.content = result.data.result[0].content;
this.title = result.data.result[0].title;
this.slideshow = result.data.result[0].resource.split(','); */
let content = result.data.result[0].content;
let detailsData = {
"content":content,
"title":result.data.result[0].title,
"slideshow":result.data.result[0].resource.split(','),
"id":result.data.result[0].id,
}
that.nid = result.data.result[0].id;
that.detailData = detailsData;
} else {
that.content = '';
}
}
});
},
getComment(){
let that = this;
uni.request({
url: commonData.requestUrl+'Aattention/CommentList',
method:'POST',
header: {
'content-type': 'application/x-www-form-urlencoded',
},
data:{
nid:that.banner.id,
type:2,
},
dataType:'json',
success: (result) => {
let backData = result.data;
if (backData.status == 200) {
that.contentData = backData.result;
that.commentCount = backData.count;
//console.log("请求成功!");
this.init_input();
}else if(backData.status == 500){
console.log("请求失败!");
}
}
});
},
onInputClick(){
this.focus = true;
console.log("focus.226"+this.focus);
},
onLike(nid) {
console.log(nid);
let that = this;
uni.getStorage({
key: 'LoginData',
success: function (res) {
if(res.data !=''){
that.uid = res.data;
that.likes(that.uid,nid);
}
},
fail:function(error){
uni.navigateTo({
url: '/pages/login/index'
});
}
});
},
likes(uid,nid){
uni.request({
url: commonData.requestUrl+'Aattention/OnLike',
method:'POST',
header: {
'content-type': 'application/x-www-form-urlencoded',
},
data:{
uid:uid,
nid:nid
},
dataType:'json',
success: (result) => {
let backData = result.data;
if (backData.status == 200) {
uni.showToast({
title: "成功点赞!",
});
}else if(backData.status == 500){
uni.showToast({
title: "点赞失败!",
});
}
}
});
},
blur: function() {
this.init_input();
},
send_comment: function(message) {
/* let that = this;
let discussData = message.content;
let addData = {
name:'你的名字',
src:'../../static/touxiang15@3x.png',
time:'刚刚',
message:discussData,
};
this.contentData.unshift(addData); */
let that = this;
uni.getStorage({
key: 'LoginData',
success: function (res) {
if(res.data !=''){
that.uid = res.data;//获取用户的ID
that.sub_Comment(that.uid,message.content);
}
},
fail:function(error){
uni.navigateTo({
url: '/pages/login/index'
});
}
});
this.init_input();
},
sub_Comment(uid,contents){
uni.request({
url: commonData.requestUrl+'Aattention/SubComment',
method:'POST',
header: {
'content-type': 'application/x-www-form-urlencoded',
},
data:{
uid:uid,
nid:this.nid,
content:contents,
type:2, //注意 评论的类型 1.动态 2.资讯 3.课程 后续添加的时候记得数据库备份
},
dataType:'json',
success: (result) => {
let backData = result.data;
if (backData.status == 200) {
this.contentData = backData.result;
this.commentCount = backData.count;
uni.showToast({
title: "评论成功!",
});
}else if(backData.status == 500){
uni.showToast({
title: "评论失败!",
});
}
}
});
},
init_input() {
this.focus = false;
this.discussData = '';
this.sayText = '';
},
}
}
</script>
<style>
.content{
height: 200upx;
}
.comment-none{
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 50upx;
}
.bar-img{
background: no-repeat;
background-size: 100%;
}
.swiper {
height: 427upx;
}
.swiper-item {
display: block;
height: 427upx;
line-height: 300upx;
text-align: center;
}
.swiper-list {
margin-top: 40upx;
margin-bottom: 0;
}
.uni-common-mt{
margin-top:60upx;
position:relative;
}
.info {
position: absolute;
right:20upx;
}
</style>
<style>
.news-comment-content{
width: 670upx;
display: flex;
justify-content: flex-end;
margin-top: 25upx;
}
.news-comtent {
margin: 54upx 0upx;
}
.news-comment-bar{
padding-top: 61upx;
border-top-style: solid;
border-top-width: 1upx;
border-top-color: RGBA(241, 242, 245, 1);
}
.news-comment-content-text{
height:30upx;
font-size:32upx;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(35,39,44,1);
}
.news-comment-content-t1{
width: 576upx;
}
.news-comment-info{
height: 80upx;
display: flex;
flex-direction: row;
align-items: center;
}
.news-comment-info-img{
width:80upx;
height:80upx;
border-radius:40upx;
margin-right: 15upx;
}
.news-comment-t1{
margin-top: 61upx;
}
.news-comment-info-text{
width:347upx;
height:27upx;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(35,39,44,1);
line-height:40upx;
}
.news-comment-info-time{
width:347upx;
height:21upx;
font-size:21upx;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(35,39,44,1);
line-height:31upx;
opacity:0.3;
}
.news-comment-info-t2{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 61upx;
}
.news-comment-bar-text{
width:138upx;
height:32upx;
font-size:32upx;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(35,39,44,1);
}
.news-comment-bar-number{
width:97upx;
height:31upx;
font-size:32upx;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(35,39,44,1);
opacity:0.6;
}
.bar{
padding: 0upx 40upx;
}
.news-top-imgs{
width: 750upx;
}
.news-top-imgs-t1{
width: 750upx;
height: 400upx;
border-radius: 0upx;
}
.news-title{
margin-top: 16upx;
}
.news-title-text{
width:660upx;
height:108upx;
font-size:32upx;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(35,39,44,1);
line-height:54upx;
}
.news-title-time{
display: flex;
justify-content: space-between;
margin-top: 27upx;
padding-bottom: 38upx;
border-bottom-style: solid;
border-bottom-width: 1upx;
border-bottom-color: RGBA(244, 244, 246, 1);
}
.news-title-time-t1{
height:54upx;
font-size:24upx;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(35,39,44,1);
line-height:54upx;
opacity:0.5;
}
.news-bottom-input{
width:421upx;
height:67upx;
background:rgba(242,242,242,1);
border-radius:33upx;
font-size:25upx;
font-family:PingFang-SC-Medium;
font-weight:500;
padding-left: 29upx;
margin: 15upx 0upx;
}
.news-comment-list{
margin-bottom: 120upx;
padding-bottom: 100upx;
}
.news-bottom{
border-top-style: solid;
border-top-width: 1upx;
border-top-color: RGBA(249, 249, 249, 1);
background-color: RGBA(255, 255, 255, 1);
display: flex;
align-items: center;
position:fixed;
bottom:0;
width: 700upx;
}
.news-bottom-img-t1{
width: 35upx;
height: 35upx;
}
.news-bottom-img{
width: 220upx;
text-align: right;
margin-left: 26upx;
margin-right: 30upx;
height: 36upx;
}
.share{
margin: 0upx 39upx;
}
</style>
[步骤]
[结果]
[期望]
IDE运行环境说明
[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]
[IDE版本号]
[windows版本号]
[mac版本号]
uni-app运行环境说明
[运行端是h5或app或某个小程序?]
[运行端版本号]
[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]
[编译模式是老模板模式还是新的自定义组件模式?]
App运行环境说明
[Android版本号]
[iOS版本号]
[手机型号]
[模拟器型号]
附件
[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]
[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]
[App安装包或H5地址]
[可重现代码片段]
联系方式
[QQ]
1 个回复
Trust - 少说废话
HBuilderX 1.9.2 完整的测试代码:
测试结果