この記事は、WeChat ミニ プログラム に関する関連知識(shí)を提供します。主に WeChat ミニ プログラムの開発手順と主要なプロセスの詳細(xì)な説明を紹介します。皆様のお役に立てれば幸いです。

[関連する學(xué)習(xí)の推奨事項(xiàng): 小規(guī)模プログラム學(xué)習(xí)チュートリアル]

現(xiàn)在、小規(guī)模プログラム業(yè)界は人気のある業(yè)界の 1 つとなっています。インターネット マーケティングのダークホースです。まず、ミニ プログラム業(yè)界は、主要なトラフィック プラットフォームに依存しており、自然なユーザー ベースと獨(dú)自のリソースの利點(diǎn)を持っています。便利で高速な操作とシンプルで人気のあるモデルにより、わずか 1 年で爆発的な成長(zhǎng)をもたらしました。 。 増加?，F(xiàn)在、市販されている小さなプログラムの開発コストは數(shù)千から數(shù)萬の範(fàn)囲にありますが、Tencent Cloud を例に挙げると、Tencent の公式チームが設(shè)計(jì)してすぐに運(yùn)用できる小さなプログラムは、680 ドルから 10 萬ドルの価格で販売されています。年間3680円。今は複雑な小さなプログラムの設(shè)計(jì)については話さないで、最も単純なプログラムの設(shè)計(jì)から始めましょう。

小規(guī)模なプログラムを開発するには 2 つの方法があります。1 つはカスタマイズされた開発、もう 1 つはサードパーティ プラットフォームの開発です。カスタマイズされた開発の価格は數(shù)萬から數(shù)十萬と比較的高く、開発サイクルは長(zhǎng)くなります。
サードパーティ プラットフォームの開発の価格は比較的低く、わずか數(shù)回で開発できます。最も重要なことは、開発サイクルが 1 週間と短く、オンラインですぐにリリースできることです。

---

#1. WeChat ミニ プログラム開発の必須テクノロジー

##1. HTML 言語(yǔ)

HTML は Hypertext Markup Language の略で、主に Web ページの骨格を擔(dān)っています。動(dòng)物の骨格と同じように、HTML 言語(yǔ)は Web ページの骨格を擔(dān)っています。 Web ページのレイアウトをサポートします。

2. CSS

CSS は Cascading Style Sheet の略で、主に Web ページのスタイル、Web ページのコンテンツの配布方法、セクションの背景、色などを擔(dān)當(dāng)します。 CSS を使用してコントロールできます。

3. JavaScript

js と略され、動(dòng)的スクリプト言語(yǔ)です。以前は、js は Web ページの操作に使用されるスクリプト言語(yǔ)のみでしたが、Google v8 エンジン、angular、react などのフロントエンド フレームワークにより、フロントエンドとバックエンドの分離の傾向がますます明確になってきました。 Node、jsなどのテクノロジーの発展により、jsはサーバーサイドでも活力を発揮し、現(xiàn)在最も活発な言語(yǔ)の1つとなっています。

4. サーバー言語(yǔ)

プロのバックエンド開発者でない場(chǎng)合、バックエンドは難しく、學(xué)習(xí)曲線が急になる可能性があります。ただし、開発者にはバックエンド言語(yǔ)を?qū)W習(xí)することをお?jiǎng)幛幛筏蓼?。少なくとも一般的な理由フレームワークを理解し、そのコード ロジックを理解できる必要があります。これにより、フロント エンドとバック エンド間の良好な連攜が達(dá)成されるだけでなく、ミニプログラムにバグが発生した場(chǎng)合に使用できます。 PHP、Java、Python、ASP など、一般的に使用されるサーバー言語(yǔ)は數(shù)多くありますが、初心者は自分のニーズに合わせて選択して學(xué)習(xí)することをお?jiǎng)幛幛筏蓼埂?

5. データベース言語(yǔ)

