小程序嵌入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
    })
    
},`
這樣樣式徹底能夠自由控制