模倣性の高いQQのWeChatアプレットの詳細説明

この記事は主に、SmallAppForQQ プロジェクトの進行中に遭遇した問題のいくつかについて書きます。この記事があなたのお役に立てば幸いです。

SmallAppForQQ: QQ にアクセスするための WeChat アプレット

記事の冒頭で、プロジェクトの構造を簡単に紹介します。開発ツールがインストールされていない場合は、

github.com/xiehui999/ にアクセスできます。 SmallAppForQQ

をダウンロードしてください。 WeChat ミニ プログラム プロジェクト構造には、次の 4 つの主要なファイル タイプがあります -

1) WXML ファイル: (Weixin マークアップ言語) は、前任者に基づいて WeChat によって設計された記述的なタグ言語のセットであり、構築に使用されます。ミニプログラムビュー。

2) WXSS ファイル: (WeiXin スタイル シート) は、wxml でビュー コンポーネントのスタイルを記述するために使用されるスタイル言語です。

3) js ファイル: ビジネス ロジック処理、バックエンドとのデータ対話など。

4) json ファイル: ページ登録、ページタイトルなどのミニプログラム設定ファイル。

注: 開発者が構成項目を減らしやすくするために、ページを記述する 4 つのファイルは同じパスとファイル名を持つ必要があると規定されています。

app.json

ルート ディレクトリにあるこのファイルは、プログラム エントリ ファイルです。

このファイルがないと、WeChat フレームワークはこれを構成ファイルのエントリおよびミニ プログラム全体のグローバル構成として使用するため、プロジェクトを実行できません。ページ登録、ネットワーク設定、ミニプログラムのウィンドウ背景色などを含みます。

app.js

このファイルが必要です。そうでないとエラーが報告されます。ただし、このファイルを作成するだけで、今後はこのファイルでミニ プログラムのライフサイクル関数を監視および処理し、グローバル変数を宣言できます。

app.wxss

グローバルに設定されたスタイル ファイル。プロジェクトには必要ありません。

ミニ プログラムの基本的なファイル構造を理解したら、公式デモの学習を開始できます。調査中にわからないことがあれば、公式ドキュメントを参照してください。発生する可能性が高い問題は次のとおりです -

よくある質問 rpx (レスポンシブ ピクセル)

WeChat アプレットは、異なる解像度の画面に適応できるサイズ単位を新たに定義し、画面幅が 750 rpx であると規定しています。たとえば、iPhone6 では、画面幅が 375px で、合計 750 物理ピクセルがある場合、750rpx = 375px = 750 物理ピクセル、1rpx = 0.5px = 1 物理ピクセルとなります。

(rpx は WeChat で新たに定義されたサイズ単位ではありません。以前からモバイル開発で使用されていました。WeChat は多くのファミリーの長所を吸収し、前任者に基づいて小さなプログラム開発フレームワークを定義しました。Apple と同様、Apple Objective-CはAppStoreがオープンしたときにアプリ開発言語として使用されましたが、OCはAppleによって発明されたものではありません)

このプロジェクトではrpxサイズ単位を使用しましたが、そのプロセス中に非常に奇妙な問題に遭遇しました。隣り合う情報の間に直接分割線を入れますが、個別の分割線が無い場合は、下の図

のように表示されません。 1 行目と 2 行目には実際の線が直接存在しないことを確認してください。ただし、分割線の属性は同じであり、分割線は異なる携帯電話 (異なる解像度) では表示されないことが示されています。解像度によっては複数の分割が表示されない場合もあります。これがシミュレーターのバグなのか rpx のバグなのかはわかりません。最後に、分割線の高さサイズの単位をpxにすることで、この問題が解決されます。 (レイアウトには rpx を使用し、装飾スタイルには px を使用するとよいでしょう。実際には検証されていません。)

40013 エラー

WeChat アプレットが最初に登場したとき、AppID を入力してこの情報を要求すると、それは意味します。クラックされていませんが、公式ソフトウェア アップデートを選択できるようになりました。以下に示すように、AppID なしの開発を選択すると、No AppID を選択することでこのエラーを解決できます。公式の開発ツールをインストールすることをお勧めします。ダウンロードリンクはここにあります。

(現在は個人開発者もミニプログラムに申請でき、appId はもう希少ではないので、そのようなトラブルはありません)

-4058 エラー (app.json ファイルがありません)

WeChat ミニプログラムのプロジェクトを作成するときに、 AppID はありません。プロジェクトの作成時に表示されます。 app.json と app.josn は、プログラムの起動に最も重要なファイルです。プログラムのページ登録、ウィンドウ設定、タブ設定、ネットワーク要求時間の設定はすべてこのファイルの下にあります。作成したプロジェクト ディレクトリに app.json ファイルが存在しない場合、次のエラーが報告されます。

