目次
前書き
考え方の変更
生命周期
ライフサイクル
数据中心
性能优化
ホームページ 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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

OUYI Exchange App国内ダウンロードチュートリアル OUYI Exchange App国内ダウンロードチュートリアル Mar 21, 2025 pm 05:42 PM

この記事では、中国のOUYI OKXアプリの安全なダウンロードに関する詳細なガイドを提供します。国内のアプリストアの制限により、ユーザーはOUYI OKXの公式Webサイトからアプリをダウンロードするか、公式Webサイトが提供するQRコードを使用してスキャンおよびダウンロードすることをお勧めします。ダウンロードプロセス中に、公式Webサイトのアドレスを確認し、アプリケーションの許可を確認し、インストール後にセキュリティスキャンを実行し、2要素の検証を有効にしてください。 使用中は、地方の法律や規制を遵守し、安全なネットワーク環境を使用し、アカウントのセキュリティを保護し、詐欺に対して警戒し、合理的に投資してください。 この記事は参照のみであり、投資のアドバイスを構成していません。

H5とミニプログラムとアプリの違い H5とミニプログラムとアプリの違い Apr 06, 2025 am 10:42 AM

H5。ミニプログラムとアプリの主な違いは次のとおりです。技術アーキテクチャ:H5はWebテクノロジーに基づいており、ミニプログラムとアプリは独立したアプリケーションです。経験と機能:H5は軽量で使いやすく、機能が限られています。ミニプログラムは軽量で、インタラクティブが良好です。アプリは強力で、スムーズな経験があります。互換性:H5はクロスプラットフォーム互換性があり、アプレットとアプリはプラットフォームによって制限されています。開発コスト:H5には、開発コストが低く、中程度のミニプログラム、最高のアプリがあります。適用可能なシナリオ:H5は情報表示に適しており、アプレットは軽量アプリケーションに適しており、アプリは複雑な機能に適しています。

会社のセキュリティソフトウェアがアプリケーションと競合する場合はどうすればよいですか? HUESセキュリティソフトウェアをトラブルシューティングする方法は、一般的なソフトウェアを開きませんか? 会社のセキュリティソフトウェアがアプリケーションと競合する場合はどうすればよいですか? HUESセキュリティソフトウェアをトラブルシューティングする方法は、一般的なソフトウェアを開きませんか? Apr 01, 2025 pm 10:48 PM

互換性の問題と企業のセキュリティソフトウェアとアプリケーションのトラブルシューティング方法。多くの企業は、イントラネットセキュリティを確保するためにセキュリティソフトウェアをインストールします。ただし、セキュリティソフトウェアが時々...

H5ページの生産とWeChatアプレットの違いは何ですか H5ページの生産とWeChatアプレットの違いは何ですか Apr 05, 2025 pm 11:51 PM

H5はより柔軟でカスタマイズ可能ですが、熟練したテクノロジーが必要です。ミニプログラムはすぐに開始でき、メンテナンスが簡単ですが、WeChatフレームワークによって制限されています。

Enterprise WechatでのJSリソースキャッシュの問題を解決する方法は? Enterprise WechatでのJSリソースキャッシュの問題を解決する方法は? Apr 04, 2025 pm 05:06 PM

Enterprise WechatのJSリソースキャッシュ問題に関する議論。プロジェクト機能をアップグレードするとき、一部のユーザーは、特にエンタープライズでうまくアップグレードできない状況に遭遇することがよくあります...

H5とアプレットを選択する方法 H5とアプレットを選択する方法 Apr 06, 2025 am 10:51 AM

H5とアプレットの選択は、要件に依存します。クロスプラットフォーム、迅速な発達、高いスケーラビリティを備えたアプリケーションの場合は、H5を選択します。ネイティブエクスペリエンス、リッチな機能、プラットフォームの依存関係を持つアプリケーションについては、アプレットを選択します。

Binance Virtual Currencyの売買方法に関する詳細なチュートリアル Binance Virtual Currencyの売買方法に関する詳細なチュートリアル Mar 18, 2025 pm 01:36 PM

この記事では、2025年に更新されたBinance Virtual Currencyの売買に関する簡単なガイドを提供し、Binanceプラットフォームでの仮想通貨取引の操作手順を詳細に説明します。このガイドは、フィアット通貨購入USDT、他の通貨の通貨取引購入(BTCなど)、および市場取引や制限取引を含む販売業務をカバーしています。 さらに、このガイドは、Fiat Currency取引の支払いセキュリティやネットワーク選択などの重要なリスクを特に思い出させ、ユーザーが安全かつ効率的にバイナンストランザクションを実施するのに役立ちます。 この記事を通して、Binanceプラットフォームで仮想通貨を売買するスキルをすばやく習得し、トランザクションリスクを減らすことができます。

国内で最初のデュアルコア文化および観光デジタルヒト科! Tencent CloudはHuaguoshanの風光明媚なエリアがDeepseekに接続し、「Sage Monkey King」をより賢く暖かくするのを助けます 国内で最初のデュアルコア文化および観光デジタルヒト科! Tencent CloudはHuaguoshanの風光明媚なエリアがDeepseekに接続し、「Sage Monkey King」をより賢く暖かくするのを助けます Mar 12, 2025 pm 12:57 PM

Lianyungang Huaguoshanの風光明媚なエリアは、Tencent Cloudと手をつないで、文化および観光産業で最初の「デュアルコアの脳」デジタルホモサピエンスを立ち上げました - モンキーキング! 3月1日、風光明媚なスポットはモンキーキングをディープシェクプラットフォームに正式に接続し、テンセントフナユアンとディープシークの2つのAIモデル機能を備えており、観光客により賢くて考慮されたサービスエクスペリエンスをもたらしました。 Huaguoshanシーニックエリアは、Tencent Hunyuanモデルに基づいて、Digital Homo SapiensのMonkey Kingを以前に発売しました。今回、Tencent Cloudはさらに、Big Model Knowledge Engineなどのテクノロジーを利用してDeepSeekに接続して「デュアルコア」アップグレードを実現します。これにより、モンキーキングのインタラクティブな能力により、より高いレベル、応答速度が高まり、理解が強くなり、より暖かさが高くなります。モンキーキングには強力な自然言語処理能力があり、観光客から質問するさまざまな方法を理解できます。

See all articles