微信小程式：web-view開發實踐

阿新 • • 發佈：2019-01-08

使用該元件有個先決條件，就是得到小程式公眾平臺設定網頁的域名白名單，具體做法請自行登入檢視。

然後在小程式寫入如下測試頁：：
test.js：：

onLoad: function (options) {
    this.setData({
      url: 'https://你的域名/test.html?rnd=' + new Date().getTime()
    })
  }

test.wxml：：

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

test.html：：

<!DOCTYPE html>
<html 
 lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test web-view </title>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js" 
></script>
    <script>
      window.onload=function(){
        var xhr = new XMLHttpRequest();
        xhr.open("GET", '/getConfigData.htm?wxShareUrl=' + encodeURIComponent(location.href.toString()) + '&randomStr=' + new Date().getTime());
        xhr.send();
        xhr.onreadystatechange = function 
 () {
          if ((xhr.readyState == 4) && (xhr.status == 200)) {
            var data = JSON.parse(xhr.response);
            if (data.status) {
              var item = data.data;
              wx.config({
                debug: true, // 開啟除錯模式
                appId: item.appId, // 必填，公眾號的唯一標識
                timestamp: item.timestamp, // 必填，生成簽名的時間戳
                nonceStr: item.nonceStr, // 必填，生成簽名的隨機串
                signature: item.signature,// 必填，簽名，見附錄1
                jsApiList: item.jsApiList // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
              });
              var shareObj = item.shareObj;
              wx.ready(function () {
                console.log(window.__wxjs_environment === 'miniprogram') // true
                document.getElementById('div').innerHTML+=(window.__wxjs_environment).toString();
              });
            }
          }
        };
        // web-view下的頁面內
        //wx.ready(function() {
          //console.log(window.__wxjs_environment === 'miniprogram') // true
          //document.getElementById('div').innerHTML+=(window.__wxjs_environment).toString();            
        //})
      }
    </script>
  </head>
  <!--_-->
  <body id="app">
    <div id="div">
      小程式環境：：
    </div>
  </body>
</html>

然後將test.html上傳到指定的域名目錄下進行測試。測試結果如下：

真機除錯
使用wx.config配置測試：開發者工具和真機上的除錯

真機除錯
未使用wx.config配置測試：開發者工具和真機上的除錯

反覆比對測試發現，發現一定要使用通過config介面注入許可權驗證配置。也就是說要安裝使用weixin-js-sdk的步驟來使用的。如果僅僅單獨使用wx.ready是檢測不到小程式環境的。還有發現即使wx.config配置不成功也可以正常檢測，我在簽名錯誤的前提下仍然能檢測到環境標示。但是一定得有這個配置

然後，如果你是使用vue開發的專案，目前npm提供的weixin-js-sdk包版本是1.2.0，因此只能使用index.html全域性引入weixin-js-sdk檔案。

PS：今天我重新登入公眾平臺檢視，我記得之前設定的是二級域名的白名單的，今天竟然自動變成一級域名了。【百思不得其解…】

微信小程式：web-view開發實踐

