WeChatアプレットチュートリアルへのHtml5携帯電話URLパッケージ

前書き：

WeChatユーザーの数は10億人を超え（中国の人々の80％以上がWeChatを使用しています）、WeChatアプレットもユーザーの間で人気があります。WebサイトにH5モバイル端末がある場合は、H5モバイルWebサイトをに直接パッケージ化できます。 WeChatアプレット。WeChat支払い機能を使用できないことを除いて、他の同様の共有機能は実際のアプレットと同じです。これにより、WeChatアプレットの開発にかかる時間とコストを節約できます。

チュートリアルの手順：

前提条件： H5 Webサイトのドメイン名はhttpsである必要があります。たとえば、 https： //m.18ka.net/は、httpではなくhttpsで始まります。

1. WeChatパブリックプラットフォームにログインし、小さなプログラムを登録し、自分でBaiduを知らない、AppID（小さなプログラムID）を取得します

2. WeChat開発者ツールでミニプログラムを作成し、以前に登録したミニプログラムのAppIDを入力します

3、app.json構成を変更します

app.jsonファイルを開き、ページアイテムに「pages / index / index」行のみを残します
ウィンドウアイテムのnavigationBarTitleTextにアプレットの名前を入力します

→→

4. /pages/index/index.wxmlファイルを開き、内部のすべてのコードを削除して、次のコード行を追加します

<web-view src="https://m.18ka.net"></web-view>

コード内のHttps://m.18ka.netは、H5Webサイトのドメイン名です。

5、テスト

1.次の図に示すように、[詳細]→[ローカル設定]→[有効なドメイン名を確認しない]にチェックマークを付けてテストします。

2.ミニプログラムが正式に開始された場合は、次の図に示すように、WeChatミニプログラム管理センターでビジネスドメイン名としてH5ドメイン名を追加する必要があります。

WeChatパブリックプラットフォーム→開発管理→開発設定→サーバードメイン名にログインします。

6つ目は、jsが現在のhtml5URLがWeChatアプレットで実行されているかどうかを判断することです。

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
        wx.miniProgram.getEnv((res)=>{
           if (res.miniprogram) {
               alert("在小程序里");
           } else {
               alert("不在小程序里");
           }
        })
    }else{
        alert('不在微信里');
    }
</script>