微信小程序开发连接网站的方法

有些场景需要从微信小程序跳转到网站，通常网上的教程会告诉你使用web-view组件就可以了，但实际开发中还有很多需要注意的地方，尤其是很多概念往往会把初学者弄糊涂了，下面就让我们从概念开始吧！
开发微信小程序时，肯定会与我们个人的服务器打交道，这一般走的是 HTTP 通道，也就是访问我们的网页。

var app = getApp();var pageObj = {  onLoad : function(){    wx.request({      url : "http://www.cftea.com/rss/",      success : function (res){        wx.showToast({          title : "完成，内容长度为：" + res.data.length,          icon : "successs",          duration : 2000        });      }    });  }  };Page(pageObj);

注意 onLoad 的 L 是大写。

使用 wx.request 方法，可以看出，虽然是 JS 代码风格，但是并不是纯 JS 代码，因为 JS 代码并不支持访问第三方域的网页（权限问题）。

上面的代码，一句语句占太多行，如果看着烦，可以调整一下：

var app = getApp();var alertSuccess = function(s) {  wx.showToast({    title : s,    icon : "successs",    duration : 2000  });};var onRequestSuccess = function (res){  alertSuccess("完成，内容长度为：" + res.data.length);};var request = function (){  wx.request({    url : "http://www.cftea.com/rss/",    success : onRequestSuccess  });};var pageObj = {  onLoad : request};Page(pageObj);

如果返回的是 JSON，怎么处理？

如果返回的是 JSON，则会自动转换，即 res.data 并不是字符串，而是对象。我们可以用 res.data.属性，这样直接用。

    微信小程序：虽然开发方法类似网页，但实际上是一种只能运行在微信自己开发的浏览器中的特殊网页，它所能够使用的所有功能都必须由微信浏览器提供；
    H5页面：这是真正的网页应用，运行在通用浏览器中，各种浏览器虽然在细微上有所差别，但总的来说是一致的，微信浏览器同时也是一种通用浏览器，能够支持真正的网页应用。

因此我们才有可能在微信小程序和H5页面之间进行跳转，但这种跳转是受到微信浏览器的严格控制的，因此我们有必要了解这些控制包括哪些。

H5页面所在的域名：假设你需要调转的H5页面URL为https://www.mysite.com/h5page，那么这里所说的域名就是www.mysite.com，另外你没有看错，这个URL必须是https，如果你还没有为你的网站加上SSL，那么就先去申请一个证书吧（注意必须是公开申请的证书，不能是自签名的，微信不认哦！）

好了，这些都准备好了，让我们开始开发一个小例子。
由于web-view组件是一个全屏组件，不能和其它小程序组件合用，因此需要独立占据一个页面，所以我们到例子就是在小程序的A页面加一个链接，跳转到B页面，然后在B页面使用web-view组件来加载H5页面。
A页面
<view class="answerer flex-wrp" bindtap='jumpToH5'>
        <view class="avatar flex-item">
            <image src="/images/logo-small.jpg"></image>
        </view>
        <view class="answerer-info flex-item">
            <text class="answerer-name">文章标题</text>
            <text class="answerer-des">文章摘要</text>
        </view>
        <view class="follow flex-item">
            <text>十 关注</text>
        </view>
</view>
jumpToH5: function () {
    wx.navigateTo({
      url: '/pages/B'
    })
  },

B页面
<web-view src="{{link}}" bindmessage="getMessage"></web-view>
  data: {
    link: "https://www.mysite.com/h5page"
  },

这时候当你满怀希望的点击链接时，会出现第一个坎：未绑定网页开发者
image.png

这是什么鬼，原来使用web-view组件并不是啥人上来就允许使用的，这时候需要第一个授权，就是授权开发者使用该组件。这里比较扯淡的是虽然这个组件是小程序使用的，但并不能在小程序开发号里面设置，而必须在订阅号或者服务号中进行设置，网络上经常能够查到的下面这个截图只能登录订阅号或者服务号才能看到。
开发者工具

在这里设置绑定了开发者的微信号以后，我们终于可以使用web-view组件了，不过这时候又出了新问题： 不支持打开非业务域名
不支持打开非业务域名

原来并不是什么网址拿来就可以设置跳转的，你的小程序中就不能直接跳转到百度上去，小程序能够跳转的域名必须在业务域名中进行注册，总算这次是在小程序开发号里面设置了，但注意在服务号的设置里也有业务域名这个设置，不要搞混了（话说微信起名也太没有想象力了，简直是一坨浆糊）。