网站百科

为您解码网站建设的点点滴滴

首页 > > 网站建设知识 > 建站知识 > 小程序

企业建站知识推广知识小程序微信营销 APP开发前端设计 MindManager 开发语言自媒体

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

发表日期：2019-11 文章编辑：小灯浏览次数：5443

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

经多方实验沟通采用了如下方法,后端去掉html body等头部,保留信息片段,前端创建专门的展示页面,如:
`<!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('暂无数据,请稍后再试')
        }
    });
    // 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>

</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
    })
    
},`
这样样式完全可以自由控制

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://dengtar.com/25239.html

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