WeChat ミニプログラムの概要

グローバル設定ファイル

ページ

WeChat ミニプログラムは何ページありますか?

窓

ミニプログラムの先頭。ミニプログラムのステータスバー、ナビゲーションバー、タイトル、ウィンドウの背景色の設定に使用されます。
backgroundTextStyle
- ドロップダウン読み込みのスタイル。値はlight(ハイライト) とdark(ダーク)です。
navigationBarBackgroundColor
- ヘッダーナビゲーションの背景色
navigationBarTitleText
- ヘッダーナビゲーションのタイトル
- サブページは、navigationBarTitleText を通じて独自のヘッダータイトルを変更できます
navigationBarTextStyle
- ヘッダーナビゲーションのタイトルスタイル

タブバー

下部ナビゲーションバー
- selectedColorタブが選択されているときのタブ上のテキストの色。16 進数の色のみがサポートされます。

"tabBar": {
    
    
  // tab 上的文字选中时的颜色，仅支持十六进制颜色
  "selectedColor": "#269fde",
  "list": [{
    
    
    "pagePath": "pages/index/index",
    "text": "首页",
    // 默认图标
    "iconPath": "/images/home.png",
    // 选中时的图标
    "selectedIconPath": "/images/home-o.png"
  }, {
    
    
    "pagePath": "pages/my/my",
    "text": "我的",
    "iconPath": "/images/my.png",
    "selectedIconPath": "/images/my-o.png"
  }]
}

wxml

view は div と同等です
画像はimgと同等です
スタイルがない場合、入力入力ボックスは表示されません。
ボタンボタン
テキストはスパンに相当します

wxss

rpx は rem と同等であり、携帯電話の画面に適応します。

フレックスレイアウト

スピンドル方向の変更: テキスト方向
行の折り返し: フレックスラップ: ラップ
スピンドルのアライメント
- コンテンツの正当化
- Felx-start flex-end space-between space-around
交差軸調整
- アイテムの整列

イベント

bindingtap はバインディングイベント (クリック) です。

入力ボックスの内容を取得します

bininput を通じて入力ボックスのコンテンツを取得します (コンテンツが変更されている限りトリガーされます)
bindchange を通じて入力ボックスのコンテンツを取得します (コンテンツが変更され、カーソルが離れるとトリガーされます)
イベントを受けることで、e.detail.value

データバインディング

js データで初期データを定義し、それを { {}} を通じて wxml にレンダリングします。

一方向のデータバインディング

This.old value = new value は使用しないでください
this.setDate({ 変数名: 新しい値}) を使用する必要があります。

turn() {
    
    
    // this.data.pindao = '少儿频道'
    // console.log(this.data.pindao);
    this.setData({
    
    
      pindao: '少儿频道'
	})
}

双方向のデータバインディング

通常、フォームタイプに使用されます
まずbindinput入力ボックスの値を取得します。
次に、setData({ old value: e.detail.value }) を通じて古い値を新しい値にレンダリングします。

wxml
<view>{
    
    {
    
    danmu}}</view>
<input bindinput="get" class="danmu" type="text" placeholder="请出入内容"/>

js
get(e) {
    
    
  console.log(e.detail.value);
  this.setData({
    
    
    danmu: e.detail.value
  })
}

よく使用される API

wx.begins

ポップアップ

wx.showToast()

submit() {
    
    
  wx.showToast({
    
    
    title: '提交失败',
    icon: 'error',
    duration: 3000
  })
}

ページジャンプ

wx.navigateTo() は tabBar (下部ナビゲーション) にジャンプできず、現在のページを保持します。

wxml
<button bindtap="toaaa" class="btn">toaaa</button>

js
toaaa() {
    
    
  wx.navigateTo({
    
    
    url: '/pages/aaa/aaa',
  })
}

wx.redirectTo() は現在のページを保持しません。wx.navigateTo との違いは次のとおりです。 redirectTo は前のページに戻り、前のページにジャンプします (現在のページは保持されないため)。

wxml
<button bindtap="toBBB">tobbb</button>

js
toBBB() {
    
    
  wx.redirectTo({
    
    
    url: '/pages/bbb/bbb',
  })
}

wx.switchTab() は tabBar にのみジャンプできます

wxml
<button bindtap="todata">todata</button>

js
todata() {
    
    
  wx.switchTab({
    
    
    url: '/pages/data/data',
  })
}

wx.navigateBack() 前のページにジャンプします

wxml
<button bindtap="reback">返回到上一个页面上</button>

js
reback() {
    
    
  wx.navigateBack({
    
    
    delta: 1
  })
}
// 也可以不写delta，省略就是返回上一页

