????? H5 ???? ???? ??? ?????? ?? ???? WeChat ???H5 ???? ???? ??? ???????. ??? ???? ?????!

WeChat ?? ????: ?? ??? ????? ????? ???? WeChat ?? ??? ??????? ??? ? ?? ??? ???????. WeChat Browser ??;

H5 ???: ?? ?????? ???? ?? ? ?????????. ?????? ??? ??? ??? ????? WeChat ????? ??? ? ?? ??????? ???. ?? ? ??????.

??? WeChat ???? H5 ??? ??? ??? ? ??? ? ??? WeChat ????? ?? ???? ????? ??? ??? ??? ????? ???? ?? ?????.

H5 ???? ??? ??: ???? ?? H5 ???? URL? https://www.mysite.com/h5page?? ???? ??? ??? ??? ??? ???. www.mysite.com? ?????. ? URL? https?? ???. ????? SSL? ???? ?? ?? ?? ???? ?????. ????? ??? ???? ?? ??? ? ??? WeChat??? ?? ???? ????! )https://www.mysite.com/h5page，那么這里所說的域名就是www.mysite.com，另外你沒有看錯，這個URL必須是https，如果你還沒有為你的網(wǎng)站加上SSL，那么就先去申請一個證書吧（注意必須是公開申請的證書，不能是自簽名的，微信不認哦?。?/p>

好了，這些都準備好了，讓我們開始開發(fā)一個小例子。

由于web-view組件是一個全屏組件，不能和其它小程序組件合用，因此需要獨立占據(jù)一個頁面，所以我們到例子就是在小程序的A頁面加一個鏈接，跳轉(zhuǎn)到B頁面，然后在B頁面使用web-view組件來加載H5頁面。

A頁面

<view class="answerer flex-wrp" bindtap=&#39;jumpToH5&#39;>
        <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>十 關(guān)注</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"
  },

這時候當你滿懷希望的點擊鏈接時，會出現(xiàn)第一個坎：未綁定網(wǎng)頁開發(fā)者

這是什么鬼，原來使用web-view組件并不是啥人上來就允許使用的，這時候需要第一個授權(quán)，就是授權(quán)開發(fā)者使用該組件。這里比較扯淡的是雖然這個組件是小程序使用的，但并不能在小程序開發(fā)號里面設(shè)置，而必須在訂閱號或者服務(wù)號中進行設(shè)置，網(wǎng)絡(luò)上經(jīng)常能夠查到的下面這個截圖只能登錄訂閱號或者服務(wù)號才能看到。

在這里設(shè)置綁定了開發(fā)者的微信號以后，我們終于可以使用web-view組件了，不過這時候又出了新問題： 不支持打開非業(yè)務(wù)域名

原來并不是什么網(wǎng)址拿來就可以設(shè)置跳轉(zhuǎn)的，你的小程序中就不能直接跳轉(zhuǎn)到百度上去，小程序能夠跳轉(zhuǎn)的域名必須在業(yè)務(wù)域名中進行注冊，總算這次是在小程序開發(fā)號里面設(shè)置了，但注意在服務(wù)號的設(shè)置里也有業(yè)務(wù)域名這個設(shè)置，不要搞混了（話說微信起名也太沒有想象力了，簡直是一坨漿糊）。

設(shè)置好了這個業(yè)務(wù)域名，滿心歡喜地打開小程序，點擊鏈接，What！又來，這次的問題變成了：redirect_uri參數(shù)錯誤

這時候控制權(quán)已經(jīng)從小程序轉(zhuǎn)移到了H5頁面，但微信頁面跳轉(zhuǎn)內(nèi)部的機制比較復(fù)雜，涉及到了OAuth認證之類的，所以這個錯誤已經(jīng)是H5頁面報的了，這就需要到H5頁面關(guān)聯(lián)的服務(wù)號中去進行設(shè)置，這次設(shè)置的項目叫做網(wǎng)頁授權(quán)域名

?, ?? ???????. ??? ?? ??? ???????.

web-view ?? ??? ?? ?? ?? ???? ?? ?? ???? ?? ??? ?? ??? ? ???? ??? ???? ???? ??? ? ???? ???? ?? ??? ?????. ?? ????? A? ???? B ???? ??? ?? B ???? web-view ?? ??? ???? H5 ???? ?????.

A???

rrreeerrreee

B???rrreeerrreee
?? ??? ?? ??? ???? ? ?? ??? ?????: ???? ? ???
?? ?? ??? ?? ?? ??????. -view ????? ??? ??? ? ????. ?? ????? ?? ????? ??? ? ?? ??? ???? ? ?? ??? ?????. ??? ?????? ?? ? ????? ?? ?????? ????? ?? ???? ?? ????? ??? ? ?? ?? ?? ?? ??? ???? ???? ??? ????. code>, ????? ?? ? ? ?? ?? ????? <code>?? ?? ?? ??? ??? ?????? ? ? ????.

at ??? ???? WeChat ??? ???? ? ??? web-view ?? ??? ??? ? ??? ?? ??? ??? ?????. ??? ??? ??? ?? ?? ???? ????

???? ??? ?????? URL???. ?? ????? Baidu? ?? ??? ?? ????. ?? ????? ??? ? ?? ??? ??? ????? ???? ??? ??? ???? ??? ???. ?? ????? ?? ??? ???? ??? ??? ?? ??? ???? ??? ?? ??? ??? ???? ???. ?? ???? ???? ??? ????.) ????? ???? ??? ??? ??? ? ??? ?? ????? ?? ??? ???? ?! ???? ??? ??? ????:redirect_uri ???? ???????????? ???? ????? H5 ???? ?????? WeChat ??? ??? ?? ????? OAuth ?? ?? ???? ? ????? ? ??? ?? H5 ?? ???? ???????, H5 ???? ??? ??? ???? ???? ???. ??? ??? ??? ???? ?? ??? ?????. , ?? ??? ??? ?????. ?? ???????????? ????? ??? ??? ??? ???? ??? ???? ???? H5 ???? ? ? ????! ????????? WeChat ?? ???? ? ?? ?? ?? ?? ???? ???? ???????????????? ????: ?? ?? ? ?? ?????? JS ?? ?????? ???? ?? ???? ?????? ?? ?????. ????: ?? ??? ???? ?? ?????? ????? ?? ?? ??? ???? ????. ?? ??? ?? ?? ???? ?????. ?????? ??????: ?? ???? ?????? ?? ?? ?????. ?? ???? ???? ?? ??? ?? ? ?? ???? ???? ?? ??? ?? ????. ??????【?? ?? ??: ???? ???? ?? ??????】??

? ??? ????? H5 ???? ???? ??? ?? ??? ??? (????)? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!