記事ディレクトリ

その他の関連記事
1. 小さなプログラムフレームワーク

1. 小さなプログラムフレームワーク

1.1、グローバル構成

1.1.1、ページ

意義：

アプレットがどのページから構成されているかを指定するために使用され、各項目はページのパス (ファイル名を含む) 情報に対応します。ファイル名にファイルサフィックスを記述する必要はありません。フレームワークは、対応する場所にある .json、.js、.wxml、および .wxss の 4 つのファイルを自動的に見つけて処理します。
アプレットでページを追加/削除するには、ページ配列を変更する必要があります。

開発ディレクトリ:
ここに画像の説明を挿入

1.1.1.1、entryPagePath

アプレットのデフォルトの起動パス (ホームページ) を指定します. 一般的なシナリオは、WeChat チャット一覧ページからのドロップダウン起動、アプレット一覧の起動などです. 空白のままにすると、デフォルトでページリストの最初の項目になります。ページパスを含むパラメータはサポートされていません。

entryPagePath が指定されていない場合、配列の最初の項目はアプレットの最初のページ (ホームページ) を表します。
entryPagePath を指定すると、指定したアプレットのデフォルトの起動パス (ホームページ) になります。

構成は次のとおりです。

{
    
    
  "entryPagePath": "pages/index/index"
}

1.1.1.2. ページの生成方法

最初の方法

最初にフォルダーを作成し、それが info でページが info であると仮定すると、作成プロセスは次のようになります。

ここに画像の説明を挿入

app.json を開き、以下を追加します

ここに画像の説明を挿入

 "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/info/info"
  ],

2 番目の方法:

ディレクトリを app.json に直接追加すると、自分で作成できます

ここに画像の説明を挿入

保存後
ここに画像の説明を挿入

要約: 2 番目の方法の方が優れていることがわかります。これは、手順がはるかに少なく、怠ける可能性があるためです。

1.1.2、ウィンドウ

アプレットのステータスバー、ナビゲーションバー、タイトル、およびウィンドウの背景色を設定するために使用されます。

属性	タイプ	デフォルト	説明
ナビゲーションバー背景色	HexColor	#000000	#000000 などのナビゲーションバーの背景色
ナビゲーションバーテキストスタイル	ストリング	白い	ナビゲーションバーのタイトルの色、黒/白のみをサポート
ナビゲーションバーのタイトルテキスト	ストリング		ナビゲーションバーのタイトルテキストの内容
背景色	HexColor	#ffffff	ウィンドウの背景色
backgroundTextStyle	ストリング	暗い	ドロップダウンローディングスタイル、ダーク/ライトのみをサポート
enablePullDownRefresh	ブール値	間違い	グローバルプルツーリフレッシュを有効にするかどうか。詳細については、 Page.onPullDownRefreshを参照してください。
onReachBottomDistance	番号	50	ページ下部イベントがトリガーされたときのページ下部からの距離 (px)。詳細については、 Page.onReachBottomを参照してください。
ページの向き	ストリング	肖像画	画面の回転設定、詳細については、自動 / 縦向き / 横向きをサポートします。表示領域の変更への対応を
restart頭脳系	ストリング	ホームページ	ポリシー構成を再開する
initialRenderingCache	ストリング		ページの初期レンダリングキャッシュ構成、静的/動的のサポート
visualEffectInBackground	ストリング	なし	システムの背景に入るときは、ユーザーのプライバシーを保護するためにページコンテンツを非表示にします。非表示/なしをサポート
handleWebviewPreload	ストリング	静的	次のページをプリロードするタイミングを制御します

. 静的/手動/自動をサポート |

app.json ファイルでウィンドウプロパティの構成を変更する

"window": {
    
    
  "navigationBarBackgroundColor": "#000000",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "新闻管理系统",
  "backgroundColor": "#000000",
  "backgroundTextStyle": "light",
  "enablePullDownRefresh":true,
  "onReachBottomDistance":60
},

