31.小程序与内嵌网页之间的跳转
小程序跳转到内嵌H5页面，需要使用web-view组件，定义该组件的src属性即可。
内嵌H5页面跳转到小程序页面引入微信的jssdk文件，使用wx.miniProgram.redirectTo({url: '/path/to/page'})
32. 判断网页是否在小程序环境
在网页内可通过window.__wxjs_environment变量判断是否在小程序环境，建议在WeixinJSBridgeReady回调中使用，也可以使用JSSDK 1.3.2提供的getEnv接口。
代码如下：
// web-view下的页面内
wx.ready(function() {
console.log(window.__wxjs_environment === 'miniprogram') // true
})
// 或
wx.miniProgram.getEnv(function(res) {
console.log(res.miniprogram) // true
})
33. 小程序与内嵌网页的通信
- 在web-view中添加bindmessage属性，并绑定一个函数，用于监听网页发来的消息。
- 在内嵌网页中引入jssdk，然后调用wx.miniProgram.postMessage()来向小程序发送数据。
小程序代码：
<!--webview.wxml-->
<web-view src="{
{url}}" bindmessage="postMessage"></web-view>
// webview.js
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
url: options.url
})
},
postMessage(e) {
// e.detail = { data }，data是多次 postMessage 的参数组成的数组
this.setData({
score: e.detail.data[0].score
})
}
})
内嵌网页代码：
<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
// javascript
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
注意：网页向小程序 postMessage时，不是实时的，只有在特定时机（小程序后退、组件销毁、分享）触发并收到消息。
34. 小程序内嵌网页的转发分享
小程序内嵌网页本质是在web-view组件的容器中，当对小程序内嵌网页的转发分享，也是对webview页面的转发分享，所以只需在webview.js中的page()定义onShareAppMessage即可。
代码如下：
Page({
onShareAppMessage(options) {
console.log(options.webViewUrl) // 获取当前<web-view>的URL
return {
title: "转发文本标题",
imageUrl: "转发缩略图途径",
path: options.webViewUrl
}
}
})
35. webview组件中bindload问题
最近开发小程序的时候，遇到了一个奇怪的问题。当我对内嵌网页设置背景音频的时候，当网页加载成功的时候，定义音频。但在真机上测试的时候背景音频定义两次，所以出现了重音的现象。
打印了一下日志，发现bindload定义的方法执行了两次。其原因我也不知。
代码如下：
webview.wxml
<!-- 指向微信公众平台首页的web-view -->
<web-view src="{
{url}}" bindload="loadHtml"></web-view>
webview.js
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
url: options.url
})
},
loadHtml() {
console.log('页面加载完成')
}
})
36. 小程序自定义是否转发
当你在页面对应的js文件中定义了onShareAppMessage方法，就默认了该页面可以转发。
Page({
onShareAppMessage: function () {
return {
title: '自定义转发标题',
imageUrl: '分享图片路径',
path: '/page/user?id=123'
}
}
})
点击小程序右上角按钮的转发会调用onShareAppMessage。
如果点击页面按钮也可以调用该函数，需要设置button的open-type属性，代码如下：
<button open-type="share">分享给好友</button>
注意点：
- path必须是以 / 开头的完整路径。
- 用户点击转发按钮的时候会调用。
- 有些小程序页面是需要根据请求返回的字段定义是否可以转发，这需要调用wx.hideShareMenu()和wx.showShareMenu()的API。
37.背景音乐播放
现象：小程序内嵌的H5网页设置了背景音乐后，在H5中跳转到小程序之后或者小程序在后台运行时背景音乐还会持续播放，甚至出现重叠的背景音乐。
解决方法：在小程序跳转到网页的webview页面使用audio组件，并使用wx.createInnerAudioContext()的API或者直接使用wx.createAudioContext()的API，并在webview.js文件中的onShow()和onHide()中调用该API的暂停和播放。
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
url: options.url
})
},
loadAudio() {
if (!this.innerAudioContext) {
this.innerAudioContext = wx.createInnerAudioContext()
this.innerAudioContext.src = this.data.audio
this.innerAudioContext.autoplay = true
wx.setInnerAudioOption({
obeyMuteSwitch: false})
this.innerAudioContext.onPlay(() => {
console.log('开始播放')
})
}
},
onShow () {
if (this.innerAudioContext) {
if (this.innerAudioContext.paused) {
this.innerAudioContext.play()
}
}
},
onHide () {
this.innerAudioContext.pause()
},
onUnload () {
this.innerAudioContext.destroy()
}
})
38. promise在小程序中的运用
当开发者在开发时，可能会遇到这种情况：一个页面的加载会需要多种请求返回的数据构成，当页面一旦加载，显示加载条，只有当所有的请求都成功之后才会显示其页面，才会隐藏加载条。
但多种请求无法预测哪个请求首先完成。
如果使用请求中套用请求这种方法，用户的体验不是很好。
可以采用 promise.all方法可以把多个promise实例合并为一个，等待所有的子promise全部执行完成之后,才会触发回调函数。
详细解释
39. 点击跳转页面 再点击…形成一个页面跳转循环
现象：小程序在A页面点击按钮跳转到B页面，B页面有按钮跳转到A页面，然后A -> B -> A -> B -> …（或者A -> B -> C -> A -> B -> C -> …）形成一个循环。小程序的页面栈支持十层。超过十层之后小程序可能因内存不足造成程序崩溃。
解决方法：例如A -> B -> A -> B -> …，使用getCurrentPages在B页面跳转到A页面的按钮的点击事件判断小程序的上一级路由是否是A页面，若是则wx.navigateBack()。把小程序中所有有可能形成跳转循环的页面 跳转都加上类似的判断。这大概是个比较low的解决方法，如果你有更好的方式，请不吝赐教啦。
40. 小程序过滤器wxs的使用
现象：小程序在渲染时如果需要对数据进行处理，可以使用其对应的js文件。但针对于该方法在多个页面重复使用的时候修改其对应的js文件工程量巨大，造成代码繁琐重复。
解决方法：为了避免过多的代码产生，应该使用过滤器wxs对其直接进行处理。详细解释
41.小程序自定义模板以及引用
小程序为了避免页面中重复使用代码的问题，提供了模板机制，把一些可以复用的代码片段放置在代码中进行定义，然后在页面中使用。使用template
详细解释
42. 小程序引用文件
和小程序自定义模板的作用一致，include的引用功能是引用除template模板代码之外的全部代码，相当于把引用文件的代码复制过来。其中src定义的是文件的路径。
比如每个页面都有一样的导航菜单和版权信息，这样就可以把导航菜单代码和版权信息代码放置在一个单独的文件中，然后直接在页面中使用，并不需要重复的编写代码，同时还能保持代码、页面展现的一致性。
<!--head.wxml-->
<view>
<view>推荐</view>
<view>社会</view>
<view>军事</view>
<view>娱乐</view>
<view>科技</view>
</view>
<!--footer.wxml-->
<view>版权所有 © 2014-2019 </view>
<!--index.wxml-->
<include src="head.wxml" />
<view>正文内容</view>
<include src="footer.wxml" />
43. 小程序自定义插件
开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。
详细解释
44. 小程序跨页面传参通信 onfire.js
在小程序开发过程中，难免会遇到一种情况，当A页面需要用户设置数据 点击进入B页面，在B页面设置成功后返回并将设置的值传递给A页面。但是wx.navigateBack()并不支持返回传参。这种情况下就可以使用onfire.js，onfire.js 是一个很简单的事件分发的 Javascript 库（仅仅 0.9kb），简洁实用。
详细解释
45. 小程序使用wxParse解析html
小程序在开发时，读取到服务器的内容是html格式的，因小程序不支持html格式的内容显示的，因此要对html格式的内容进行编译，可以通过wxParse来实现。详细解释
46. 小程序如何退出
当用户点击左上角关闭或者按了设备Home键离开微信，小程序没有直接销毁，而是进入了后台，当再次进入微信或再次打开小程序，又会从后台进入前台。
微信小程序官方也没有提供退出的api。
但提供了一个navigator组件的open-type属性。
| 值 | 说明 | 最低版本 |
|---|---|---|
| navigate | 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 | |
| redirect | 对应 wx.redirectTo 的功能 | |
| switchTab | 对应 wx.switchTab 的功能 | |
| reLaunch | 对应 wx.reLaunch 的功能 | 1.1.0 |
| navigateBack | 对应 wx.navigateBack 的功能 | 1.1.0 |
| exit | 退出小程序，target="miniProgram"时生效 |
2.1.0 |
代码如下：
<navigator open-type="exit" target="miniProgram">关闭小程序</navigator>
注意点：这个功能只有在小程序版本库不能低于2.1.0才可使用。
47. 在小程序中打开另一个小程序
开发者有时可能会遇到这样一个需求，在小程序的某个页面中点击按钮跳转到另一个小程序。这种需求可以用navigator标签或wx.navigateToMiniProgram()实现
<navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">
打开绑定的小程序
</navigator>
或
wx.navigateToMiniProgram({
appId: '',
path: 'page/index/index?id=123',
extraData: {
foo: 'bar'
},
envVersion: 'develop',
success(res) {
// 打开成功
}
})
注意点：
- 必须是同一个公众号下绑定的小程序才能跳转。
- 需要用户触发跳转。
- 需要用户确认跳转。
- 每个小程序可跳转的其他小程序数量限制为不超过 10 个