開発する小規(guī)模なプログラムに大量のデータがなく、構(gòu)造が複雑でない場(chǎng)合、データベース言語(yǔ)は比較的単純です。一般的に使用されるコマンドや頻繁に発生する問題を使用できます。一般的に使用されるデータベースには、無料の MySQL、msSQL、MongoDB、Oracle およびその他のデータベースが含まれます。データ量が非常に大きい場(chǎng)合、ミニプログラムの最初の畫面で白ページが発生しやすいため、最適化を考慮する必要があります。

注: 開発ソフトウェアの具體的な実裝に関しては、それらは似ています。各ソフトウェアには獨(dú)自の特性があり、言語(yǔ)標(biāo)準(zhǔn)ルールは多少異なります。一般的な開発ツールには次のものがあります: WeChat 開発者ツール、ByteDance開発ツール、Sublime Text 3。ここでは WeChat 開発者ツールを使用します。

2. WeChat 開発者ツール

1. Baidu「WeChat Public Platform」をダウンロードしてインストールし、ミニ プログラムを選択します

開発者ツールで対応するバージョンを選択してダウンロードしてください

64 ビットの安定バージョンをインストールすることをお?jiǎng)幛幛筏蓼?br>

2.新しいプロジェクトを作成します
スタートアップ ページでプロジェクト名、ディレクトリ、AppID (テスト番號(hào)を選択) を入力します

# これは基本的なフレームワークです

# ツールに付屬の起動(dòng)ログを見て、小規(guī)模なプログラム開発のフレームワークを理解しましょう

3 つのプログラム フレームワーク

ルート ディレクトリ內(nèi)の 2 つのフォルダー

pages
はページ ファイルの保存に使用されるフォルダーであり、utils
が使用されますpublic js フォルダーを格納する;
ミニ プログラムは、ホームページとページングの 2 つの部分に大別されます。ホームページはログイン後に表示される最初のページです。ホームページとページングは??それぞれ 1 つのフォルダを占有し、両方ともページ フォルダに含まれます。明らかに、初期化されたアプレットには 2 ページしかありません (ホームページ インデックスとログ ページ ログ)

インデックスには、ホームページのインターフェイス設(shè)計(jì)に必要なファイル (index.js、index.json、index.wxss、index.wxml) も含まれています。
index.js
はホームページです。 js ドキュメントに似た論理ファイル。index.json
は、タイトル ワード、背景などのホームページの構(gòu)成ファイルです。index.wxss
はホーム ページです。上記のスタイル シート ファイルは CSS ドキュメントに似ており、index.wxml
は HTML ドキュメントに似た最初のページの構(gòu)造ファイルです。
同様に、ログ ファイルのログは基本的にインデックスと似ています (新しいページを追加する場(chǎng)合は、ページ ファイルの下に新しいフォルダーを追加する必要があります)

また、ルート ディレクトリ內(nèi)のアプリ .js、app.json、app.wxss、project.config.json、および sitemap.json は、ミニ プログラムのグローバル設(shè)定です。

app.js

はプロジェクトのエントリ ファイルであり、アプリケーション オブジェクトの作成に使用され、ミニ プログラムの開始時(shí)に最初に呼び出されます。 app.json は、ミニ プログラムのページ パス、インターフェイス プレゼンテーション、下部タブなどを含む現(xiàn)在のミニ プログラムのグローバル変數(shù)です。
app.wxss はパブリック変數(shù)です。ページ コンポーネントのクラス屬性は、app.wxss で宣言されたスタイル ルールを直接使用します;
project.config.json はプロジェクト構(gòu)成ファイルです。これは、最初にプロジェクトを開発するときのパーソナライズされた構(gòu)成で、エディターの色、コードのアップロード時(shí)の自動(dòng)圧縮などの一連のオプションが含まれます。
sitemap.json は、ミニ プログラムとそのページが WeChat によってインデックス付けされることを許可するかどうかを構(gòu)成するために使用されます。ファイルのコンテンツは JSON オブジェクトです。sitemap.json がない場(chǎng)合、デフォルトは次のとおりです。すべてのページにインデックスを付けることが許可されていること;
プロジェクトの作成後、開発者ツールは一部の公開コードをモジュールとして別の js (utils.js) ファイルに自動(dòng)的に抽出します。つまり、utils フォルダーが使用されます。獨(dú)自のカプセル化されたツール クラスを保存するための関數(shù)。関數(shù)は共有メソッドです。

