WeChat ミニプログラム開発を始めるにはどうすればよいですか? （写真と文章で詳しく解説）

WeChat ミニ プログラム開発を始めるにはどうすればよいですか?この記事では、WeChat アプレット開発の入門チュートリアルを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

スクリプトを受信するプログラムを開発するときは、まずその公式ドキュメントを見つける必要があります。公式ドキュメントがあります。

WeChat アプレット開発ドキュメントのリンクは次のとおりです: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html、次に示すように:

WeChat ミニ プログラム開発に関する公式ドキュメントはすべてここにあります。

ドキュメントの場所がわかったので、WeChat アプレットの開発方法を紹介しましょう:

ステップ 1: WeChat アプレット開発者ツールをダウンロードしてインストールします

、ダウンロード パス:

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

ダウンロード インターフェイスに入った後、ご使用のオペレーティング システムに応じて対応するリンクを選択してダウンロードし、ダウンロードが完了したらインストールします。

第 2 ステップ: ログイン ツール

開発者ツールがインストールされたら、開くことができます。初めて開くときは、QR をスキャンする必要があります以下に示すように、WeChat にログインするためのコード。携帯電話の WeChat でスキャンして、ログインを確認するだけです。

ステップ 3: プロジェクトを作成する

ステップ 1: ログインに成功すると、次のようなインターフェイスが表示されます。下の図 「 」記号で、ステップ 2

ステップ 2: プロジェクト情報を入力します。手順については、下の図を参照してください。入力が完了したら、 をクリックします。 「新規」でプロジェクト作成プロセスを完了します。 (既存のプロジェクトの場合、つまりプロジェクトのコード ファイルが既に存在する場合は、[プロジェクトのインポート] をクリックして既存のプロジェクトをインポートしてください。)

新しく作成されたプロジェクトは、デフォルトでコード構造を示すデモ コードを生成します。インターフェイスは次のとおりです:

ステップ 4: プロジェクト コード構造の説明

#このプロジェクトが初期化されており、いくつかの簡単なコード ファイルが含まれていることがわかります。最も重要で不可欠なものは、app.js、app.json、および app.wxss です。このうち、.js

サフィックスはスクリプト ファイル、

.json サフィックスは設定ファイル、

.wxss

サフィックスは、スタイルシートファイル。 WeChat アプレットはこれらのファイルを読み取り、アプレット インスタンスを生成します。 これら 3 つのファイルの機能を簡単に理解して、変更を容易にし、独自の WeChat アプレットを最初から開発してみましょう。 1. app.js はミニプログラムのスクリプトコードです。アプレットのライフサイクル関数を監視および処理し、このファイルでグローバル変数を宣言できます。この例では、ローカル データの同期ストレージや同期読み取りなど、フレームワークによって提供される豊富な API を呼び出します。 2. app.json はアプレット全体のグローバル構成です。このファイルでは、ミニ プログラムがどのページで構成されるかを構成し、ミニ プログラムのウィンドウの背景色を構成し、ナビゲーション バーのスタイルを構成し、デフォルトのタイトルを構成できます。このファイルにはコメントを追加できないことに注意してください。

3. app.wxss は、アプレット全体のパブリック スタイル シートです。 app.wxss で宣言されたスタイル ルールをページ コンポーネントの class 属性で直接使用できます。

サンプル プログラムのコードには 2 つのフォルダーがあることに気付きました。1 つは page で、もう 1 つは utils です。utils は一般的なツール クラス メソッドのフォルダーで、pages はすべてのページが保存される場所です。フォルダ。このページに焦点を当てましょう。

ステップ 5: ミニ プログラム ページ ファイルの構成

この例には、インデックス ページとログ ページの 2 つのページがあります。つまり、ウェルカム ページとミニ プログラム起動ログの表示ページであり、両方ともページ ディレクトリにあります。 WeChat ミニ プログラムの各ページの [パス ページ名] は app.json のページに記述する必要があり、ページ内の最初のページがミニ プログラムのホームページになります。

各ミニ プログラム ページは、同じパスにある同じ名前の 4 つの異なるサフィックス ファイル (index.js、index.wxml、index.wxss、index.json など) で構成されます。サフィックス .js の付いたファイルはスクリプト ファイル、サフィックス .json の付いたファイルは構成ファイル、サフィックス .wxss の付いたファイルはスタイル シートです。ファイル、および .wxml 接尾辞 が付いたファイルはページ構造ファイルです。

index.wxml はページの構造ファイルです:

<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>

この例では、<view>, 使用される <image>、<text>、、およびその他の コンポーネントページ構造、バインディングデータ、対話型処理機能を構築します。

index.js はページのスクリプト ファイルです。このファイルでは、ページのライフサイクル関数の監視と処理、ミニ プログラム インスタンスの取得、データの宣言と処理、ページ インタラクション イベントへの応答、等

//index.js
//获取应用实例
const app = getApp()

Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})

index.wxss はページのスタイル シートです:

/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}

.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}

.userinfo-nickname {
color: #aaa;
}

.usermotto {
margin-top: 200px;
}

ページのスタイル シートは必要ありません。ページ スタイル シートがある場合、ページのスタイル シートのスタイル ルールは app.wxss のスタイル ルールにカスケードされます。ページのスタイル シートを指定しない場合は、ページの構造ファイルの app.wxss で指定されたスタイル ルールを直接使用することもできます。

index.json はページの構成ファイルです:

ページの構成ファイルもオプションです。ページ構成ファイルがある場合、ページ内の構成項目は、app.json のウィンドウ内の同じ構成項目を上書きします。ページ構成ファイルが指定されていない場合は、app.json のデフォルト構成がページで直接使用されます。

ログのページ構造

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for-items="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

ログ ページでは、## でコードを整理するために <block/> 制御タグを使用します。 #< block/> で wx:for-items を使用して logs データをバインドし、logs をループしますノードを展開するためのデータ

//logs.js
var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})

実行結果は次のとおりです:

ステップ 5: モバイル プレビュー

開発ツールの上部ツールをクリック列の「プレビュー」をクリックしてプレビューQRコードを生成し、WeChatでコードをスキャンした後、WeChatクライアントでエクスペリエンスをプレビューできます。

以上がWeChatミニプログラムのフロントエンド開発の基本的な流れですが、実際に内容が更新可能なミニプログラムを作るには、フロントエンド開発だけでも十分です。それだけでは十分ではなく、バックエンドの開発も必要です。バックエンド開発は基本的に Web 開発と同じです。Java、php、nodejs などの任意の言語を使用できます。注意すべき点は、ミニ プログラムのバックエンド サーバーは https プロトコルである必要があることです。クラウドサーバーとバックエンドの購入サーバーはhttpsサービスに設定されています。

この記事は、https://www.cnblogs.com/niejunchan/p/5904365.html

から転載されています。推奨: 「

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

以上がWeChat ミニプログラム開発を始めるにはどうすればよいですか? （写真と文章で詳しく解説）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。