結果の表示:
ここに画像の説明を挿入

1.1.3、タブバーとプロパティ

アプレットがマルチタブアプリケーション (ページを切り替えるためのクライアントウィンドウの下部または上部にタブバーがある) の場合、タブバーのパフォーマンスと、タブが切り替えられたときに表示される対応するページを、 tabBar 構成アイテム。

属性	タイプ	必須	デフォルト	説明
色	HexColor	はい		タブのテキストのデフォルトの色。16 進数の色のみがサポートされています
選択した色	HexColor	はい		タブが選択されているときのタブ上のテキストの色。16 進数の色のみがサポートされています
背景色	HexColor	はい		タブの背景色。16 進数の色のみがサポートされています
ボーダースタイル	ストリング	番号	黒	タブバーのボーダーの色、黒/白のみ対応
リスト	配列	はい		タブのリスト。詳細については list 属性の説明を参照してください。少なくとも 2 つ、最大で 5 つのタブ
位置	ストリング	番号	下	tabBar の位置は、下/上のみをサポートします
習慣	ブール値	番号	間違い	tabBar のカスタマイズ、詳細を参照

このうち、list は配列を受け入れ、最小 2 個、最大 5 個のタブのみを構成できます。タブは配列の順序で並べ替えられ、各項目は次のプロパティ値を持つオブジェクトです。

属性	タイプ	必須	例証する
ページパス	ストリング	はい	ページで最初に定義する必要があるページパス
文章	ストリング	はい	タブのボタンテキスト
アイコンパス	ストリング	番号	画像パス、アイコンサイズは 40 KB に制限されています。推奨サイズは 81px * 81px で、ネットワークイメージはサポートされていません。
ポジションがトップの場合、アイコンは表示されません。
selectedIconPath	ストリング	番号	選択時の画像パス。アイコンのサイズは 40kb に制限されています。推奨サイズは 81px * 81px で、ネットワーク画像はサポートされていません。
ポジションがトップの場合、アイコンは表示されません。

app.json 構成ファイルを変更し、tabBar プロパティ構成を追加します。

"tabBar": {
    
    
    "list": [{
    
    
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath":"./images/home.png",
      "selectedIconPath":"./images/home_select.png"
     }, {
    
    
      "pagePath": "pages/info/info",
      "text": "新闻",
      "iconPath": "./images/news.png",
      "selectedIconPath": "./images/news_select.png"
     }]
  }

結果の表示:
ここに画像の説明を挿入

1.1.4. その他の一般的な設定

1.1.4.1、サイトマップの場所

sitemap.json の場所を示します。デフォルトは「sitemap.json」で、app.json と同じディレクトリにある名前の sitemap.json ファイルです

1.1.4.2、スタイル

基本ライブラリ 2.8.0 のサポートが開始され、下位バージョンは互換性が必要です。
WeChat クライアント 7.0 から、UI インターフェイスが大幅に変更されました。ミニプログラムは、基本コンポーネントのスタイルもアップグレードしました。app.json で "style": "v2" を構成して、新しいバージョンのコンポーネントスタイルを有効にします。
この変更に関係するコンポーネントは、ボタンアイコンラジオチェックボックススイッチスライダーです。体験用にアプレットのサンプルに行くことができます。

1.1.4.3、ネットワークタイムアウト

さまざまなネットワークリクエストのタイムアウト期間 (ミリ秒)。

属性	タイプ	必須	デフォルト	例証する
リクエスト	番号	番号	60000	wx.request
ミリ秒単位のタイムアウト期間。
connectSocket	番号	番号	60000	wx.connectSocket
ミリ秒単位のタイムアウト期間。
ファイルをアップロードする	番号	番号	60000	wx.uploadFile
的超时时间，单位：毫秒。
downloadFile	number	否	60000	wx.downloadFile
的超时时间，单位：毫秒。

1.1.4.4、debug

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有 Page 的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题。