wx.reLaunch() はすべてのページを閉じて、アプリケーション内のページを開きます

wxml
<button bindtap="openPage">关闭所有页面，打开到应用内的某个页面</button>

js
openPage() {
    
    
    wx.reLaunch({
    
    
        url: '/pages/data/data',
    })
}

リクエスト呼び出しインターフェース
wx.request() は HTTPS ネットワークリクエストを開始するか、インポート (utils) します。
古いバージョンの関数形式を使用して記述します。このポインティングの問題に注意してください。ただし、アロー関数ではこのようなことは起こりません（これは上位レベルのスコープを指しません）。

let that = this
wx.request({
    
    
  url: 'https://cnodejs.org/api/v1/topics',
  // 用老版本的函数形式写，注意有this指向的问题，但是用箭头函数就不会了
  success(res) {
    
    
    // console.log(res)
    // Cannot read property 'setData' of undefined   找不到this
    that.setData({
    
    
      dataList: res.data.data
    })
  }
})

WeChat許可ユーザー情報の取得

wx.getUserProfile
- res.userInfo.nickName はユーザー名を取得します
- res.userInfo.avatarUrl ユーザーのアバターアドレスを取得します

wxml
<button bindtap="getUserInfo">获取用户信息</button>

js
getUserInfo() {
    
    
  wx.getUserProfile({
    
    
    desc: '用于完善个人信息',
    success(res) {
    
    
      console.log(res);
      // 获取用户名
      console.log(res.userInfo.nickName);
      // 获取用户头像地址
      console.log(res.userInfo.avatarUrl);
    }
  })
}

TypeError: 未定義のクラシックエラーのプロパティ 'setData' を読み取れません。これは何かが間違っていることを示しています

getUserInfo() {
    
    
  // 这里需要把this转存到that中，this指的是page
  let that = this
  wx.getUserProfile({
    
    
    desc: '用于完善个人信息',
    success(res) {
    
    
      console.log(res);
      // 获取用户名
      console.log(res.userInfo.nickName);
      // 获取用户头像地址
      console.log(res.userInfo.avatarUrl);
      // 这里的this指的是sucess，不是page
      that.setData({
    
    
        userName: res.userInfo.nickName,
        avatarUrl: res.userInfo.avatarUrl
      })
    }
  })
}

グローバル globalData データ

グローバルデータはapp.jsのglobalDataで定義されています
コンポーネントは、globalData でグローバルデータを呼び出す前に、グローバルデータをインスタンス化する必要があります。

const app = getApp()

ユーザーデータをグローバルデータとして設定する

まず、それを globalData にキャッシュします

getUserInfo() {
    
    
  // 这里需要把this转存到that中，this指的是page
  let that = this
  wx.getUserProfile({
    
    
    desc: '用于完善个人信息',
    success(res) {
    
    
      console.log(res);
      // 获取用户名
      console.log(res.userInfo.nickName);
      // 获取用户头像地址
      console.log(res.userInfo.avatarUrl);
      // 这里的this指的是sucess，不是page
      that.setData({
    
    
        userName: res.userInfo.nickName,
        avatarUrl: res.userInfo.avatarUrl
      })

      // 获取到用户信息后，转存到全局数据中
      app.globalData.userInfo = res.userInfo
    }
  })
}

以下のページからご利用いただけます

clickItem() {
    
    
  console.log('被点击了');
  console.log(app.globalData.userInfo);
}

ローカルストレージ

設定

wx.setStorageSync('キー',値)

得る

wx.getStorageSync('key')
まず、ユーザー情報をグローバルデータに転送する必要があります
次に、ユーザーデータをローカルキャッシュに保存する必要があります (これは、他のページがローカルデータを介して直接取得するのに便利です)
- ローカルキャッシュにキャッシュされている限り、データは存在します。更新してもページを閉じない限りデータは残ります。
- その後、ユーザー情報を取得するための 1 回限りの認証が行われ、ローカルキャッシュを取得してグローバルデータに転送することで、他のページを直接使用できるようになります。

授权获取
getUserInfo() {
    
    
  let that = this
  wx.getUserProfile({
    
    
    desc: '完善信息',
    success(res) {
    
    
      // console.log(res);
      // 获取用户名及头像地址
      console.log(res.userInfo.nickName);
      console.log(res.userInfo.avatarUrl);
      that.setData({
    
    
        nickName: res.userInfo.nickName,
        avatarUrl: res.userInfo.avatarUrl
      })
      // 将用户信息存储为全局数据
      app.globalData.userInfo = res.userInfo
      // 获取后存储本地
      wx.setStorageSync('userInfo', res.userInfo)
    }
  })
}

