ホームページ >WeChat アプレット >ミニプログラム開発 >WeChat ミニプログラム開発におけるよくある質問の分析
WeChat ミニプログラム開発におけるよくある質問の分析
- 高洛峰オリジナル
- 2017-02-10 13:39:341785ブラウズ
WeChat ミニ プログラムの内部ベータ版がリリースされてから 10 日以上が経過しましたが、リリースされてから現在に至るまで、WeChat ミニ プログラムに関する議論はオンラインで非常に熱いです。さまざまな技術フォーラム、そしてもちろんさまざまなプラットフォームの見出しを占めています。結局のところ、テンセントは依然として中国で大きな影響力を持っています。 WeChatミニプログラムが初日に内部ベータ版をリリースし、公式の開発文書や開発ツールを公開しなかったことは誰もが知っていますが、これでは技術者の好奇心を止めることはできません。
私も小さなプログラムにとても興味があり、とても面白いことだと思うので、すぐに小さなデモを作りました。レベルは限られているので、それを行うプロセスは学習プロセスでもあり、改善プロセスでもあります。
この記事では主に、デモを書いているときに遭遇したいくつかの問題について書きます。この記事を読んでいただいた方の参考になればとても嬉しいです。
1: プロジェクト構造
WeChat アプレットのプロジェクト構造には、主に次の 4 つのファイル タイプがあります
WXML (WeiXin Markup Language) は、フレームワークによって設計されたタグ言語のセットであり、基本的なコンポーネントとイベント システムを組み合わせたものです。ページは構造的に構築できます。内部部分は主に、WeChat 自体によって定義されたコンポーネントのセットです。
WXSS (WeiXin Style Sheets) は、WXML コンポーネント スタイル、
js ロジック処理、ページ登録、ページ タイトル、タブバーなどのネットワーク リクエスト
json アプレット設定を記述するために使用されるスタイル言語です。
注: 開発者が構成項目を減らしやすくするために、ページを記述する 4 つのファイルは同じパスとファイル名を持つ必要があると規定されています。
ルートディレクトリにあるappという名前の4種類のファイルがプログラムエントリーファイルです。
app.json
このファイルが必要です。WeChat フレームワークはこれをミニ プログラム全体のグローバル構成として使用するため、このファイルがないとプロジェクトを実行できません。ページの登録、ネットワーク設定、ミニ プログラムのウィンドウの背景色、ナビゲーション バーのスタイルの構成、およびデフォルトのタイトルの構成が含まれます。
app.js
このファイルが必要です。そうでないとエラーが報告されます。ただし、このファイルを作成するだけで、今後はミニ プログラムのライフサイクル関数を監視および処理し、このファイルでグローバル変数を宣言できます。
グローバルに設定されたスタイル ファイル。プロジェクトには必要ありません。
WeChat アプレット プロジェクトを作成するときに AppID を選択しないでください。app.josn は、プログラムのページ登録、ウィンドウ設定、タブ設定、ネットワーク要求時間の設定に最も重要なファイルです。すべてここのファイルの下にあります。作成したプロジェクト ディレクトリに app.json ファイルが存在しない場合、次のエラーが報告されます。
上記のエラー メッセージには、数字 -4058 があることがわかります。これは、WeChat アプレットに最初にアクセスしたときに発生する最も一般的なエラーです。通常、その背後にファイルが存在しないことが原因です。このファイルが存在するかどうかを確認するには、パスを確認します。このエラーの原因は通常、プロジェクトを作成するために選択したディレクトリが間違っているか、存在しないページが app.json に登録されていることが考えられます。
もちろん、app.json ファイルのページに登録されているページが作成されていない、またはページを削除しても登録をキャンセルしていないという状況もあり、これも -4058 エラーの原因となります。
ページ登録エラー
このエラーはわかりやすいかもしれません、ページ登録エラーです。ページは、Page オブジェクトを通じてレンダリングされます。各ページに対応する js ファイルでページを作成する必要があります。最も簡単な方法は、ページ レンダリングのライフ サイクルをページ内で管理することです。データ処理とイベントはすべてここで完了します。このエラーの原因は通常、ページが作成されたばかりで、js ファイルが処理されていないか、忘れられていることが原因です。したがって、ページを作成するときは、まず js ファイルでページを作成する習慣を身に付ける必要があります。
ページ ルート エラー
文字通り、ページ ルーティング エラーを意味します。WeChat には 2 つのルーティング方法があります。1 つは、wxml ファイルを使用する方法です。
以下のコード:wxmlファイル:
jsファイルイベント処理関数:
bindtap:function(event){
wx.navigateTo({
url: "検索/検索"
})
}
このように書くとおめでとうございます。上記のエラーが表示されます。これは、ルートへの繰り返し呼び出しによって発生します。解決策は、ルートを削除し、
現在のページに * ハンドラーがありません。おそらく、現在のページにこのハンドラーが存在しないことを意味します。定義されているかどうかを確認し、ページ/メッセージ/メッセージでエラーが発生する可能性のある場所も指摘します。実はこの種の問題は、wxmlで定義する場合によく発生します。 いくつかの処理イベントが用意されていますが、イベント処理メソッドがjsファイルに実装されていない場合、このエラーが発生します。次に、プロンプトに従って、以下に示すようにイベント処理を js ファイルに追加すると、このエラー メッセージは表示されなくなります。
bindtap:function(event){
wx.navigateTo({
url: "search/search"
})
},tabBar の設定が表示されません tabBar が表示されない原因は数多くあります。このエラーを見つけるには、app.json ファイルに直接アクセスしてください。WeChat ミニ プログラムを学習する際によくある間違いです。は次のとおりです 登録ページは、
]
tabBarリストにpagePathフィールドが書き込まれていないか、pagePath内のページが登録されていません。
tabBarリストのpagePathで指定されたページが登録ページの最初に書き込まれていません。 WeChat アプレットのロジックでは、「pages」の最初のページがホームページになります。これは、tabBar リストの pagePath で指定されたページがページの最初のページではない場合、プログラムの開始後に表示される最初のページです。もちろんそうなります。TV tabBar はもうありません。
tabBar の数は 2 項目未満、または 5 項目以上である WeChat 公式は、tabBar には少なくとも 2 項目、最大 5 項目を含める必要があると明確に規定しています。より大きいか小さい場合、tabBar は表示されません。
ライフサイクルがわからない場合は、クリックして表示できます
Page({
data:{
// text:"这是一个页面"
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){ // 页面渲染完成
//NavigationBarTitle如果此处和json文件都设置，最后展示此处的标题栏wx.setNavigationBarTitle({
title: '音乐'})
},
onShow:function(){ // 页面显示
},
onHide:function(){ // 页面隐藏
},
onUnload:function(){ // 页面关闭
}
})
通过注释你应该明白了，设置标题写在了onReady方法中，也就是页面已经渲染完成了，在onReady之前显示的title就是json文件（覆盖关系，如果在子页面json文件设置title会覆盖app.json全局设置）中的title。可能你会说将wx.setNavigationBarTitle写在onLoad函数中，不过如果这样设置是不对的，因为onLoad执行过后才渲染页面，在渲染页面时title会从json文件中读取，导致onLoad设置的title会只在页面渲染之前展示，之后就显示json文件的tile，所以现在你应该明白ttle设置最优的地方就是给子文件写一个json文件，在文件中写入，如果想改变颜色直接在文件中添加就可以，该文件所写的属性值会覆盖app.json中设置的值。
{
"navigationBarTitleText": "音乐"
}wx.navigateTo无法打开页面
一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo
本地资源无法通过 css 获取
background-image：可以使用网络图片，或者 base64，或者使用标签
页面间数据传递
微信小程序路由（页面跳转）是通过API wx.navigateTo或者wxml中
<navigator url="/pages/dynamic/dynamic?title={{item.title}}&message={{item.message}}">
<view class="item" >
<view class="item-left">
<image src="{{item.url}}" class="image"/>
</view>
<view class="item-middle">
<view>
<text class="title">{{item.title}}</text>
</view>
<view>
<text class="message">{{item.message}}</text>
</view>
</view>
<view class="item_right">
<view><text class="time">{{item.time}}</text></view>
<view class="mark" wx:if="{{item.count>0}}"><text class="text">{{item.count}}</text></view>
</view>
</view>
<view class="line"></view>
</navigator>而数据接收是在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"})
},
})这样就实现了页面间数据传递功能。
更多微信小程序开发常见问题分析相关文章请关注PHP中文网！