4. プログラム デバッグ領(lǐng)域

プログラム デバッグ領(lǐng)域には、よく使用されるデバッグ モードがいくつかあります

1.コンソール

コンソール エラーメッセージの表示や変數(shù)情報(bào)の出力などができるコンソールです。

2.Wxml

Wxml は HTML CSS に相當(dāng)し、その上の領(lǐng)域左側(cè)は HTML 言語(yǔ)の CSS の一部のラベル屬性です。右側(cè)では、CSS プロパティを簡(jiǎn)単に設(shè)定できます。

3.ソース

ソースには、現(xiàn)在のプロジェクトのすべてのスクリプト ファイルが表示されます。WeChat アプレット フレームワークはこれらのスクリプトを処理しますCompile

4.Network

ネットワークは、ネットワーク関連の情報(bào)を表示するために使用されます。ここにはネットワーク要求はありません

5.AppData

AppData は、現(xiàn)在のプロジェクトによって表示される特定のデータを表示します。ここでコンパイルでき、リアルタイムでページに表示されます

3. プロジェクト実戦 (コアコード付き)

1. プロジェクトの紹介

WeChat 開発者ツールを使用して、最も基本的な小型プログラム「Taihang Elf」を作成します (WeChat で直接検索) 、この機(jī)能は表示のみを目的としており、商用機(jī)能はありません。

ホームページのレンダリングは次のとおりです

2. プロジェクト フレームワーク

「Taihang Elf」アプレットには、ホームページ インデックス、コンテンツ ページの検出、個(gè)人ホームページの設(shè)定、ログイン登録ページ、チェックイン ページ カレンダー、スキャン コード支払いページ Please

##1.index

1)index.js