其他页面使用
show() {
    
    
  // 获取缓存中的数据
  wx.getStorageSync('userInfo')
  // 把缓存获取到的数据转存给全局变量app.globalData.userInfo
  app.globalData.userInfo = wx.getStorageSync('userInfo')

  this.setData({
    
    
    userInfo: app.globalData.userInfo
  })
}

ライフサイクル

2 つのカテゴリに分かれており、1 つはページのライフサイクル、もう 1 つはアプリケーションのライフサイクルです。

ページのライフサイクル

各ページを個別に
1. onLoad は現在のページの読み込みを監視し、一度だけ実行します。
  - 通常、データリクエストを作成し、渡されたパラメータを取得します（デフォルトではオプションパラメータを使用します）。
```
onLoad(options) {
      
      
    console.log('onLoad声明周期，只会执行一次，一般做初始请求用',options)
},
```
1. onReady (ページの最初のレンダリングが完了するとトリガーされます。ページごとに 1 回だけ呼び出されます)
  - さらに変更を加えて使用する
2. onShow (このページが表示されている限り、自動的にロードされます)、1 回表示、1 回ロード
  - さらにページデータの更新を行う
3. onHide (ページが非表示になるたびに自動的にロードされる)、1 回非表示、1 回ロード
4. onUnload (ページをアンロードし、アプレットを閉じる)

// pages/alive/alive.js
Page({
    
    
  /**
   * 页面的初始数据
   */
  data: {
    
    

  },

  /**
   * 生命周期函数--监听页面加载，只会执行一次(only one)
   * options 形参接收上个页面传递过来的参数
   */
  onLoad(options) {
    
    
    console.log('onLoad声明周期，只会执行一次，一般做初始请求用',options)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成，一个页面只会调用一次
   */
  onReady() {
    
    
    console.log('onReady声明周期，多做修改内容使用')
  },

  /**
   * 生命周期函数--监听页面显示，显示一次，加载一次，多做数据更新用
   */
  onShow() {
    
    
    console.log('onShow显示一次，加载一次，多做数据更新用')
  },

  /**
   * 生命周期函数--监听页面隐藏，隐藏一次，加载一次
   */
  onHide() {
    
    
    console.log('onHide隐藏一次，加载一次');
  },

  /**
   * 生命周期函数--监听页面卸载, (卸载页面，小程序关闭时触发)
   */
  onUnload() {
    
    
    console.log('onUnload小程序关闭时触发');
  },

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

  },

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

  },

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

アプリケーションのライフサイクル

つまり、WeChat アプレットアプリケーション全体が app.js で書かれています。
1. onLaunch は、ミニプログラムの初期化が完了したときにトリガーされ、グローバルに 1 回だけトリガーされます。
  - 通常、ユーザー情報を取得するために使用されます
2. onShow (アプレットの開始時、またはバックグラウンドからフォアグラウンド表示に入ったときにトリガーされます)
3. onHide (アプレットがフォアグラウンドからバックグラウンドに入るときにトリガーされます)

App({
    
    
  // 小程序初始化完成时触发，全局只会触发一次。一般用于获取用户的信息
  onLaunch() {
    
    
    console.log('onLaunch 小程序初始化完成时触发，全局只会触发一次，一般获取用户信息用')
  },
  // 小程序启动，或从后台进入前台显示时触发
  onShow() {
    
    
    console.log('onShow 小程序启动，或从后台进入前台显示时触发')
  },
  // 小程序从前台进入后台时触发
  onHide() {
    
    
    console.log('onHide 小程序从前台进入后台时触发')
  },
  // 全局数据  globalData
  globalData: {
    
    
    userInfo: null
  }
})

データの種類

数値、文字列、ブール値、null、未定義、オブジェクト (関数、配列、日付 . . . )

単純なデータ型	説明する
番号	18、18.8 などの整数と小数を含む数値タイプ
弦	「华神」などの文字列型。js 内の文字列は引用符で囲む必要があることに注意してください。
ブール値	ブール値タイプ。true と false の 2 つの値があり、true と false を表します。
未定義	未定義この値は、var a など、変数に値が含まれていないことを意味します。変数 a が宣言されていても値が割り当てられていない場合、その変数は未定義です。
ヌル	var a=null などの Null 値は、変数 a が null であると宣言します。
物体	オブジェクトタイプ: 関数、配列、日付 . . .

データ型変換

文字列に変換する

方法	説明する	場合
toString()	文字列に変換する	var age=1 age.toString()
弦（）	文字列に変換する	var age=1 文字列(年齢)
文字列をプラス記号で連結する	文字列に変換する	var age=1 ""+年齢

数値型に変換

方法	説明する	場合
番号（）	文字列を数値に変換する	Number("8.88") // 8.88 を返します
プレスフロート()	文字列を解析して浮動小数点数を返します	parseFloat("8.88") //8.88を返す
parseInt()	文字列を解析して整数を返します	parseInt("8.88") //8.88を返す

数値に変換するいくつかの特殊なケース

console.log(Number(""))//空字符串转换为 0
console.log(Number(true))//true转换为1
console.log(Number(false))//false转换为0
console.log(Number("华神"))//其他的字符串会转换为 NaN (因为转换过来不是数字)

配列

arr = […]
let arr = 新しい Array()
- パラメータが 1 つだけの場合、それは長さです
- 2つ以上ある場合は配列要素となります
配列にはさまざまな変数を含めることができます

要素の追加

最後にpushを追加し、新しい配列の長さを返します
先頭に unshift を追加し、新しい配列の長さを返します

要素の削除

最後にpopを削除し、削除された要素を返す
先頭のシフトを削除し、削除された要素を返す
スプライス (番号から開始し、いくつかを削除)
splice(何番から始めるか、何個置換するか、置換する値)

car.splice(0,2,'红旗','特斯拉')
console.log(car)

配列を結合する

concat は複数の配列を結合し、主にドロップダウンの読み込み (スプライシング) に使用されます。

console.log(car.concat(home))

リストのレンダリング

wx: のための
blockタグは通常、ループや判定に使用されます（templateタグに相当）

レンダリング配列

<view wx:for="{
    
    {carList}}" wx:key="index">
  {
    
    {
    
    index + 1}} -- {
    
    {
    
    item}}
