WeChat ミニプログラム開発におけるよくある質問の分析

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

app.wxss

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

ミニ プログラムの基本的なファイル構造を理解したら、公式デモの学習を開始できます。調査中にわからないことがあれば、公式ドキュメントを参照してください。答えが見つからない場合や質問がある場合は、このブログにメッセージを残してお互いにコミュニケーションをとることができます。ここでは、発生する可能性が高い問題をいくつか紹介します。

2: よくある質問

rpx (レスポンシブピクセル)

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

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

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

40013 エラー

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

4058エラー

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: "検索/検索"
})
}
このように書くとおめでとうございます。上記のエラーが表示されます。これは、ルートへの繰り返し呼び出しによって発生します。解決策は、ルートを削除し、

Search

これも許可されていません

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

おそらく、現在のページにこのハンドラーが存在しないことを意味します。定義されているかどうかを確認し、ページ/メッセージ/メッセージでエラーが発生する可能性のある場所も指摘します。実はこの種の問題は、wxmlで定義する場合によく発生します。 いくつかの処理イベントが用意されていますが、イベント処理メソッドがjsファイルに実装されていない場合、このエラーが発生します。次に、プロンプトに従って、以下に示すようにイベント処理を js ファイルに追加すると、このエラー メッセージは表示されなくなります。

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

tabBar の設定が表示されません

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

登録ページは、

"pages":[ "pages/message/message"、"pages/contact/contact"、"pages など) app.json のページ フィールドにページを書き込みます。 /dynamic/dynamic", "pages/dynamic /music/music", "pages/index/index", "pages/logs/logs"

]

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

tabBarリストにpagePathフィールドが書き込まれていないか、pagePath内のページが登録されていません。
tabBarリストのpagePathで指定されたページが登録ページの最初に書き込まれていません。 WeChat アプレットのロジックでは、「pages」の最初のページがホームページになります。これは、tabBar リストの pagePath で指定されたページがページの最初のページではない場合、プログラムの開始後に表示される最初のページです。もちろんそうなります。TV tabBar はもうありません。
tabBar の数は 2 項目未満、または 5 項目以上である WeChat 公式は、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之前显示的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中文网！