var?api?=?require('../../utils/api.js')var?app?=?getApp()Page({
??data:?{
????lists:?[
??????{
????????'id':?'1',
????????'image':?'/img/1.jpg',
????????'title':?'太行領(lǐng)秀|?長(zhǎng)治·上黨郡?【深度了解長(zhǎng)治紅色旅游景點(diǎn)】',
????????'num':'304',
????????'state':'進(jìn)行中',
????????'time':?'4月21日?17:59',
????????'address':?'長(zhǎng)治市·潞州區(qū)'
????????
??????},
??????{
????????'id':?'2',
????????'image':?'/img/2.jpg',
????????'title':?'長(zhǎng)治·武鄉(xiāng)·革命圣地',
????????'num':'380',
????????'state':'已結(jié)束',
????????'time':?'4月15日?17:39',
????????'address':?'長(zhǎng)治市·武鄉(xiāng)縣'
??????},
??????{
????????'id':?'3',
????????'image':?'/img/3.jpg',
????????'title':?'沁源之美·靈空山',
????????'num':'500',
????????'state':'進(jìn)行中',
????????'time':?'2月04日?17:31',
????????'address':?'長(zhǎng)治市·沁源縣'
??????},
??????{
????????'id':?'4',
????????'image':?'/img/4.jpg',
????????'title':?'革命太行邀您“與世界對(duì)話”',
????????'num':'150',
????????'state':'進(jìn)行中',
????????'time':?'5月09日?17:21',
????????'address':?'長(zhǎng)治市·潞州區(qū)'
??????},
??????{
????????'id':?'5',
????????'image':?'/img/5.jpg',
????????'title':?'紅色太行?·?太行山革命區(qū)',
????????'num':'217',
????????'state':'進(jìn)行中',
????????'time':?'10月09日?16:59',
????????'address':?'長(zhǎng)治市·潞州區(qū)'
??????}
????],
????list:?[
??????{
????????'id':?'1',
????????'image':?'/img/1.jpg',
????????'title':?'太行領(lǐng)秀|?長(zhǎng)治·上黨郡?【深度了解長(zhǎng)治紅色旅游景點(diǎn)】',
????????'num':'304',
????????'state':'進(jìn)行中',
????????'time':?'10月09日?17:59',
????????'address':?'長(zhǎng)治市·潞州區(qū)'
??????},
??????{
????????'id':?'2',
????????'image':?'/img/2.jpg',
????????'title':?'長(zhǎng)治·武鄉(xiāng)·革命圣地',
????????'num':'380',
????????'state':'已結(jié)束',
????????'time':?'10月09日?17:39',
????????'address':?'長(zhǎng)治市·武鄉(xiāng)縣'
??????},
??????{
????????'id':?'3',
????????'image':?'/img/3.jpg',
????????'title':?'沁源之美·靈空山',
????????'num':'500',
????????'state':'進(jìn)行中',
????????'time':?'10月09日?17:31',
????????'address':?'長(zhǎng)治市·沁源縣'
??????},
??????{
????????'id':?'4',
????????'image':?'/img/4.jpg',
????????'title':?'革命太行邀您“與世界對(duì)話”',
????????'num':'150',
????????'state':'已結(jié)束',
????????'time':?'10月09日?17:21',
????????'address':?'長(zhǎng)治市·潞州區(qū)'
??????},
??????{
????????'id':?'5',
????????'image':?'/img/5.jpg',
????????'title':?'紅色太行?·?太行山革命區(qū)',
????????'num':'217',
????????'state':'進(jìn)行中',
????????'time':?'10月09日?16:59',
????????'address':?'長(zhǎng)治市·潞州區(qū)'
??????}
????],
????imgUrls:?[
????????'/img/26.jpg',
????????'/img/13.jpg',
????????'/img/28.jpg',
????????'/img/14.jpg',
????????'/img/24.jpg',
????????'/img/15.jpg',
????????'/img/27.jpg',
????????'/img/27.jpg',
????????'/img/16.jpg'
????]
??},
??onLoad?()?{
????var?that?=?this
????app.getSystemInfo(function(res)?{
????	that.setData({
????????	systemInfo:?res??????	})
????})

????that.setData({
????_api:?api????})

????this.getSwipers()
????this.pullUpLoad()
??},

??/**
???*
???*/
???getSwipers?()?{
?????api.get(api.SWIPERS)
???????.then(res?=>?{
?????????this.setData({
???????????swipers:?res.data.ads?????????})
???????})
???},

??scrollR:?function(e){
????this.setData({
??????lists:?this.data.lists.concat(this.data.list),
????});
??},

??onLoad:?function?(e)?{
????this.scrollR(e);
??},

??scroll:?function(e){
????this.scrollR(this.data.offset);
??},
??//頁(yè)面跳轉(zhuǎn)函數(shù)（wxml中找bindtap="go2detail）
??go2detail:?function(param){
????wx.navigateTo({
?
??????url:?'/pages/discovery/discovery',
?
??????})
??}})

2)index.json

{
??"usingComponents":?{}}

3)index.wxml

<scroll-view>
??<view>
????<swiper>
??????<block>
????????<swiper-item>
??????????<image></image>
????????</swiper-item>
??????</block>
????</swiper>
??</view>
??<view>
????<text></text>
????<text>太行精靈為你推薦</text>
??</view>
??<block>
????<view>
??????<view>
????????<image></image>
??????</view>

??????<view>
????????<view><text>{{list.title}}</text></view>
????????<view><view>{{list.state}}</view><view><text>{{list.num}}</text>人報(bào)名</view></view>
????????<view><text>{{list.address}}</text>|<text>{{list.time}}</text></view>
??????</view>?
????</view>
??</block></scroll-view><include></include>

4)index.wxss

