小程序（二）

Jul 19, 2018 | 前端之巅 | Hits

web-view 组件

web-view 组件是一个用来承载网页的容器，其加载的 URL 需要配置到域名白名单中，在微信公众平台【设置】->【开发设置】->【业务域名】下进行设置。

一个小程序中可能会载入很多 H5 页面，通常我们会创建一个通用的 page，来承载这些 H5 页面。下面，就来创建这个通用的 page，给它起名为 web。

第一步：在 index.wxml 中引入 web-view 组件

<!-- web/index.wxml -->
<view>
  <web-view src="{{u}}"></web-view>
</view>

第二步：在 index.js 中读取数据

Page({
  name: 'web',
  data: {
    u: ''
  },
  onLoad(option) {
    const u = option.u
    this.setData({
      u
    })
    console.log('[web-view url]', u)
  }
})...

一般情况下，我们需要对 url 进行转义。

1	decodeURIComponent(option.u)

H5 调用小程序方法

在 web-view 组件中加载的网页，可以使用内置的一些接口能力，比如最常用的跳转操作、向小程序发送消息，具体可以查看 web-view · 小程序。

判断环境

利用微信提供的 JSSDK 1.3.2 来判断环境。

1	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

方式一：

function ready() {
  console.log(window.__wxjs_environment === 'miniprogram') // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
  document.addEventListener('WeixinJSBridgeReady', ready, false)
} else {
  ready()
}

方式二：

1
2
3

wx.miniProgram.getEnv(function(res) {
  console.log(res.miniprogram) // true
})

目前发现如果使用方式二判断环境，只有在小程序内才能走到回调函数，即在浏览器内运行不会打印出 false 。

处理跳转

调用如下的方法，就可以跳转到指定的小程序页面了。

1	wx.miniProgram.navigateTo({url: '/path/to/page'})

向小程序发送消息

小程序端先绑定处理事件：

1	<web-view src="{{url}}" bindmessage="handleMsg"/>

Page({
  handleMsg: function (e) {
    console.log('h5 postMessage is', e.detail.data)
  }
})

H5 端触发事件：

1	wx.miniProgram.postMessage({ data: '这是一条传递给小程序的消息' })

前端