目次
前書き
考え方の変更
生命周期
ライフサイクル
数据中心
性能优化
ホームページ WeChat アプレット ミニプログラム開発 WeChatミニプログラム開発技術の概要

WeChatミニプログラム開発技術の概要

Mar 25, 2017 pm 02:50 PM

要約: Mobike ミニプログラムは、WeChat ミニプログラムの初日に正式にリリースされ、Weibo メディアの友人界に衝撃を与えました。この記事では主に、技術的な方向性の概要と、この開発サイクル中に段階​​的に学習から進歩に移行する方法について説明します。 ... ... ... ...

前書き

Mobike ミニ プログラムは、WeChat ミニ プログラムの開始初日に正式にリリースされ、友人の Weibo メディア サークルを圧倒しました。この記事では主に、技術的な方向性の概要と、この開発サイクル中に段階​​的に学習から進歩に移行する方法について説明します。

考え方の変更

  • WeChat アプレットには HTML の一般的なタグはありませんが、 React の WeChat カスタム コンポーネント(マップetcReact的微信自定义组件,比如viewtextmap

  • 没有window变量,但微信提供了wx全局方法集

  • 没有a标签链接,不可嵌套iframe

  • 🎜window 変数ですが、WeChat は wx グローバル メソッド セット🎜🎜🎜いいえ a タグ リンク、入れ子にすることはできませんiframe
  • イベント バインディングと条件付きレンダリングは似ていますAngular,全部写在WXML

  • 数据绑定采用Mustache双大括号语法

  • 无法操作DOM,通过改变page data(类似React的state)来改变视图展现

所以如果你熟悉以上提到的所有前端技术栈,开发微信小程序你会得心应手。

生命周期

你可以理解小程序就是一个单页面的H5网页,所有元素的加载都是一次性的,这就引来了生命周期的概念:

WeChatミニプログラム開発技術の概要

  • 首次打开,小程序初始化

  • 小程序初始化完成后,触发onShow事件

  • 小程序被切换到后台(熄屏,切换APP等),触发onHide

    🎜🎜データバインディングの WXML は Mustache二重中括弧構文 🎜🎜🎜🎜 は操作できませんDOMページ データ (反応 状態) ビューのプレゼンテーションを変更します🎜🎜

したがって、上記のすべてのフロントエンド テクノロジー スタックに精通している場合は、WeChat ミニ プログラムを問題なく開発できるでしょう。 🎜

ライフサイクル

ミニプログラムが単一であることがわかります。ページ H5 Web ページでは、すべての要素が一度読み込まれるため、ライフ サイクルの概念が生まれます: 🎜

WeChatミニプログラム開発技術の概要🎜

    🎜 🎜最初のオープニング、ミニプログラムの初期化🎜🎜🎜🎜 ミニプログラムの初期化が完了したら、トリガー onShowイベント 🎜🎜🎜🎜 アプレットがバックグラウンドに切り替わり (画面オフ、アプリの切り替えなど)、非表示🎜
  • アプレットがバックグラウンドからフォアグラウンドに切り替わり、再びトリガーされますonShow onShow

  • 小程序出错,触发onError

每个页面也有自己的生命周期:

WeChatミニプログラム開発技術の概要

注意:在微信6.5.3版本中,部分Android机触发不了onLoad事件,可以用onReady

ミニ プログラムでエラーが発生し、エラー

すべて 各ページには独自のライフサイクルもあります:

WeChatミニプログラム開発技術の概要

注: WeChat バージョンの場合6.5.3、一部の Android マシンをトリガーできません

onShow

でビジネス ロジックを作成します: onShow事件,所以可以在onShow中写业务逻辑:
// Page A
// 开锁成功后,跳转到Page B
wx.redirectTo({
  url: "/pages/riding/index"
})
ログイン後にコピー
// Page B
Page({
  onShow() {
    // 检查骑行状态
  }
}
})
ログイン後にコピー

但更合理的应该是利用事件广播来处理:

const broadcast = require("libs/broadcast")

// 先注册事件
broadcast.on("check_ride_state", () => {
  // 检查骑行状态
})
ログイン後にコピー
const broadcast =require("libs/broadcast")

// Page A
// 开锁成功后,触发事件,再跳转到Page B
broadcast.fire("check_ride_state")
wx.redirectTo({
  url: "/pages/riding/index"
})
ログイン後にコピー

数据中心

根目录的app.js很有用,根目录的app.js很有用,根目录的app.js很有用。
因为在它内部注册的变量或方法,都是可以被所有页面获取到,所以利用它也可以处理上面所述的跨页面事件触发问题。而且可以注册globalData供所有页面取用,例如可以把systemInfo直接注册到globalData