</view>

<block wx:for="{
    
    {carList}}" wx:key="index">
  <view>{
    
    {
    
    index + 1}} -- {
    
    {
    
    item}}</view>
</block>

レンダリングオブジェクト

<block wx:for="{
    
    {userList}}" wx:key="index">
  <view>{
    
    {
    
    item.name}}</view>
  <view>{
    
    {
    
    item.age}}</view>
  <view>{
    
    {
    
    item.sex}}</view>
</block>

<block wx:for="{
    
    {userList}}" wx:key="index">
  <view>{
    
    {
    
    item.name}} || {
    
    {
    
    item.age}} || {
    
    {
    
    item.sex}}</view>
</block>

条件付きレンダリング

wx:if は vx:elif および wx:else と組み合わせることができます

<view wx:if="{
    
    {false}}">是否显示呢</view>
// 根据条件判断
<view wx:if="{
    
    {flag}}">是否显示呢</view>
<view wx:if="{
    
    {!flag}}">是否显示呢</view>

<view wx:if="{
    
    {num == 1}}">1</view>
<view wx:elif="{
    
    {num == 2}}">2</view>
<view wx:else>3</view>

数学

乱数

Math.random() [0，1）
最小値から最大値までの間のランダムな小数を生成します

let min = 10
let max = 100
console.log(Math.random() * (max - min ) + min)

最小値から最大値までの間のランダムな整数を生成します

let min = 10
let max = 100
console.log(Math.floor(Math.random() * (max - min ) + min))

2 つの数値の間のランダムな整数を取得します (最小値以上、最大値未満)

// 这个随机数是min和max之间的随机整数
function getRandomInt(min, max) {
    
    
  min = Math.ceil(min)
  max = Math.floor(max)
  //不含最大值，含最小值
  return Math.floor(Math.random() * (max - min)) + min;
}

2 つの数値の間のランダムな整数を取得します (最小値以上、最大値以下)。

// 这个随机数是min和max之间的随机整数
function getRandomInt(min, max) {
    
    
  min = Math.ceil(min)
  max = Math.floor(max)
  //含最大值，含最小值 
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

日付

Date はコンストラクターであるため、使用する前にインスタンス化する必要があります

let date = new Date()
console.log(date)   // 会输出当前的时间

require('…') import (common.js仕様)

let utils = require('../../utils/util.js')

フォーマット時間

let utils = require('../../utils/util.js')

let nowTime = utils.formatTime(time)
console.log(nowTime)
this.setData({
    
    
  nowTime
})

パラメータを渡す

let utils = require('../../utils/util.js')

let date = new Date('2022-2-25 12:00:00')
console.log(date)
let time = new Date(1645796691081)
console.log(utils.formatTime(time))

タイムスタンプを取得する

let time = new Date()
console.log(time.getTime())
let date = +new Date()
console.log(date)
let d = Date.now()
console.log(d)

共通操作

方法	説明する
getFull Year()	4 桁の年 (yyyy) を取得します
getMonth()	月を取得 (0-11) +1 を記憶
getDate()	日を数値 (1 ～ 31) で返します。
getHours()	時間を取得します (0 ～ 23)
getMinutes()	ポイントを獲得 (0-59)
getSeconds()	秒を取得 (0 ～ 59)
getDay()	週名を数値(0～6)で取得します。
getミリ秒()	ミリ秒を取得 (0 ～ 999)
時間をもらう（）	タイムスタンプを取得 (1970 年 1 月 1 日から現在まで)

これ

第 1 レベルの関数では、これはページのインスタンス化を指します。
- this.setDate によって設定された変数はページのインスタンス化に直接保存され、wxml で直接レンダリングして使用できます。

onLoad() {
    
    
    console.log(this)
    this.setDate({
    
    
        cat: '花花'
    })
}

内部関数は内部関数自体を指します。これを使用する必要がある場合は、これをダンプする必要があります

let that = this
wx.request({
    
    
  url: 'https://www.baidu.com',
  success(res) {
    
    
    console.log(res);
    let aaa = 3
    // Cannot read property 'setData' of undefined   找不到this
    that.setData({
    
    
      dataVal: aaa
    })
  }
})

折り返し電話

JavaScript の非同期操作関数は、非同期タスクの結果を処理するためにコールバック関数を使用することがよくあります。
コールバック関数は、非同期タスクを開始するときに、タスクの完了後に何をするかを通知する関数です。このように、メインスレッドは非同期タスクのステータスをほとんど気にする必要がなく、メインスレッドは自動的に開始および終了します。

アロー関数

アロー関数自体は this を指していません。コンテキストによって異なります。
- ここでアロー関数を使用する場合、それを宣言する必要はありません。

wx.request({
    
    
  url: 'https://www.baidu.com',
  success:(res)=> {
    
    
    console.log(res);
    let aaa = 3
    // Cannot read property 'setData' of undefined   找不到this
    this.setData({
    
    
      dataVal: aaa
    })
  }
})

プロミススタイル

クラウド開発のみに使用可能
wx.clode.database().collection('データベーステーブル名').get() データベーステーブルを取得してリクエストを行います

wx.cloud.database().collection('数据库表名称').get()
.then(res=>{
    
    
    this.setData({
    
    
        
    })
    this.coding()
})

アプリケーションシナリオ

複数の非同期操作を連続して実行する必要がある場合
- 例: 非同期方式でユーザー名とパスワードを連続して検出する場合は、最初にユーザー名を非同期で検出し、次にパスワードを非同期で検出する必要があります。プロミスにぴったりですね

ナビゲーター

ナビゲーターは tabBar にジャンプできません

<navigator url="/pages/page01/page01">page01</navigator>

リンクラベルジャンプ + パラメータを運ぶのと同じです。これとプログラムによるナビゲーションの最大の違いは、パラメータを渡すことができることです。
- 1. パラメータを渡す: ハッシュアドレスの後? パラメータ名 = { { オブジェクト名.xxx }}

<navigator class="aa" url="/pages/page01/page01?id={
    
    {zs.id}}&name={
    
    {zs.name}}">{
    
    {
    
    zs.name}}</navigator>