使用該元件有個先決條件，就是得到小程式公眾平臺設定網頁的域名白名單，具體做法請自行登入檢視。然後在小程式寫入如下測試頁：： test.js：： onLoad: function (options) { this.setData({

微信小程式：web-view巢狀H5實現微信支付功能解決方案及填坑

最近一個多月加班比較嚴重，偶爾休息一天也是在補睡眠+陪家人，比較長時間沒有來進行總結記錄了。今天不加班，開始為這段時間做的東西進行下經驗總結。這段時間因為公司需要，接觸了一些.Net前後臺開發，慢慢了解了一些WCF、H5站點、WebService、Soap、Linq等，也

直擊根源：微信小程式中web-view再次重新整理後頁面需要退兩次

背景在上一章(直擊根源：vue專案微信小程式頁面跳轉web-view不重新整理)解決了vue在小程式回退不重新整理的問題之後，會引出了一個重新整理的頁面需要點選返回兩次才能返回上一個頁面問題描述在A頁面從B頁面帶了引數返回之後，A頁面會重新整理，直接導致了，A頁面返回上一個頁面需要點選兩次，其中點

微信小程式設定web-view的業務域名

微信小程式設定web-view的業務域名域名必備你的域名必須要備案過你的域名必須是https，而不能是http web-view 在小程式後臺新增業務域名,只解析業務域名中的url網頁地址的. 域名是需要ICP進行備案的. 用ftp上傳檔案驗證域名的所有

微信小程式通過web-view跳轉到小程式頁面

一、背景博主這邊的小程式大部分都使用了web-view，眾所周知，使用web-view最大的問題就是和小程式之間進行互動的問題。我這邊主要是從web-view跳轉回小程式的demo。二、通過web-view跳轉到小程式頁面 1、微信官方

ios端微信小程式，web-view頁面白屏，安卓正常顯示

今天小程式上線，ios端小程式有的頁面白屏，後來查到的問題是web-view的src中攜帶的引數中含有中文，ios端是不允許連結中有中文的，所以只能給中文轉碼了，h5頁面提取引數的時候再解碼一下就可以了介紹一下javascript中，轉碼和解碼的兩種方法

微信小程式：雲開發·初探二

I’ll never finish falling in love with you. 自己編寫雲服務(後臺) 在目錄cloudfunctions上右鍵，新建node.js雲函式

微信小程式：開發框架選擇

接觸微信小程式有較長時間了，一直都是基於微信原生控制元件進行開發，最開始一些簡單的專案沒感覺到什麼不適，但隨著深入，慢慢的發現了一些不足，如記憶體及快取管理麻煩、控制元件選擇較少需要自定義、複雜動畫難控制、小程式和h5互動難度大、非同步回撥處理麻煩等，於是決定試試第三方開發框架

微信小程式：雲開發·初探

Good days give you happiness and bad days give you experience. 順境帶來快樂，逆境帶來成長。雲開發 quickstart 這是雲開發的快速啟動指引，其中演示瞭如何上手使用雲開發的三大基

微信小程式：雲開發·初探四(資料庫操作)

The course of true love never did run smooth. 真愛無坦途。新建集合 1.開啟雲開發控制檯，資料庫 2.新增集合users 新增程式碼

微信小程式：多個button/view元件行切換時改變樣式

微信小程式中多個button/view，點選後改變狀態或樣式，並拿到對應引數值。該類似需求情境適用：選擇購物車的尺寸或是型號（不可選、可單選）、選擇套餐（單選）、選擇分組（單選）等等按照需求佈局，根據陣列list迴圈，通過if語句條件渲染，展示對應樣式，

微信小程式：開發入門及案例詳解pdf

下載地址：網盤下載本書可分為3部分，第一部分作為基礎章節，介紹了第一個小程式的搭建流程，讓大家能快速上手；同時對小程式框架原理進行了詳細介紹，為後面學習元件、API打下基礎。第二部分對小程式元件、API進行介紹，對元件、API的使用、注意事項進行詳細講解，並給出示例程式碼。最後一部分精選5個由淺入深的案

微信小程式：支付系列合集（開發指南+精品Demo）

微信小程式：支付系列專輯（開發指南+精品Demo）

微信小程式聯盟出品微信小程式支付指南：http://www.jianshu.com/p/2b63c81ec7f5 微信小程式與php 實現微信支付 | 連結微信小程式---設計支付密碼的輸入框| 連結 e玩轉小程式支付之付款（統一下單）| 連結微信小程式支付詳

微信小程式：雲開發·初探三(檔案操作)

We are the champion. We’ll keep on fighting till the end. 雲開發·檔案上傳上傳檔案在小程式端可呼叫 wx.cloud.uploadFile 方法進行上傳： wx.cloud.upl

微信小程式（一）：微信小程式申請註冊與開發流程

本文主要用於介紹微信小程式開發過程中的注意點，查閱過程請結合微信的開發者文件一同觀看。本文基於微信小程式公測版，IDE：微信開發者工具 0.10.102800 本文件用於幫助公司內部初學者，如有感覺拖沓請見諒 AppID申請 A

微信小程序<web-view>嵌入網頁後，小程序如何和網頁交互傳值？

互傳 ios 網頁參數測試但是需要 https 問題：最近開發一個項目由於小程序某些組件的限制，然後想到嵌入網頁，但是遇到一個問題：網頁端調取數據的時候需要小程序傳遞多個參數值才能用，如何傳值呢？　　最初我想到是<web-view src="https:

微信小程式中 scroll-view觸底事件不觸發的解決方法

scroll-view元件是否設定了確定的高度，若沒有請設定 scroll-view元件的 lower-threshold 引數是否帶了單位，若帶了單位如 px、rpx等，請去除，只使用數值。若設定了上面兩項還是沒有效果，將 scroll-view的高度設定為具

微信小程式：map元件

其實前些天，吳哥就說讓我加上一個定位，我說我還沒看文件，還沒學，暫時沒加。今天上午終於開始接受map元件的挑戰，我不滴不說我真的是很懶，好吧，也有點會拒絕困難，但如果真的需要，我也可以去學習去解決，大概我的身邊缺少一個讓我有動力的吧，別問我

微信小程式：bindtap方法傳參

微信小程式：bindtap方法傳參 1、wxml <view bindtap="pay_again" data-name="{{orderList.jid}}" data-fee="{{orderList.act_fee}}" data-mobile="{{orderList.p_ph

微信小程式：web-view開發實踐

相關推薦