/**index.wxss**/page{
	height:?100%;
	background-color:?#efeff4;}scroll-view{
??height:?100%;}.swiper{
??top:?0px;
??width:?100%;
??height:?240px;	}.swiper?swiper{
	height:?240px;}.slide-image{
??width:?100%;}.mobi_title{
	font-size:?15px;
	color:?#777;
??line-height:?110%;
??font-weight:?normal;
	width:?100%;
??padding:?10px;
??background-color:?#f3f3f3;
??position:?relative;}.mobi_icon{
	padding:?0px?1.5px;
??border-radius:?1.5px;
??background-color:?#ff7777;
??position:?relative;
??margin-right:?5px;}/*list*/.list{
	overflow:?hidden;
	width:?100%;
	padding:?0?20px?0?0;
	border-top:?1px?solid?#eeeeee;
	background-color:?#fff;
??margin-bottom:?15px;}.list-img{
??position:?relative;
	float:?left;
	width:?120px;}.list-img?.video-img{
	width:?120px;
	height:?120px;}.list-detail{
	position:?absolute;
??margin-top:?15px;
??margin-left:?135px;
??margin-right:?10px;}.list-title?text{
	word-break:?break-all;
??text-overflow:?ellipsis;
??display:?-webkit-box;
??-webkit-box-orient:?vertical;
??-webkit-line-clamp:?2;
??overflow:?hidden;
	font-size:?17px;
??color:?#333;
	font-weight:?bold;
??line-height:?120%;}.list-tag?view.state{
????display:?block;
????font-size:?11px;
????color:?#81aaf7;
????width:?50px;
????padding:?2px;
????border:?1px?solid?#93b9ff;
????border-radius:?2px;
????text-align:?center;
????margin-top:?10px;
		float:?left;}.list-tag?.join{
	font-size:?13px;
??line-height:?120%;
??color:?#bbb;
??position:?absolute;
??display:?inline;
??margin:?10px?0?0?20px;}.list-tag?.list-num{
	font-size:?16px;
??color:?#ff6666;}.list-info{
	font-size:?13px;
??color:?#bbb;
??line-height:?110%;
??font-weight:?normal;
	margin-top:?40px;}

2.app.json

{
??"pages":?[
????"pages/index/index",
????"pages/setting/setting",
????"pages/login/login",
????"pages/please/please",
????"pages/Calendar/Calendar",
????"pages/discovery/discovery"
??],
??"window":?{
????"backgroundTextStyle":?"light",
????"navigationBarBackgroundColor":?"#fff",
????"navigationBarTitleText":?"太行精靈",
????"navigationBarTextStyle":?"black"
??},
??"tabBar":?{
????"color":?"#a0a0a0",
????"selectedColor":?"#ec5c30",
????"backgroundColor":?"#f2f2f2",
????"borderStyle":?"white",
????"list":?[
??????{
????????"pagePath":?"pages/index/index",
????????"text":?"首頁(yè)",
????????"iconPath":?"img/shouye.png",
????????"selectedIconPath":?"img/shouye1.png"
??????},
??????{
????????"pagePath":?"pages/setting/setting",
????????"text":?"我的",
????????"iconPath":?"img/me.png",
????????"selectedIconPath":?"img/me1.png"
??????}
????]??},
??"debug":?true,
??"sitemapLocation":?"sitemap.json"}

上記のコードは參考用です。次のドキュメントを參照してください。 リンク:
WeChat ミニ プログラム公式ドキュメント
ミニ プログラム フレームワーク

# 3. オンライン プロジェクト

---

WeChat パブリック プラットフォーム、登録するミニ プログラムを入力してください

登録が完了すると、AppID が作成されます。前のテスト番號(hào)を新しい ID。WeChat 開発者ツールを再度開き、エリアを編集します。アップロード ボタン

が上部に表示されます。アップロードが成功したら、WeChat パブリック プラットフォームに入ると、開発バージョンが表示されますレビューのために送信します。30 分ほどかかります。レビューが合格したことを通知した後、レビュー版を送信します。閲覧には約 10 分かかります。獨(dú)自のオンライン ミニ プログラムにアクセスしてください。

【関連する學(xué)習(xí)の推奨事項(xiàng):

小さなプログラム開発チュートリアル

】

以上がゼロベースの WeChat アプレット開発と詳細(xì)な例の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。