- 1. 受信したパラメータは、onLoad でのみ受信できるラージオブジェクトです。

onLoad: function (options) {
    
    
  console.log(options);    // page01.js:15 {id: "1", name: "张三"}
}

APIジャンプはパラメータを運びます

ジャンプ方法	説明する	wx方式に対応
ナビゲートする	現在のページを保持したまま、アプリ内のページにジャンプします。ただしタブバーページにはジャンプできません	wx.navigateTo
リダイレクト	現在のページを閉じて、アプリ内のページにジャンプします。ただしタブバーページへのジャンプは禁止です	wx.redirectTo
スイッチタブ	tabBar ページにジャンプし、他のすべての非 tabBar ページを閉じます	wx.switchTab
再起動	すべてのページを閉じて、アプリ内のページを開きます	wx.reLaunch
ナビゲート戻る	現在のページを閉じて、前のページまたは複数レベルのページに戻ります	wx.navigateBack
出口	ミニプログラムを終了します。target="miniProgram" の場合に有効です。	なし

1. パラメータを渡す

toPage02() {
    
    
  wx.navigateTo({
    
    
    url: '/pages/page02/page02?id=' + this.data.zs.id + '&name=' + this.data.zs.name,
  })
}

1. 受信パラメータはonLoadでのみ受信可能

onLoad: function (options) {
    
    
  console.log(options);
  console.log(options.id);
  console.log(options.name);
},

WeChat ミニ プログラムの概要