小程序嵌入html 并自由改变样式

时间 2019-11-08

标签程序嵌入 html 自由改变样式栏目 HTML 繁體版

原文原文链接

微信小程序中嵌入html使用以下标签
<rich-text nodes="{{--}}"></rich-text>
以前一个需求开发当中,须要在小程序中套入页面,小程序官方方法如上,可是又不少问题,好比样式问题没办法修改,经搜索的替换标签方法未生效,由于是后台返回,后端人员并不想他们处理两次标签,只想和h5,pc公用一套javascript

经多方实验沟通采用了以下方法,后端去掉html body等头部,保留信息片断,前端建立专门的展现页面,如:
`<!DOCTYPE html>
<html>html

<head>前端

<meta charset="UTF-8">
<title>博识</title>
<meta name="full-screen" content="yes" />
<meta name="browsermode" content="application" />
<meta name="x5-orientation" content="portrait" />
<meta name="x5-fullscreen" content="true" />
<meta name="x5-page-mode" content="app" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<script src="jquery.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>

</head>
<style>java

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body,
.page {
    width: 100%;
    word-break: break-all;
    overflow-x: hidden;
}

.title {
    font-size: 18px;
    text-align: center;
    padding: 15px 10px 5px;
    color: #000;
    font-weight: 700;
    line-height: 30px;
}

.page {
    padding: 5px 15px 5px 10px;
}

img {
    display: block;
    margin: 5px auto;
    width: 100% !important;
    height: 100% !important;
}

</style>node

<body>jquery

<div class="title"></div>
<div class="page"></div>

<script type="text/javascript">
    var param = "---"
    $.ajax({
        contentType: "application/json",
        type: 'GET',
        url: url + param,
        cache: false,
        data: JSON.stringify(param),
        success: function (response) {
            if (response.code == 0) {
                var content = response.data.content
                var titles = response.data.tit
                $('.title').html(tit)
                $('.page').html(content)

            }

        },
        error: function (a, b, c) {
            $('.page').html('暂无数据,请稍后再试')
        }
    });
    // var smallPro = false;
    // //判断当前页面是否在小程序环境中
    // wx.miniProgram.getEnv(function (res) {
    //     console.log(res.miniprogram) // true
    //     if (res.miniprogram) {
    //         smallPro = true;
    //     } else {
    //         smallPro = false;
    //     }

    // });

    // if (smallPro) {
    //     wx.miniProgram.navigateTo({
    //         url: '/pages/mymanage/mymanage',//跳转回小程序的页面
    //         success: function () {
    //             console.log('success')
    //         },
    //         fail: function () {
    //             console.log('fail');
    //         },


    //     });
    // } else {
    //     // window.open('http://t.cn/RXT246p', '_blank');//这里是H5页面以前跳转到第三方的咨询客服
    // }
</script>

</body>web

</html>`
小程序中使用:
<web-view class="det-box" src="{{url}}"></web-view>
`onLoad: function (option) {ajax

let nid = option.nid
    let urls = app.globalData.DOMAIN_PATH + 'minidet.html/?miniid=' + nid
    this.setData({
        id:nid,
        url: urls
    })
    
},`
这样样式彻底能够自由控制