Webアプリケーションは、詳細なマイクロチャネルアプレットのWebビューに移行します

アプレットがますます普及しているが、同社の多くのプロジェクトは書き込みWebページに使用され、文法が古いプロジェクトは、小さなプログラムのコスト高に移行するように、ネイティブのWebページと互換性がありませんアプレット、
小さなプログラムの前のWebView機能を開いて、それを言うことができますWebアプリケーションのための素晴らしい恩恵ですが、いくつかのマイクロチャネルのWebViewピットがあり、この記事では、私は私が見つけた解決策の一部としてだけでなく、開発の過程で発生した問題のどのようないくつかのリストにあります。

問題が発生しました

1. OpenIDでのログインの問題
2. ダイナミックSRCのWebView
3. 決済機能
4. 共有
5. 特定のページにジャンプするには通常の2次元コードスキャン
6. 不足の戻るボタン

OpenIDでのログインの問題

長い間、あなたが特定のサイトを表示するようにSRCを設定することができます限り、使用することは非常にシンプルなマイクロチャネルのWebView。

<!-- wxml -->
<!-- 指向微信公众平台首页的web-view -->
<web-view src="https://mp.weixin.qq.com/"></web-view>

Webページの多くは、サイトのログイン機能を実装するために使用されているマイクロチャネル環境限り、ログイン情報、またはその他の情報などだけで結構でOpenIDのスプライシングされたsrcと。
問題があり、一般の公衆システムの口座番号が一意性を判断するためのOpenIDされ、アプレットはなく、OpenIDのOpenIDのと、公共のプログラムの数が少ないような生が同じではありませんが、あなたは元に必要な、OpenIDを取得することができますOpenIDのアカウントシステムのアップグレードはunionidアカウントシステムです。

以下はunionidのマイクロ流路の説明であります

ユーザーに関する情報を取得する（UnionIDメカニズム）

フォロワーの数後とフォロワーの公開数のOpenID（マイクロ信号が暗号化され、各ユーザは異なる公開番号の各パブリックOpenIDの番号に固有の、同一のOpenIDを異なるユーザに利用可能なパブリックメッセージ交換を、生成します）。いいえ国民は、このインタフェースを介して取得することはできませんによるとニックネーム、アバター、性別、都市、言語や注意時間を含む基本的なユーザー情報を、OpenIDの。
してくださいは、なお開発者が前に、国民を結合した後、オープンプラットフォーム（open.weixin.qq.com）番号を微信に行く公共の数字でより多くの需要、または公衆番号、モバイルアプリケーション、必要性の間で統一されたユーザーアカウントを持っている場合これらのニーズを満たすためにUnionIDメカニズムを使用しています。

UnionIDメカニズムの説明：

開発者は、OpenIDを経由してユーザに関する情報を入手することができます。特に注目すべきなのは、開発者は、複数のモバイルアプリケーション、Webアプリケーション、および公共のアカウントを持っている場合、長い同じ微信オープンプラットフォームが下を占めるほどのモバイルアプリケーションので、基本的なユーザー情報unionidを取得することにより、独自のユーザーを区別することができるということです、Webアプリケーションや公共のアカウントは、ユーザーのunionidはユニークです。換言すれば、同一のユーザ、マイクロチャネルオープンプラットフォームで異なるアプリケーションのために同じ、unionid同じ。

上記の手順を完了し、ユーザーに関する情報を取得するために、アプレットAPI wx.getUserInfo（）を呼び出すことができ、この手順は、背景情報の復号処理を必要とし、これはそれらを繰り返すことはしません、と組み合わせアプレットAPIドキュメントはうまく動作します。

unioidを得た後、unionid情報はSRCにスプライスすることができます（ページはhoplinks道をログインできることを提供し、OpenIDののフォームの公開ページの同様の番号）ログインページを運営しています。

ダイナミックSRCのWebView

WebViewのマイクロチャネルは、変更がそれをページジャンプsrcを変更することではないことによって実現されるように、問題を作成し、SRCダイナミックに、耳を傾けることはありません孔を有しています。
私は解決策を見つけるために、いくつかの方法を試した後：

マイクロ手紙のWebViewロードページがWebViewの後にロードされたとき、私たちはダイナミックSRCの問題を達成するために、この機能を使用することができます。

1. すべてのセットの最初の「は、第1 SRCであることを、時間のSRCを変更するには、グローバル変数にリンク情報にジャンプするには？「リンクは、グローバル関数に、二つの部分とパラメータに分割し、オンロードを呼び出すのWebViewをリフレッシュ達成することができます。
2. ときにジャンプページ、我々はグローバル関数に情報をリンクする必要がありますので、我々はまた、SRCの動的更新を必要とする、ページがジャンプしたときに、onShow関数が呼び出され、この時間は、オンロードたら、それを呼び出すように。