上記のエラー メッセージには、数字 -4058 があることがわかります。これは、WeChat アプレットに最初にアクセスしたときに発生する最も一般的なエラーです。通常、その背後にファイルが存在しないことが原因です。このファイルが存在するかどうかを確認するには、パスを確認します。このエラーの原因は通常、プロジェクトを作成するために選択したディレクトリが間違っているか、存在しないページが app.json に登録されていることが考えられます。

もちろん、app.json ファイルのページに登録されているページが作成されない、またはページを削除しても登録をキャンセルしないという状況もあり、これも -4058 エラーの原因となります。

ページ登録エラー

このエラーはわかりやすいかもしれません、ページ登録エラーです。ページは、Page オブジェクトを通じてレンダリングされます。各ページに対応する js ファイルでページを作成する必要があります。最も簡単な方法は、ページ レンダリングのライフ サイクルをページ内で管理することです。データ処理とイベントはすべてここで完了します。このエラーの原因は通常、ページが作成されたばかりで、js ファイルが処理されていないか、忘れられていることが原因です。したがって、ページを作成するときは、js ファイルで最初にページを作成する習慣を身につける必要があります。

ページ ルート エラー

これは文字通り、ページ ルーティング エラーを意味します。WeChat には 2 つのルーティング方法があります。1 つは wxml ファイル内のコンポーネントを使用する方法で、もう 1 つは wx.navigateTo を呼び出す方法です。

次のコード -

Search

js:

bindtap:function(e){
wx.navigateTo({
url:"search/search"})
}

このように書くと、上記のエラーが表示されます。これは、ルーティングを繰り返し呼び出すことによって発生します。ルートの削除、コンポーネントの削除、または wx.navigateTo の削除です。上記の考えられるルーティング エラーに加えて、次のコード

Search

に似た状況も発生します。これも許可されていません。これは、ナビゲーター コンポーネントをナビゲーター コンポーネント内にネストできないことを意味します。

現在のページに * ハンドラーがありません。

おそらく、現在のページにこのハンドラーがないことを意味するため、エラーが発生する可能性のある場所 (ページ/メッセージ) が定義されているかどうかも判断できます。実際、このような問題は私たちでもよく起こります。 一部の処理イベントは wxml で定義されていますが、イベント処理メソッドが js ファイルに実装されていない場合、このエラーが発生します。次に、プロンプトに従って、以下に示すようにイベント処理を js ファイルに追加すると、このエラー メッセージは表示されなくなります。

bindtap:function(e){
wx.navigateTo({
url:"search/search"})
},

tabBar 設定が表示されない

tabBar が表示されない原因は数多くあります。このエラーを見つけるには、app.json ファイルに直接アクセスしてください。WeChat ミニ プログラムを学習したばかりの場合に最もよくある間違いは次のとおりです。以下 - —

登録ページは、

"pages":["pages/message/message","pages/contact/contact","pages など、app.json の Pages フィールドにページを書き込むことです。 /dynamic/dynamic","pages/dynamic/music/music","pages/index/index","pages/logs/logs"]

1. 書き方が間違っているためTabBarが表示されません。大文字のBを書きます。小文字にすると、tabBar が表示されなくなります。

2. tabBar リストに pagePath フィールドが書き込まれていないか、pagePath 内のページが登録されていません。

3. tabBar リストの pagePath で指定されたページが登録ページに最初に書き込まれていません。 WeChat アプレットのロジックでは、「pages」の最初のページが最初のページになります。これは、tabBar リストの pagePath で指定されたページが、pages の最初のページではない場合に、プログラムの開始後に表示される最初のページです。 , もちろんTV tabBarはありません。

5. tabBar の数は 2 項目未満、または 5 項目以上であることは、tabBar には少なくとも 2 つの項目、最大 5 つの項目が必要であると明確に規定されています。より大きいか小さい場合、tabBar は表示されません。

navigationBarTitle 表示の問題

音楽をクリックして音楽インターフェイスに入ると、タイトルに最初に WeChatForQQ が表示され、次に音楽が表示されるこのエクスペリエンスは、絶対に受け入れられません。 jsファイル内のページのライフサイクルメソッドに設定されます。

ライフサイクルがわからない場合は、クリックして表示できます

