小さなプログラムのアーキテクチャと構成

目次：

1 アプレットの 2 スレッド モデル

2 異なる構成ファイルの区別

3 グローバル構成ファイル app.json

4 ページ構成ファイル page.json

5 アプリインスタンスの登録操作

6 Page インスタンスの登録操作

それぞれ呼び方が違う

 ファイル内の project.config.json の構成を直接変更しないでください。エディターの右上隅にある詳細で変更する必要があります。プロジェクト全体で全員が特定の構成を統一する必要がある場合を除き、このファイルでのみ変更してください。(使用する公開ベース ライブラリの変更など)

注: 右上隅の詳細で基本ライブラリを変更すると、デフォルトで project.private.config.json ファイル (プライベート、ローカルの基本ライブラリ) に書き込まれ、複数人で開発した場合の問題が回避されます。

sitemap.json ファイルは、WeChat がアプレットを検索するときに、自分のアプレットを検索できるようにするかどうかを設定するためのものです。たとえば、許可を入力すると、それを検索できます。disallow は検索を許可しません。WeChat クローラーがアプレットに到達できません。アプレットの特定のページを検索できないように設定することもできます。

ページ、ウィンドウ、およびタブバーは、app.json グローバル構成ファイルで構成できます。これらの中で、pages は登録および表示されるページを構成し、window はトップ メニュー バーのスタイルを制御します. この中で backgroundTextStyle には dark と light の 2 つの値しかありません. この色を見たい場合は enablePullDownRefresh を true に設定する必要があります.グローバルまたは個々のページで、ページをプルダウンして更新できるようにします。tabbar は、下部のメニュー バーを構成するために使用されます。

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

別ページの構成 xxx.json ファイル

usingComponents は、カスタム コンポーネントの使用を設定するために使用されます。

navigationBarTitleText は、上部のグローバル メニュー バーの名前をオーバーライドして、ページに別のメニュー バー名を付けることができます。

enablePullDownRefresh がページ プルダウン リフレッシュを許可するかどうかに関係なく、通常、この属性をグローバルに設定するのではなく、すべてのページでプルダウン リフレッシュが必要なわけではないため、この属性を 1 つのページでのみ設定します。プルダウンの更新を監視する機能があり、ページのjsファイルでonPullDownRefreshを使用してプルダウンの更新イベントを監視します。

 onReachBottomDistance は、ページが下部から残りの距離まで引き下げられ、ページがトリガーされたときに、ファイルの onReachBottom イベントを構成するために使用されます。

 

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

通常、app.js ファイルは次のように記述する必要があります。

app.js https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

1. onLaunch は、アプレットの初期化が完了するとトリガーされ、グローバルに 1 回だけトリガーされます。ここでの使用法によって、ユーザーがどこからアプレットに入るかが決まります。小さなプログラムに入るには WeChat ドロップダウン、小さなプログラムに入るにはユーザー共有方法、または小さなプログラムに入るには検索のいずれかです。これらの入力方法にはすべてシーン値があります。

シーン値https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html

2.ライフサイクルの監視

次の図は、ブラウザーとは異なり、オブジェクト型のデータを格納できる同期方式 (ローカル データを格納する非同期方式もあります) を示しています。データを文字列型に変換して格納する必要があります。

// app.js
App({
  // 作用二: 共享数据
  // 数据不是响应式, 这里共享的数据通常是一些固定的数据
  globalData: {
    token: "",
    userInfo: {}
  },
  onLaunch(options) {
    // 0.从本地获取token/userInfo
    const token = wx.getStorageSync("token")
    const userInfo = wx.getStorageSync("userInfo")

    // 1.进行登录操作(判断逻辑)
    if (!token || !userInfo) {
      // 将登录成功的数据, 保存到storage
      console.log("登录操作");
      wx.setStorageSync("token", "kobetoken")
      wx.setStorageSync("userInfo", { nickname: "kobe", level: 100 })
    }

    // 2.将获取到数据保存到globalData中
    this.globalData.token = token
    this.globalData.userInfo = userInfo


    // 3.发送网络请求, 优先请求一些必要的数据
    // wx.request({ url: 'url'})
  },
  onShow(options) {
    // 作用一: 判断小程序的进入场景
    console.log("onShow:", options);
  },
  onHide() {
    console.log("onHide");
  }
})

// 页面中
// 1.初体验: favor
// 2.页面配置/下拉刷新/上拉加载: profile
// 3.在页面中, 使用app中的数据: order

3. アプリで直接いくつかの単純なデータを共有します ({共有データを保存するためのカスタム パラメータ名を持つ json オブジェクトを追加})。ただし、ここに保存された共有 (グローバル) パラメータは応答をトリガーしないため、通常は一部の固定パラメーターを格納するために使用されます。

 以下の図は、アプリでカスタマイズされたグローバル パラメーターを示しています ({})。

 次の図は、他のページでグローバル パラメータを使用する方法を示しています。

各ページに対応する xxx.js ファイル内のページ ({}) は、通常、次の 4 つのコンテンツを記述する必要があります。

Page(オブジェクト オブジェクト) | WeChat オープン ドキュメント (qq.com) https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

<!--pages/01_初体验/index.wxml-->
<view class="banner">
  <swiper circular autoplay indicator-dots="{
    
    {true}}">
    <block wx:for="{
    
    {banners}}" wx:key="acm">
      <swiper-item>
        <!-- image组件默认宽度和高度: 320x240 -->
        <image mode="widthFix" src="{
    
    {item.image}}"></image>
      </swiper-item>
    </block>
  </swiper>
</view>

<view class="counter">
  <view>当前计数: {
    
    { counter }}</view>
</view>

<view class="buttons">
  <button bindtap="onBtn1Click">按钮1</button>

  <block wx:for="{
    
    {btns}}" wx:key="*this">
    <button 
      class="btn" 
      style="background: {
    
    {item}};"
      bindtap="onBtnClick"
      data-color="{
    
    {item}}"
    >
      {
    
    { item }}
    </button>
  </block>
</view>


<view class="list">
  <block wx:for="{
    
    {30}}" wx:key="*this">
    <view>列表数据:{
    
    { item }}</view>
  </block>
</view>

// pages/01_初体验/index.js
Page({
  data: {
    banners: [],
    recommends: [],

    // 2.作用二: 定义本地固定的数据
    counter: 100,

    btns: ["red", "blue", "green", "orange"]
  },
  // 1.作用一: 发送网络请求, 请求数据
  onLoad() {
    console.log("onLoad");

    // 发送网络请求
    wx.request({
      url: "http://123.207.32.32:8000/home/multidata",
      success: (res) => {
        const data = res.data.data
        const banners = data.banner.list
        const recommends = data.recommend.list
        this.setData({ banners, recommends })
      }
    })
  },

  // 3.绑定wxml中产生事件后的回调函数
  onBtn1Click() {
    console.log("onBtn1Click");
  },
  onBtnClick(event) {
    console.log("btn click:", event.target.dataset.color);
  },

  // 4.绑定下拉刷新/达到底部/页面滚动
  onPullDownRefresh() {
    console.log("onPullDownRefresh");
  },
  //页面下滑到底端的时候触发的事件
  onReachBottom() {
    console.log("onReachBottom");
  },
  //页面滚动的时候触发的事件，这里可以获取滚动到的位置距离顶端的距离
  onPageScroll(event) {
    console.log("onPageScroll:", event);
  },

  // 生命周期函数: 
  onShow() {
    console.log("onShow");
  },
  onReady() {
    console.log("onReady");
  },
  onHide() {
    console.log("onHide");
  },
  onUnload() {
    console.log("onUnload");
  }
})