1.1.4.5、functionalPages

基础库 2.1.0 开始支持，低版本需做兼容处理。
插件所有者小程序需要设置这一项来启用插件功能页。

1.1.4.5、subpackages

微信客户端 6.6.0 ，基础库 1.7.3 及以上版本支持
启用分包加载时，声明项目分包结构。
写成 subPackages 也支持。

1.1.4.6、workers

基础库 1.9.90 开始支持，低版本需做兼容处理。
使用 Worker 处理多线程任务时，设置 Worker 代码放置的目录

1.1.4.7、requiredBackgroundModes

微信客户端 6.7.2 及以上版本支持
申明需要后台运行的能力，类型为数组。目前支持以下项目：

audio: 后台音乐播放
location: 后台定位

如：

{
    
    
  "pages": ["pages/index/index"],
  "requiredBackgroundModes": ["audio", "location"]
}

注：在此处申明了后台运行的接口，开发版和体验版上可以直接生效，正式版还需通过审核。

1.1.4.8、requiredPrivateInfos

自 2022 年 7 月 14 日后发布的小程序，使用以下8个地理位置相关接口时，需要声明该字段，否则将无法正常使用。2022 年 7 月 14 日前发布的小程序不受影响。
申明需要使用的地理位置相关接口，类型为数组。目前支持以下项目：

getFuzzyLocation: 获取模糊地理位置
getLocation: 获取精确地理位置
onLocationChange: 监听试试地理位置变化事件
startLocationUpdate: 接收位置消息（前台）
startLocationUpdateBackground: 接收位置消息（前后台）
chooseLocation: 打开地图选择位置
choosePoi: 打开 POI 列表选择位置
chooseAddress: 获取用户地址信息

如：

{
    
    
  "pages": ["pages/index/index"],
  "requiredPrivateInfos": [
    "getFuzzyLocation", 
    "getLocation",
    "onLocationChange",
    "startLocationUpdateBackground"
    "chooseAddress"
  ]
}

注：若使用以上接口，均需在小程序管理后台，「开发」-「开发管理」-「接口设置」中自助开通该接口权限。

1.1.4.9、debugOptions(真机可看)

小程序调试相关配置项

属性	类型	必填	默认值	描述
enableFPSPanel	boolean	否	false	是否开启 FPS 面板

FPS面板：

为了便于开发者调试渲染层的交互性能，小程序基础库提供了选项开启 FPS 面板，开发者可以实时查看渲染层帧率。

开启方式：

{
    
    
  "debugOptions": {
    
    
    "enableFPSPanel": "custom"
  }
}

1.1.4.10、permission

微信客户端 7.0.0 及以上版本支持
小程序接口权限相关设置。字段类型为 Object，结构为：

属性	类型	必填	默认值	描述
scope.userLocation	PermissionObject	否		位置相关权限声明

PermissionObject 结构

属性	类型	必填	默认值	说明
desc	string	是		小程序获取权限时展示的接口用途说明。最长 30 个字符

如：

{
    
    
  "pages": ["pages/index/index"],
  "permission": {
    
    
    "scope.userLocation": {
    
    
      "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
    }
  }
}

app.json 文件配置如下