Page({
data:{// text:"这是一个页面"},
onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数},
onReady:function(){// 页面渲染完成//NavigationBarTitle如果此处和json文件都设置，最后展示此处的标题栏wx.setNavigationBarTitle({
title:'音乐'})
},
onShow:function(){// 页面显示},
onHide:function(){// 页面隐藏},
onUnload:function(){// 页面关闭}
})

onReadyメソッドに設定タイトルが記述されている、つまりページがレンダリングされ、タイトルが表示されていることがコメントから理解できるはずですonReady の前は json ファイルです (関係がカバーされています。タイトルがサブページの json ファイルに設定されている場合、app.json グローバル設定のタイトルが上書きされます)。 onLoad関数にwx.setNavigationBarTitleを書いているのではないかと思われるかもしれませんが、onLoad実行後にページを描画する際にjsonファイルからタイトルを読み込んでしまい、onLoadで設定したタイトルになってしまうため、この設定は誤りです。ページのレンダリング前に表示され、その後、json ファイルのタイルが表示されます。したがって、ttle を設定する最適な場所は、サブファイルの json ファイルを作成し、そのファイルに書き込むことであることが理解できるはずです。色を変更したい場合は、ファイルに直接追加します。はい、このファイルに記述されたプロパティ値は、app.json で設定された値をオーバーライドします。

{
"navigationBarTitleText":"音乐"}

ウィンドウのタイトルは 3 つの場所に依存します:

1. app.json のアプリタイトル設定

2. ページと同じ名前の json ファイル内のタイトル設定

3. wx.setNavigationBarTitle インターフェースを通じて設定されます

If タイトルが静的で、2 によって設定されます。ウィンドウ自体が動的で、タイトルがスケール ID など、渡されたパラメーターに依存する場合は、1 の NavigationBarTitleText を空に設定してから、js で移動するのが最善です。空の設定はすべてのページに影響することに注意してください。

wx.navigateTo でページを開けません

アプリケーションは同時に 5 ページしか開くことができません。5 ページを開くと、wx.navigateTo は通常どおり新しいページを開くことができなくなります。マルチレベルの対話を避けるか、wx.redirectTo を使用してください。

もっと簡単に言うと、wx.redirectToを使用して、PC Webサイトの先史時代のシングルページWebサイトのような、小さなプログラムのシングルページアプリケーション、シングルページアプリケーションを開発することをお勧めします。

wx.navigateTo5 ページの開封制限について、それを解決するツールや解決策はありますか?

navigateTo は 5 レベルに制限されており、実際にはページ スタック内の要素が 5 つを超えてはいけないと規定されています。ページ スタック内の要素の数が 5 に達すると、それ以上要素を追加できなくなります。ミニ プログラム ページ スタックの詳細については、次の記事を参照してください:

www.ifanr.com/minapp/744601

この記事では解決策は提供されません。コーダーは理論的な解決策をここに示します:

1、すべてのジャンプに redirectTo を使用し、js でのみ使用します。 wxmlで使用する場合は、先にイベントをバインドしてイベント

関数内で使用するという使い方もあります。

2，自已实现一个页面栈，每次跳转之前，先推进这个自定义的页面栈。

3，不使用wx.navigateBack，从自定义页面栈中取出一个页面，redirectTo

这样就实现了无级跳转。小程序官方的机制，适用于简单的、层级不多的场景。使用如上自定义栈，好处还有减少内存占用，因为永远都是redirectTo。

本地资源无法通过 css 获取

background-image：可以使用网络图片，或者 base64，或者使用标签。

页面间数据传递

微信小程序路由（页面跳转）是通过API wx.navigateTo或者wxml中组件实现的，不管哪种实现都会有一个重要的参数就是url，它指定了要跳转的页面，并且页面之间数据传递也是通过url来实现的，这个数据传递有点类似于我们使用的get网络请求，把参数都拼接在要跳转界面地址的后面并以“？”连接。然后将要传入的数据以键和值的形式追加在"?"后面，多个参数直接用"&"符合。如我们点击消息聊天记录，将列表上的数据传到下一个页面，可以这样写。

{{item.title}}
{{item.message}}
{{item.time}}
0}}">{{item.count}}

而数据接收是在js文件的page里接收的，page生命周期有一个onLoad函数，它就是做一些初始化数据的工作，onLoad函数有一个参数options，我们就可以通过key将数据获取，如下

Page({
data:{// text:"这是一个页面"isHiddenToast:true
}
onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数console.log(options.title)console.log(options.message)
},
onReady:function(){// 页面渲染完成},
onShow:function(){// 页面显示},
onHide:function(){// 页面隐藏},
onUnload:function(){// 页面关闭},
bindtap:function(event){
wx.navigateTo({
url:"/pages/message/search/search"})
},
})

这样就实现了页面间数据传递功能。

另外，听说支付宝也开始搞小程序了，连IDE都很像微信小程序开发工具：

文档页：

从“小程序”这个名字来看，因为“程序”是通用名词，而“小”本身没有独特性，所以任何公司申请“小程序”商标估计都难以获得商标管理局的通过，这也就意味着任何公司都可以做自己的“小程序”平台。

以上が模倣性の高いQQのWeChatアプレットの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。