后台展示小程序页面

一、将taro编写的代码转成h5运行

每个页面文件夹都需要一个index.config.js文件

解决Navbar样式问题，initLayout方法重写

1. 原方法

initLayout() {
    const sysInfo = Taro.getSystemInfoSync()
    const capsule = Taro.getMenuButtonBoundingClientRect() // 小程序右上角胶囊按钮参数
    console.log('123123123sad', sysInfo, capsule)
    const model = sysInfo.model
    const reg = new RegExp('(iPhone10)|(iPhone11)|(iPhone12)')
    const hasButtomPadding = reg.test(model)
    console.log(sysInfo.statusBarHeight)
    const layout = {
      navBar: {
        top: capsule.top,
        contentHeight: capsule.height,
        padding: capsule.top - sysInfo.statusBarHeight,
        height: 2 * capsule.top + capsule.height - sysInfo.statusBarHeight // 顶部标题栏总高度，包含手机的statusBar
      },
      unitTransformRate: {
        px2rpx: (750 / sysInfo.screenWidth),
        rpx2px: (sysInfo.screenWidth / 750)
      },
      isAdaptation: hasButtomPadding,
      windowWidth: sysInfo.windowWidth
    }
    return layout
  }

2. getSystemInfoSync

该方法是为了拿到当前设备的信息，所需字段在后台与小程序(iphoneX)的区别

字段	小程序	后台
statusBarHeight	20	‘’
screenWidth	375	1920

如果我们后台里做展示的话，我们给他设置固定的宽高，并将statusBarHeight值设为20

3. getMenuButtonBoundingClientRect

iphone6/7/8 {bottom: 56, height: 32, left: 278, right: 365, top: 24, width: 87}
该方法获取小程序的胶囊信息，但在h5上不支持，我们将小程序获取的值直接写死在新方法里

4.h5方法

initLayoutH5() {
    const layout = {
      navBar: {
        top: 24,
        contentHeight: 32,
        padding: 24 - 20,
        height: 2 * 24 + 32 - 20
      },
      unitTransformRate: {
        px2rpx: (750 / 375),
        rpx2px: (375 / 750)
      },
      isAdaptation: false,
      windowWidth: 375
    }
    return layout
  }

canIUse api 不支持

解决方法：只在weapp运行环境执行版本更新操作

token问题

Taro.checkSession()关掉，h5 没必要检测session是否过期，token使用后台的token

Taro.getLocation()不可用

小程序通过这个接口请求位置信息在h5端要重写

跨域问题

后端给当前域名和端口配置白名单

通过标签选择器写小程序样式的在h5上失效

全部用类选择器

内联样式与scss文件样式，转换的方式不一样

h5的页面栈获取有延迟，需要await

const pages = await Taro.getCurrentPages()

h5的页面栈处理不同

Taro.navigateBack() 是先把当前页面弹出然后加入返回的页面，并且没有小程序的10条限制

小程序图片标签设置mode为aspectFill在h5上没有效果

解决：

// jsx
<Image className='bg-image-reverse' src={corp.headerImgUrl} mode='aspectFill'/>

//scss
.bg-image-reverse {
	img {
      object-fit: cover;
    }
}

无法解决

1.Taro.setTabBarItem()h5无法使用

2.Taro.getApp()h5 返回 undefined

3.配置文件无法引入

import appConfig from '../app.config.copy'
console.log('appConfig', appConfig)
// appConfig -> undefined

二、使用iframe标签做应用嵌入展示

后台应用(Vue框架)中使用iframe标签引入小程序应用(taro:h5)

本地测试

// vue
<iframe
	id="weapp-iframe"
	ref="iframe"
	scrolling="no"
  	frameborder="0"
  	class="weapp-iframe"
  	src="http://172.17.1.208:10086/pages/index/index"
/>

iframe 通信

小程序向后台通信

// vue
created(){
	window.addEventListener('message', e => {
      const maskBoderStyle = {
        width: e.data.width + 'px',
        height: e.data.height + 'px',
        top: e.data.top + 'px',
        left: e.data.left + 'px'
      }
      this.maskBoderStyle = maskBoderStyle
    })
}

// 小程序 taro app.jsx
componentDidMount(){
	window.addEventListener('mousemove', e => {
      const {width, height, top, left} = e.target.getBoundingClientRect()
      window.parent.postMessage({width, height, top, left}, '*')
    })
}

后台向小程序通信

// vue
methods:{
	send(){
		const iframeWin = this.$refs.iframe.contentWindow
    	iframeWin.postMessage('hello world', '*')
	}
}

// jsx
window.addEventListener("message", e => {console.log('weapp', e)})