小程序嵌入web-view,加原生组件

2023-04-12 14:33:03 阅读:3 编辑
wxml文件
<view class="wrap" wx:if="{{show}}">
  <web-view class="fixed" src="{{src}}">
    <cover-view class="tool-bar">
                <cover-view class="tool-btn ">
                  <cover-view class="new_button" bindtap="toCreate">创建</cover-view>
                </cover-view>
                <cover-view class="tool-btn my-botton"  wx:if="{{is_edit}}">
                  <cover-view class="new_button " bindtap="toEdit" >我的</cover-view>
                </cover-view>
            </cover-view>
  </web-view>
</view>

wxss文件

/* base/webview/webview.wxss */
.tool-bar {

  position: fixed;
  bottom: 100rpx;
  left: 0rpx;
  right: 0rpx;
  border-radius: 8rpx;
  z-index: 999999;
  display: flex;
  justify-content: space-around;
}

.tool-btn {
  font-size: 30rpx;
  font-weight: 700;
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,.3); 
}
.new_button{
  color: #c8c8c8;
}

.my-botton {
/*   margin-left: 30rpx; */
}

js文件

const app = getApp();
Page({
  data: {
    src: '',
    id:'',
    card_user_id:'',
    title:'',
    user_id:0,
    is_edit:0,
  },
  onLoad(o) {
    var uInfo = wx.getStorageSync('zhyshopInfo');
    if(uInfo){
        this.setData({
          user_id:uInfo.id,
        });
    }
    if(o.id){
      this.setData({
        id:o.id
      });
    }
    if(o.card_user_id){
      this.setData({
        card_user_id:o.card_user_id
      });
      if(this.data.card_user_id == this.data.user_id){
        this.setData({
          is_edit:1,
        });
      }
    }
    if(o.title){
      this.setData({
        title:o.title
      });
      wx.setNavigationBarTitle({
        title: this.data.title,
      })

    }

    //api请求(3d名片链接)
    let param = {
      user_id: this.data.card_user_id,
      card_id: this.data.id,
      type: "show",
    };
    app.api.post('api_manageagent|get3dUrl', param).then((res) => {
      console.log(res);
      let newUrl = res.data.url;
      this.setData({
        show:true,
        src: newUrl
      })
    }).catch((res) => {
      app.tips(res);
    });
   // const newUrl = decodeURIComponent(o.id);

  },
  onShareAppMessage: function () {
    let _this = this;
    return {
      same_share: true,
      title: this.data.title,
      path: '/plus2/manageagent/carddetail/carddetail?id='+ this.data.id + "&card_user_id=" + this.data.card_user_id + "&title=" + this.data.title,
    }
  },
  onShareTimeline() {
    return {
      title: this.data.title,
    }
  },
  toCreate(){
      wx.redirectTo({
        url: '/plus2/manageagent/cardlist/cardlist',
      })
  },
  toWebView(src) {
    src = encodeURIComponent(src);
    let url = "/base/webview/webview?id=" + src;
    wx.navigateTo({
      url: url,
    })
  },
  toEdit(){

    //api请求(3d名片链接)
    let param = {
      user_id: this.data.card_user_id,
      card_id: this.data.id,
      type: "edit",
    };
    app.api.post('api_manageagent|get3dUrl', param).then((res) => {
      console.log(res);
      this.toWebView(res.data.url);
    }).catch((res) => {
      app.tips(res);
    });
  }
})

注意事项

  1. 小程序页面嵌入web-view,那么该页面无法分享到朋友圈(小程序限制)
  2. 加原生组件,会一直显示出来。

https://blog.csdn.net/WEIGUO19951107/article/details/94305964