{
    
    
  "entryPagePath": "pages/index/index",
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/info/info",
    "pages/about/about",
    "pages/test/test"
  ],
  "window": {
    
    
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "新闻管理系统",
    "backgroundColor": "#000000",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 60
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    
    
    "list": [{
    
    
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "./images/home.png",
      "selectedIconPath": "./images/home_select.png"
    }, {
    
    
      "pagePath": "pages/info/info",
      "text": "新闻",
      "iconPath": "./images/news.png",
      "selectedIconPath": "./images/news_select.png"
    }]
  },
  "networkTimeout": {
    
    
    "request": 20000,
    "connectSocket": 20000,
    "uploadFile": 20000,
    "downloadFile": 20000
  },
  "debug": true,
  "permission": {
    
    
    "scope.userLocation": {
    
    
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  "debugOptions": {
    
    
    "enableFPSPanel": true
  }
}

1.1.4.11、usingComponents

开发者工具 1.02.1810190 及以上版本支持
在 app.json 中声明的自定义组件视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明。建议仅在此声明几乎所有页面都会用到的自定义组件。
注1：全局自定义组件会视为被所有页面依赖，会在所有页面启动时进行初始化，影响启动性能且会占用主包大小。只被个别页面或分包引用的自定义组件应尽量在页面配置中声明。 注2：在全局声明使用率低的自定义组件会大幅影响按需注入的效果。

1.1.5、单页面配置(指定每个页面的标题等)

app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 XXX.json 文件来对本页面的表现进行配置。页面中配置项在当前页面会覆盖 app.json 中相同的配置项（样式相关的配置项属于 app.json 中的 window 属性，但这里不需要额外指定 window 字段）

文件内容为一个 JSON 对象，有以下属性：

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值：
default 默认样式
custom 自定义导航栏，只保留右上角胶囊按钮。
homeButton	boolean	false	在非首页、非页面栈最底层页面或非 tabbar 内页面中的导航栏展示 home 键
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持
enablePullDownRefresh	boolean	false	是否开启当前页面下拉刷新。
详见 Page.onPullDownRefresh
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为px。
详见 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋转设置，支持 auto / portrait / landscape
详见响应显示区域变化
disableScroll	boolean	false	设置为 true 则页面整体不能上下滚动。
只在页面配置中有效，无法在 app.json 中设置
usingComponents	Object	否	页面自定义组件
配置
initialRenderingCache	string		页面初始渲染缓存
配置，支持 static / dynamic
style	string	default	启用新版的组件样式
singlePage	Object	否	单页模式相关配置
restartStrategy	string	homePage	重新启动策略配置
handleWebviewPreload	string	static	控制预加载下个页面的时机
。支持 static / manual / auto
visualEffectInBackground	string	否	切入系统后台时，隐藏页面内容，保护用户隐私。支持 hidden / none，若对页面单独设置则会覆盖全局的配置，详见全局配置
enablePassiveEvent	Object或boolean	否	事件监听是否为 passive，若对页面单独设置则会覆盖全局的配置，详见全局配置
renderer	string	否	渲染后端

注：并不是所有 app.json 中的配置都可以在页面覆盖或单独指定，仅限于本文档包含的选项。

注：iOS/Android 客户端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效。

配置方式如下：

{
    
    
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

index.json文件中的配置如下：

{
    
    
  "usingComponents": {
    
    },
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

展示效果为：
ここに画像の説明を挿入

1.1.6、公共样式（全局改变）

在项目根目录的 app.wxss 文件为小程序公的共样式表，相当与CSS初始化文件配置
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式
WXSS 用来决定 WXML 的组件应该怎么显示
为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比，WXSS 扩展的特性有：
- 尺寸单位
- 样式导入

1.1.6.1、公共样式

在 app.wxss 文件中添加样式

text{
    
    
  color:red;
}

项目中所有的页面的 text 文本都会呈现红色

1.1.6.2、尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况
在news页面的wxml文件中增加下列代码

<view class="box"></view>

在 app.wxss 文件中，增加box盒子的样式

.box{
    
    
  width: 200rpx;
  height: 200rpx;
  background: red;
}

在iphone5上的效果，元素的宽高是85px
ここに画像の説明を挿入

在iphone6上的效果，元素的宽高是100px
ここに画像の説明を挿入

1.1.6.3、样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束
在项目根目录下创建common文件夹，并创建common.wxss文件，增加box的样式

.box{
    
    
  margin: 50px;
}

在app.wxss文件中引入common.wxss文件

@import "./common/common.wxss";

此时，刚刚所创建的box也加载了引入文件的样式。
ここに画像の説明を挿入

1.1.7、注册小程序

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

// app.js
App({
    
    
  onLaunch(options) {
    
    
    console.log("监听小程序初始化", options);
  },
  onShow(options) {
    
    
    console.log("监听小程序启动", options);
  },
  onHide() {
    
    
    console.log("监听小程序切后台");
  },
  onError(msg) {
    
    
    // 小程序发生脚本错误或 API 调用报错时触发
    console.log("错误监听函数", msg)
  },
  onPageNotFound(res) {
    
    
    console.log("页面不存在监听函数");
  },
  onThemeChange() {
    
    
    console.log("系统切换主题时触发");
  }
})

展示效果为：
ここに画像の説明を挿入

1.1.8、全局属性

アプレット全体で App インスタンスは 1 つしかなく、すべてのページで共有されます。開発者は、getApp メソッドを介してグローバルに一意の App インスタンスを取得したり、App でデータを取得したり、開発者が App で登録した関数を呼び出したりできます。
app.js ファイルにグローバルプロパティを追加する

//全局属性，所有页面都可以访问
globalData:{
    
    
  userInfo:"我是全局可访问的数据"
}

info.js ファイルでグローバルプロパティを読み取ります

// pages/info/info.js
Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
    message:""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    
    
    const appInstance= getApp()
    this.setData({
    
    message:appInstance.globalData.userInfo})
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    
    

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    
    

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    
    

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    
    

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    
    

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    
    

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    
    

  }
})