data: {
    url: '',
    loaded: false
}
// 小程序js里的onLoad函数可以写成这样
onLoad: function () {
    this.setData({
      url: getApp().globalData.urlToken + '?' +  getApp().globalData.urlData
    })
},
changUrl: function () {
    getApp().globalData.urlToken = 'https://www.example.com'
    getApp().globalData.urlToken = 'a=1&b=2'
    // 直接调用onLoad，就会实现src的刷新
    this.onLoad()
},
onShow: function () {
    if (!this.data.loaded) {
      // 第一次不运行
      this.setData({
        loaded: true
      })
      return
    }
    // 直接调用onLoad，就会实现src的刷新
    this.onLoad()
  }

// wxml可以写成这样
<web-view src="{{url}}"></web-view>

決済機能

小さなプログラムjssdk機能によって達成することができますが、関数が小さい直接支払プログラムと呼ばれることができないのWebView、我々は戦略を変更する必要があり、この時間：

1. 中ページの導入マイクロ文字のjssdk
2. 必要性が順序に関するいくつかの情報を持っているときに、ページ場所を支払い、コール・インタフェース・ジャンプページ、支払いページのアプレットにコントロールアプレットジャンプ（これは別のアプレットで記述する必要があります）、ジャンプで開始する必要がありますリンク、バックグラウンドで返される注文情報、特定の支払文書を参照して、マイクロチャネルの決済システムに、単一インターフェイスの下で統一する必要性にスプライシングされました。
3. 小さなプログラムの支払いページにジャンプした後、ページのプログラムは、特定のページへの動的SRCあらかじめ設定され、制御WebViewのジャンプで、WebViewのページへのジャンプバックが完了した後、小さな支払いによって開始します。

// 网页引入jssdk

// 网页发起支付
wx.miniProgram.navigateTo({
    // payData由后台返回，主要是需要统一下单平台的prepay_id
    url: '../pay/index?data=' + encodeURIComponent(JSON.stringify(payData))
})
// 微信支付页面
onLoad: function (option) {
    let page = this
    try {
      let data = JSON.parse(option.data)
      if (!data || !data.prepay_id) {
        console.error('支付参数错误，请稍后重试', data)
      }
      wx.requestPayment({
        timeStamp: '' + data.timestamp,
        nonceStr: data.nonceStr,
        package: 'prepay_id=' + data.prepay_id,
        paySign: data.paySign,
        signType: data.signType,
        success: function (res) {
          getApp().globalData.urlToken = `paySuccess.html`
          // 支付成功
          getApp().globalData.urlData = 'data=paySuccessData'
          wx.navigateTo({
            url: '/page/home/index',
          })
        },
        fail: function (res) {
          getApp().globalData.urlToken = `payError.html`
          // 支付失败
          getApp().globalData.urlData = 'data=payErrorData'
          wx.navigateTo({
            url: '/page/home/index',
          })
        },
        complete: function (res) {
        }
      })
    } catch (e) {
      console.error('支付错误', e)
    }
  }

共有

ページ・パラメータを追加する必要がある場合は、その後、我々は少し長くに対処する必要があり、直接プログラムのWebViewのページ小さなシェア。

1. WebViewの中では、共有を開始し、あなたがwx.miniProgram.postMessageインタフェースを使用する必要が直接アプレットにプッシュされ、共有情報、する必要はありません。アプレットにプッシュ情報は、リアルタイム処理ではなく、ユーザーの後に共有ボタンをクリックします彼は共有情報アプレットにwx.miniProgram.postMessageプッシュを起動すると、各再入国のためのページを共有する必要性を必要とする、読むために戻ってアプレット。
2. アプレットページがポストの情報を結合機能bindmessageで読み取り、情報の共有がリストになり、私たちは、共有したいonShareAppMessageコール内のデータを保持するために、次のステップを、情報の共有化との契約を最終的に取ります。
3. ユーザーが共有をクリックすると、それは良い十分な内部を、対応する共有情報を設定し、onShareAppMessage機能をトリガします。
4. ページがロードされたときのonload関数はオプションパラメータを持っている、あなたは、変換中のオプションから情報を読み取るためのリンクを実現するために、元のonload関数に、この時間をインナーチューブURLパラメータを読み取ることができます。

// 网页wx.miniProgram.postMessage
wx.miniProgram.postMessage({
  data: {
    link: shareInfo.link,
    title: shareInfo.title,
    imgUrl: shareInfo.imgUrl,
    desc: shareInfo.desc
  }
})
// 小程序index wxml设置
<web-view src="{{url}}" bindmessage="bindGetMsg"></web-view>
// 小程序index js
bindGetMsg: function (e) {
    if (!e.detail) {
      return
    }
    let list = e.detail.data
    if (!list || list.length === 0) {
      return
    }
    let info = list[list.length - 1]
    if (!info.link) {
      console.error('分享信息错误', list)
      return
    }
    let tokens = info.link.split('?')
    this.setData({
      shareInfo: {
        title: info.title,
        imageUrl: info.imgUrl,
        path: `/page/index/index?urlData=${encodeURIComponent(tokens[1])}&urlToken=${tokens[0]}`
      }
    })
},
onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    let that = this
    return {
      title: that.data.shareInfo.title,
      path: that.data.shareInfo.path,
      imageUrl: that.data.shareInfo.imageUrl,
      success: function (res) {
        // 转发成功
      },
      fail: function (res) {
        // 转发失败
      }
    }
},
onLoad: function (option) {
    if (option.urlToken) {
      getApp().globalData.urlToken = option.urlToken
    }
    if (option.urlData) {
      getApp().globalData.urlData = option.urlData
    }
    this.setData({
      url: getApp().globalData.urlToken + '?' +  getApp().globalData.urlData
    })
},