// app.js

const systemInfo = wx.getSystemInfoSync()
App({
  globalData: {
    systemInfo
  }
})
ログイン後にコピー
// Page A

const {
  systemInfo
} = getApp().globalData
ログイン後にコピー
ログイン後にコピー

処理するイベント ブロードキャスト:

index.wxml
"map" controls="{{controls}}" style="{{style}}">map>
index/index.js
ログイン後にコピー
ログイン後にコピー
const indexStyle = "width: 750rpx; height: 1260rpx"
const rideStyle = "width: 750rpx; height: 960rpx"

Page({
  data: {
    style: indexStyle
  },
  onUnlock() {
    this.setData({
      style: rideStyle
    })
  }
}
})
ログイン後にコピー
ログイン後にコピー

app.js は非常に便利です。ルート ディレクトリ app.js は非常に便利です。ルートディレクトリ内 -sizing: border-box; font-family: 'Source Code Pro'、Consolas、Menlo、Monaco、'Courier New'、font-size: 0.93em; );padding: 2px 4px; border-radius: 3px; background-color: rgb(249, 242, 244);">app.js は非常に便利です。
登録されている変数やメソッドはすべてのページで取得できるため、前述のクロスページイベントトリガー問題の処理にも使用できます。そして、globalData はすべてのページで使用できます。たとえば、 style ="box-sizing: border-box; font-family: 'Source Code Pro'、Consolas、Menlo、Monaco、'Courier New'、monospace; font-size: 0.93em; color: rgb(199, 37, 78 ) ; パディング: 2px 4px; 背景色: rgb(249, 242, 244);">systemInfoglobalData なので、すべてのページで取得する必要はありません: 🎜rrreee🎜 ページで取得: 🎜
// Page A

const {
  systemInfo
} = getApp().globalData
ログイン後にコピー
ログイン後にコピー

性能优化

小程序运行在微信平台,而且可能和众多小程序“共享运行内存”,可想而知,单个小程序的性能极可能遇到瓶颈而Crash或被微信主动销毁!

比如在摩拜单车有这个场景:

首页展示地图找车,扫码成功后跳转到骑行地图。

简单的逻辑,直接两个页面,两个map组件切换就可以搞定。实际测试场景中,iOS的确如预期,一切正常,但是在Android下,就很有可能会使得小程序Crash,扫码成功后直接退出了小程序。

解决办法就是, 整个小程序只维护一个map组件 ,通过不同的State来改变map的不同展现:

index.wxml
"map" controls="{{controls}}" style="{{style}}">map>
index/index.js
ログイン後にコピー
ログイン後にコピー
const indexStyle = "width: 750rpx; height: 1260rpx"
const rideStyle = "width: 750rpx; height: 960rpx"

Page({
  data: {
    style: indexStyle
  },
  onUnlock() {
    this.setData({
      style: rideStyle
    })
  }
}
})
ログイン後にコピー
ログイン後にコピー

这样就成功解决了部分Android设备小程序Crash的问题。

以上がWeChatミニプログラム開発技術の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WeChat モーメントで訪問者を確認できますか? WeChat モーメントで訪問者を確認できますか? May 06, 2024 pm 01:30 PM

1. WeChat は、プライバシー保護に配慮したソーシャル プラットフォームです。ユーザーは、自分の友人サークルや個人のホームページに誰がアクセスしたかを知ることができません。 2. この設計は、ユーザーのプライバシーを保護し、嫌がらせや覗き見の可能性を回避することを目的としています。 3. ユーザーは自分の友人サークル内の「いいね!」とコメントの記録のみを参照できるため、個人情報の機密性がさらに確保されます。

「iPhone 16はWeChatをサポートしない可能性がある」との噂があり、中国のApple技術コンサルタントはアプリストア手数料についてテンセントと協議中と述べた 「iPhone 16はWeChatをサポートしない可能性がある」との噂があり、中国のApple技術コンサルタントはアプリストア手数料についてテンセントと協議中と述べた Sep 02, 2024 pm 10:45 PM

ヒントを提供してくれた中国南部のネチズン Qing Qiechensi、HH_KK、石原さとみ、Wu Yanzu に感謝します。 9月2日のニュースによると、最近「iPhone 16はWeChatをサポートしないかもしれない」という噂があるが、これに対し中国のApple公式ホットラインに電話したシェル・ファイナンスの記者は、iOSシステムやAppleデバイスは引き続きサポートできると回答したという。 WeChat と WeChat を使用する Apple App Store に引き続き掲載およびダウンロードできるかどうかの問題は、今後の状況を決定するために Apple と Tencent 間のコミュニケーションと協議が必要です。ソフトウェア App Store と WeChat の問題の説明 ソフトウェア App Store の技術コンサルタントは、ソフトウェアを Apple Store に掲載するには開発者が料金を支払う必要がある可能性があると指摘しました。一定のダウンロード数に達すると、Apple はそれ以降のダウンロードに対応する料金を支払う必要があります。 AppleはTencentと積極的にコミュニケーションをとっており、