info.wxml ファイルの表示内容を変更する

<text>{
   
   {message}}</text>

結果の表示:
ここに画像の説明を挿入

1.2、ページ構成

1.2.1、ページのライフサイクル機能

アプレットにページを登録します。ページのライフサイクル機能を指定する
ここに画像の説明を挿入

属性	タイプ	例証する
オンロード	関数	ライフサイクルコールバック - ページの読み込みをリッスンする
onShow	関数	ライフサイクルコールバック - ページ表示の監視
オンレディ	関数	ライフサイクルコールバック - ページの最初のレンダリングの完了を監視します
onHide	関数	ライフサイクルコールバック - 監視ページ非表示
onUnload	関数	ライフサイクルコールバック - ページのアンロードをリッスンする

info.js に以下を追加します。

// pages/info/info.js
Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
    message:""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    
    
    console.log("页面加载");
    const appInstance= getApp()
    this.setData({
    
    message:appInstance.globalData.userInfo})
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    
    
    console.log("页面渲染完成");
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    
    
    console.log("页面显示");
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    
    
    console.log("页面隐藏");
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    
    
    console.log("页面卸载");
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    
    
    console.log("下拉动作");
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    
    
    console.log("页面上拉触底事件");
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    
    
    console.log("用户点击右上角分享");
  }
})

結果の表示:
ここに画像の説明を挿入

ライフサイクル機能の役割

さまざまなライフサイクル機能では、ビジネスニーズに応じてビジネスを追加できます。例: onShow 関数でデータ内のデータを変更できます。

Page({
    
    
  data:{
    
    
    hello:"hello"
   },
  onShow() {
    
    
    this.setData({
    
    
      hello:"大家好,我是初学小程序的人"
     })
   }
})

最後に: アプレットのこれらのライフサイクルを覚えておくことをお勧めします! ! ! ! !

1.2.2、ページのデータオブジェクト

簡単に理解すると、バックエンドデータは、通常はこのデータオブジェクトを介してフロントエンドに表示されます。これは、ページの最初のレンダリングに使用される初期データです。
ページが読み込まれると、 data 内のデータは JSON 文字列の形式でロジックレイヤーからレンダリングレイヤーに送信されるため、 data 内のデータは JSON に変換できる型 (文字列、数値、ブール値)である必要があります。、オブジェクト、配列

例は次のとおりです。
info.js に次の構成を追加します。

