微信小程序webview跳转小程序内路由

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。同时提供一系列工具帮助开发者快速接入并完成小程序开发。关于如何注册配置就不多言了，本文主要还是体验了下 web-view 的功能。

有了这个组件之后，小程序可以很好的嵌入一些页面，可以环境小程序 size 告急的问题，同样也使开发更加便捷，毕竟小程序开发者基本都对前端开发较为了解。

说再多还是需要去看官方文档， web-view文档 ,

首先就需要注意：兼容问题， 版本库和对应版本比例

目前而言，基本 80% 的用户会升级微信，所以其实不必担心版本问题，官方截止 2017-12-01 提供的数据也说明 88% 的用户支持 web-view 。

web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面；

属性： src 是 String 类型，是一个网站的 url ，默认值是 none ， webview 指向网页的链接。需登录小程序管理后台配置域名白名单。

可以配合 Page 实例的 onLoad 方法来获取 url 的具体值，也就是一个微信小程序页面中只有一个 web-view ，但是这个 web-view 的内容可以根据上一个页面传递的参数来获取页面 URL ，后面会讲如何实践，

官方提供如下接口：

1. 由小程序到 web-view ,其实本质上 WEB-VIEW 也是小程序的一个页面，所以小程序到 web-view 是正常的小程序间的通信，通过 wx.navigateTo 、 wx.redirectTo ，带上 url 参数, query 参数就像正常 url 的参数一样跟着后面，然后在 web-view 的页面的 Page 实例里面通过 onLoad 的方法的参数来获取 url 的值，设置给 web-view 的 src 属性为改值即可。

2. 由 web-view 到小程序，由于在 web-view 的跳转通常是在 src 对应的网页中的 *** 作来处理的，所以需要结合 jssdk 来处理，不需要 wx.config 配置，直接通过 script 标签来引入 [https://res.wx.qq.com/open/js/jweixin-1.3.0.js](http://link.zhihu.com/?target=https%3A//res.wx.qq.com/open/js/jweixin-1.3.0.js) ，就可以使用 wx.miniProgram.navigateTo 、 wx.miniProgram.navigateBack 、 wx.miniProgram.switchTab 、 wx.miniProgram.reLaunch 、 wx.miniProgram.redirectTo 接口，就像小程序之间的跳转一样，单是只能在当前小程序页面内跳转。

// web-view下的页面内 console.log(window.__wxjs_environment === 'miniprogram') // true

在目前实践了部分 web-view 的功能，

在这个 web-view 中，指向的就是 https://test.com 的内容，所以在在 https://test.com 中跳转出回到小程序，需要修改 https://test.com 中的 JavaScript ,

如果需要使用一些其他的的 jssdk 的方法，那就需要参照公众号的开发配置了。

由于很多使用中的一些问题

第一次写文章，希望有错能指正。

最近boss突然说要把一套web上的系统做成小程序。还好之前有过接触小程序，不过都是自己照着api和demo瞎写的，只能硬着头皮上了。

不出意外写了没多久就卡住了，原因是web页是利用cookie来保持登录信息，而小程序中并没有cookie这种东西。

一般的cookie都是浏览器生成放在Request Headers 中当做信息传给后端的，然后后端返回Set-Cookie给客户端浏览器设定之前拿到的cookie,使浏览器在cookie失效之前都拥有登陆者的信息。前端发送的cookie就像一张身份z，只要是携带了这个cookie的请求都会被认为是同一个请求源。

但是小程序中的登录请求并没有向后端发送cookie。

下图是正常浏览器端的登录请求

这是小程序中的

同一个接口cookie的差异就导致了小程序中无法使用cookie来保持登录信息。

不过好在登录请求不管前端是否发送cookie，后端都会有一个sessionId计算器(存在于使用cookie免登录的项目)，请求的Response Headers中肯定会有一个Set-Cookie信息，通过response.header['Set-Cookie']拿到Set-Cookie的整条信息后，自然就可以得到其中的SESSION了。

然后通过自带的setStorage方法存储在本地，之后想要看登录之后的各种页面只要在请求的头中加入Cookie(和web端请求登录参数名一致)参数即可。

wx.setStorage({

      key: "sessionId",

      data: sessionId

})

wx.getStorage({

      key: 'sessionId',

      success: function (response) {

            wx.request({

                  url: '请求url',

                  method: 'GET',

                  data: {

                  },

                  header: {

                        'content-type': 'application/json',

                        'Cookie': response.data

                  },

                  success: function (res) {

                  }

            })

      }

})

每个接口都要多传一个参数，麻烦是麻烦了一点，不过算是马马虎虎地解决了问题，之后应该还会遇到很多问题，只能边学边做了。

百度小程序要想开启web化，小程序需要和熊掌号绑定在同一个账号ID下，然后熊掌号要开启seo功能。具体 *** 作如下：

配置自然搜索前请完成以下 *** 作，否则自然搜索无法生效

配置自然搜索能力，可使小程序相关内容在百度的搜索结果中展示并获取相关流量

1、完成小程序上线

请确认已在开发工具中打开Web化开关后，重新提包并发布小程序。

前往发布

2、绑定熊掌ID

绑定熊掌ID后才可提交Sitemap从而被百度收录并获取流量。

---