https://www.nowcoder.com/discuss/442341699034021888

1. 小程序嵌入h5页面

使用小程序提供的web-view组件，可以在微信小程序中嵌入外部网页（前提是域名在微信公众平台后台配置过）
<web-view src="{{url}}"></web-view>

互相跳转

如果在网页中需要调用微信的能力，需要借助JS-SDK

• 小程序页面嵌入外部网页后，可以通过wx.navigateTo({url})这类路由切换api跳转到这个页面
• 外部网页想要返回小程序时，需要借助JSSDK，调用wx.miniProgram.navigateTo()等方法跳转

通信

微信小程序不鼓励大范围嵌入h5，避免把小程序变成“浏览器”，所以在通信上有很多限制

• 一种方式是在路由跳转时，通过url携带参数，缺点是参数大小有限

• 虽然web-view组件提供了bindmessage去接收网页通过postMessage发送的信息，但是在特定时机才能收到

  
  image.png

• 使用web socket可以实时通信，但是成本较高

• localStorage无法实现，两者的localStorage不共享

2. h5和小程序之间如何选择

h5开发灵活：
h5可以适配多端，不受微信限制，比如支付或者分享朋友圈等，小程序会受微信的限制，而h5更灵活

• 比如小程序组件要是有什么bug一直不改的话
• 或者产品觉得原生的日期组件样式不好，但在小程序中是无法覆盖那个日期弹出层的样式，只能换个组件

---

小程序系统权限更高：
因为h5依赖浏览器，所以基本没有什么系统权限，而小程序因为依赖微信APP，可以获取更多的权限，相机、相册、通讯录等

3. 传值方式

• 全局 - getApp()
• getCurrentPages() 从页面栈中获取到页面对象
• uni-app中还可以使用 $on / $emit / $once / $off实现组件间的传参
• 路由传参
• storage

4. rpx

解决屏幕自适应问题，微信小程序将布局时的设备宽度都视为750rpx，会自动帮我们计算1rpx与px的换算关系，就像rem我们需要自己来计算1rem应该为多少px（根据设备逻辑宽度和我们使用的设计稿宽度计算）

5. wxml

标签更少，没有dom树和window对象

6. openid

小程序可以用openid来区分用户
获取：先wx.login获取一个code，再使用这个code和appid和appsecret去换取openid（code给后端让后端去调微信的api，因为appsecret存在前端不安全）

7. bindTap和catchTap的区别

catch会阻止事件冒泡，防止事件穿透

8. 生命周期

组件生命周期

• 打开小程序：
  【app】app onLaunch → app onShow
  【page】page onLoad → page onShow → page onReady

• 进入下一个页面
  page onHide
  next page onLoad
  next page onShow
  next page onReady

• 返回上一个页面
  page onUnload
  pre page onShow

• 切出
  app onhide

• 重新进入
  取决于小程序是否被销毁，没被销毁就不会onLaunch

9. 页面的onLoad和onReady有什么区别

onload的时候还没有向view thread发送数据，当然页面也没有渲染，view第一次渲染结束之后触发onReady

10. 路由跳转方法的区别

主要是关闭当前页面时，页面是否出栈的区别

11. 请求

• 只能给在后台配置了的服务器域名发请求（本地开发勾选不校验合法域名）
• 不存在跨域问题，因为同源策略是浏览器才限制的

12. 分包

• 对代码包有限制 2M
• 分包，对路由触及的包按需加载-每个不超过2M ，总不超过20M

13. 没有双向绑定

• 需要通过setData的方式触发view更新（数据驱动）
• 双向：input内的值能跟着数据变化(可以)，数据能跟着input走（需要自己手动监听input事件来设置变量值）

14. 微信小程序原理

双线程(view thread、appservice thread)模型：渲染层解析wxml和wxss、逻辑层执行js
逻辑层通过setData更新view
2个线程之间通过微信客户端(native)来交换数据