// pages/info/info.js
Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
    hello: "hello world",
    num: 1,
    flag: true,
    user: {
    
    
      name: "zhz",
      age: 19
    },
    names: ["zhz", "xiaobai", "zhz小白"]
  }
})

info.wxml に追加

<view><text>{
   
   { hello }}</text></view>
<view><text>{
   
   { num }}</text></view>
<view><text>{
   
   { flag }}</text></view>
<view><text>{
   
   { user.name }}</text></view>
<view><text>{
   
   { names[1] }}</text></view>

結果の表示:
ここに画像の説明を挿入

データオブジェクトの値を変更する場合は、次のように記述できます。

// pages/info/info.js
Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
    hello: "hello world",
    num: 1,
    flag: true,
    user: {
    
    
      name: "zhz",
      age: 19
    },
    names: ["zhz", "xiaobai", "zhz小白"]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    
    
    this.setData({
    
    
      flag:false,
      num:2
    })
})

表示効果は次のとおりです。フラグと数値が変更されていることがわかりました。
ここに画像の説明を挿入

アーキテクトになることを決意した、インターネット業界の初心者、zhz Xiaobai です
https://blog.csdn.net/zhouhengzhe?t=1

0 から 1 までの WeChat ミニプログラムを開発する (3) - ミニプログラムフレームワークの構成

記事ディレクトリ

その他の関連記事

1. 小さなプログラムフレームワーク

1.1、グローバル構成

1.1.1、ページ

1.1.1.1、entryPagePath

1.1.1.2. ページの生成方法

1.1.2、ウィンドウ

1.1.3、タブバーとプロパティ

1.1.4. その他の一般的な設定

1.1.4.1、サイトマップの場所

1.1.4.2、スタイル

1.1.4.3、ネットワークタイムアウト

1.1.4.4、debug

1.1.4.5、functionalPages

1.1.4.5、subpackages

1.1.4.6、workers

1.1.4.7、requiredBackgroundModes

1.1.4.8、requiredPrivateInfos

1.1.4.9、debugOptions(真机可看)

1.1.4.10、permission

1.1.4.11、usingComponents

1.1.5、单页面配置(指定每个页面的标题等)

1.1.6、公共样式（全局改变）

1.1.6.1、公共样式

1.1.6.2、尺寸单位

1.1.6.3、样式导入

1.1.7、注册小程序

1.1.8、全局属性

1.2、ページ構成

1.2.1、ページのライフサイクル機能

1.2.2、ページのデータオブジェクト

おすすめ

0 から 1 までの WeChat ミニ プログラムを開発する (3) - ミニ プログラム フレームワークの構成

記事ディレクトリ

その他の関連記事

1. 小さなプログラム フレームワーク

1.1、グローバル構成

1.1.1、ページ

1.1.1.1、entryPagePath

1.1.1.2. ページの生成方法

1.1.2、ウィンドウ

1.1.3、タブバーとプロパティ

1.1.4. その他の一般的な設定

1.1.4.1、サイトマップの場所

1.1.4.2、スタイル

1.1.4.3、ネットワークタイムアウト

1.1.4.4、debug

1.1.4.5、functionalPages

1.1.4.5、subpackages

1.1.4.6、workers

1.1.4.7、requiredBackgroundModes

1.1.4.8、requiredPrivateInfos

1.1.4.9、debugOptions(真机可看)

1.1.4.10、permission

1.1.4.11、usingComponents

1.1.5、单页面配置(指定每个页面的标题等)

1.1.6、公共样式（全局改变）

1.1.6.1、公共样式

1.1.6.2、尺寸单位

1.1.6.3、样式导入

1.1.7、注册小程序

1.1.8、全局属性

1.2、ページ構成

1.2.1、ページのライフサイクル機能

1.2.2、ページのデータ オブジェクト

おすすめ

0 から 1 までの WeChat ミニプログラムを開発する (3) - ミニプログラムフレームワークの構成

1. 小さなプログラムフレームワーク

1.2.2、ページのデータオブジェクト