小程序嵌入html 并自由改變樣式

發(fā)表日期：2019-11 文章編輯：小燈瀏覽次數(shù)：5460

微信小程序中嵌入html使用如下標(biāo)簽
<rich-text nodes="{{--}}"></rich-text>
之前一個需求開發(fā)當(dāng)中,需要在小程序中套入頁面,小程序官方方法如上,但是又很多問題,比如樣式問題沒辦法修改,經(jīng)搜索的替換標(biāo)簽方法未生效,因為是后臺返回,后端人員并不想他們處理兩次標(biāo)簽,只想和h5,pc公用一套

經(jīng)多方實驗溝通采用了如下方法,后端去掉html body等頭部,保留信息片段,前端創(chuàng)建專門的展示頁面,如:
`<!DOCTYPE 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>

* {
    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>

<body>

<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('暫無數(shù)據(jù),請稍后再試')
        }
    });
    // var smallPro = false;
    // //判斷當(dāng)前頁面是否在小程序環(huán)境中
    // 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',//跳轉(zhuǎn)回小程序的頁面
    //         success: function () {
    //             console.log('success')
    //         },
    //         fail: function () {
    //             console.log('fail');
    //         },


    //     });
    // } else {
    //     // window.open('http://t.cn/RXT246p', '_blank');//這里是H5頁面之前跳轉(zhuǎn)到第三方的咨詢客服
    // }
</script>

</body>

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

    let nid = option.nid
    let urls = app.globalData.DOMAIN_PATH + 'minidet.html/?miniid=' + nid
    this.setData({
        id:nid,
        url: urls
    })
    
},`
這樣樣式完全可以自由控制

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/25239.html

上一篇：<小程序 svg 評估下一篇：小程序 svg 評估>