特定のページにジャンプするには通常の2次元コードスキャン

共有に加えて、アプレットはまた、設定、特定のページにジャンプする通常の2次元コードスキャン機能を実装することができます。

以下、この機能マイクロチャネルの説明であります

小さなプログラムをより簡単にアプレット開発者を容易に促進するために、二次元コードの下の既存のラインと互換性が、通常のリンクをスキャンマイクロチャネル公共プラットフォームオープン二次元コードは、アプレット能力をジャンプします。
特徴
共通リンク2次元コードを、コード化した後に生成されたWebリンク2次元コードのための開発ツールを参照してください。
商人は、アプレットに配置されたバックグラウンドの完了後に、アプレットは、機能アプレットを使用して、二次元コードをスキャンするとき、通常のユーザリンクを開くために、線二次元コードの下の行を交換する必要があるかもしれません。
通常の2次元コードのこれらへのリンクは、現在のマイクロチャネル走り幅跳びアプレットにより、マイクロチャネルまたは2次元コード認識「スイープ」をサポートしています。

二次元コードのルール
ジャンプ2次元コードの規則に従って、開発者はルールがアプレットをジャンプする必要がある2次元コードを記入する必要があります。次のような要件は以下のとおりです。

1. ドメインルールは、ICPレコードの検証により、2次元コードでなければなりません。
2. サポートHTTP、HTTPS、FTPなどのリンク（の始まり：http://wx.qq.com、HTTPS：//wx.qq.com/mp/、https://wx.qq.com/mp?id=123）。
3. 小さなプログラムは、10以上の二次元コードプレフィックス規則を考慮するように構成されてもよいです。

プレフィックス職業規則

開発者は、二次元コードのマッチングルールに沿った全てのサブルールを取るかどうかを選択することができます。選択は、他のサブアカウントを申請することはできません、他のルールのプレフィックス一致の規則を満たして、占領しました。

例えば：もし開発者Aの二次元コードの構成規則：https://wx.qq.com/mp?id=123、サブプレフィックスマッチルールを満たすために、他の開発者が設定されません「すべてのサブルールを占める」を選択https://wx.qq.com/mp?id=1234。

私は道のお勧め
のWebViewの実装を

1. セットスキップ機能アプレットの背景に設定することができますが、リンクは、次の4つの部分、道路に分かれてHTTPS：//www.example.com/wxmin ...。

   https://www.example.com	ドメイン名
   / Wxmini /	アプレットフロントルール、フォルダライン内のファイルを、サーバー上のファイルフォルダを構築し、検証する必要性
   home.html	Webページがジャンプする必要があり
   A = 1	パラメータのジャンプページ

2. さらなる処理のためのonload関数、通常の2次元コードジャンプ。

// 对index onLoad在进行处理
onLoad: function (option) {
    this.resetOption(option)
    if (option.urlToken) {
      getApp().globalData.urlToken = option.urlToken
    }
    if (option.urlData) {
      getApp().globalData.urlData = option.urlData
    }
    this.setData({
      url: getApp().globalData.urlToken + '?' +  getApp().globalData.urlData
    })
},
resetOption: function (option) {
    if (!option) {
      return
    }
    if (option.q) {
      option.q = decodeURIComponent(option.q)
      if (option.q.indexOf('https://www.example.com/wxmini/') == -1) {
        return
      }
      let tmp = option.q.replace('/wxmini', '')
      let tmps = tmp.split('?')
      option.urlToken = tmps[0]
      option.urlData = tmps[1]
    } else {
      option.urlData = decodeURIComponent(option.urlData)
    }
}

不足の戻るボタン

Webページが最初のページがある場合は、問題今回、戻るボタンがあるだろう、何のアプレットが存在しない、WebViewのはただのWebViewページ1以上ジャンプページなどの前に、この時間をバックボタンマイクロ文字を使用することはできません（最初のページには、取得ユーザー権限ページに設定することができますが、私はこの経験が良くないと感じ、すべてのページは、彼らが使用する前にユーザーに許可を取得する必要がありません）

最終ページの階層

"pages": [
    "page/index/index", // 首页，处理onload里的option内容，为了返回按钮设置的
    "page/home/index", // webview所在的页面
    "page/auth/index", // 获取用户权限的页面
    "page/pay/index", // 支付页面
    "page/error/index" // 错误信息页面
  ],

参考リンク

1. WebViewドキュメント
2. アプレットunionidはじめに
3. unionid取得モード