DeepSeekイメージジェネレーションチュートリアル DeepSeekイメージジェネレーションチュートリアル Feb 19, 2025 pm 04:15 PM

DeepSeek:強力なAI画像生成ツール! DeepSeek自体は画像生成ツールではありませんが、その強力なコアテクノロジーは、多くのAI塗装ツールを根本的にサポートしています。 DeepSeekを使用して画像を間接的に生成する方法を知りたいですか?読み続けてください! DeepSeekベースのAIツールで画像を生成します。次の手順では、これらのツールを使用するように導きます。AIペイントツールの起動:DeepSeekベースのAIペイントツールを検索して開きます(たとえば、「Simple AI」を検索します)。描画モードを選択します。「AI図面」または同様の関数を選択し、「アニメアバター」、「ランドスケープ」などのニーズに応じて画像タイプを選択します。

WeChatで削除されたチャット履歴を復元する方法 WeChatで削除されたチャット履歴を復元する方法 May 06, 2024 pm 01:29 PM

1. 削除された WeChat チャット履歴を復元するには、データ移行に 2 台の携帯電話を使用する必要があります。 2. 古い携帯電話で、[自分]→[設定]→[チャット]→[チャット履歴の移行とバックアップ]をクリックします。 3. [移行]を選択し、対象デバイスのプラットフォームを設定し、復元するチャット履歴を選択後、[開始]をクリックします。 4. 次に、新しい電話で同じアカウントにログインし、古い電話で QR コードをスキャンして移行を開始します。 5. 移行が完了すると、削除されたチャット履歴が新しい電話に復元されます。

WeChatの背景画像を設定する方法 WeChatの背景画像を設定する方法 Apr 26, 2024 am 11:01 AM

1. WeChat アプリを開き、インターフェイスの下部にある [Me] をクリックし、[設定] 機能を選択します。 2. [チャット]をクリックし、[チャットの背景]をクリックして、チャットの背景設定インターフェイスに入ります。 3. [背景画像を選択]または[アルバムから選択]または[写真を撮る]をクリックします。 4. 使用したい画像を選択してクリックし、右上の[使用する]をクリックします。

WeChat霊銭通は安全ですか? WeChat霊銭通は安全ですか? Apr 29, 2024 am 10:23 AM

1. WeChat Lingqiantong は、ユーザー アカウントのセキュリティを確保するために、パスワード保護、実名認証、携帯電話バインドなどの多層セキュリティ メカニズムを採用しています。 2. WeChat Payでは、取引の安全性を確保するために、SSL暗号化通信、リアルタイム監視などのさまざまな暗号化方式を採用しています。 3. WeChat Pay はまた、銀行や金融機関と協力して、異常な取引を監視し、対処するためのリスク管理および予防措置を実施します。 4. WeChat Lingqiantong を使用する場合、ユーザーは個人アカウントの保護を強化し、複雑なパスワードを設定し、定期的にパスワードを変更し、個人情報を自由に開示しないようにする必要があります。

WeChatのチャット履歴を別の携帯電話に転送する方法 WeChatのチャット履歴を別の携帯電話に転送する方法 May 08, 2024 am 11:20 AM

1. 旧端末で「自分」→「設定」→「チャット」→「チャット履歴の移行とバックアップ」→「移行」をクリックします。 2. 移行するターゲットプラットフォームデバイスを選択し、移行するチャットレコードを選択して、「開始」をクリックします。 3. 新しいデバイスで同じ WeChat アカウントでログインし、QR コードをスキャンしてチャット履歴の移行を開始します。

WeChatで友達を削除した後にチャット履歴を復元する方法 WeChatで友達を削除した後にチャット履歴を復元する方法 Apr 29, 2024 am 11:01 AM

1. WeChat アプリを開き、インターフェースの下部にある [アドレス帳] をクリックし、[新しい友達] をクリックします。 2. ページ上部の検索ボックスに友人の WeChat ID またはニックネームを入力します。 3. 相手がユーザーを削除していない場合、ユーザーは検索結果で友達を見つけることができます。 4. 友達をクリックしてチャット ウィンドウに入ると、以前のチャット履歴を表示できます。

See all articles