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

ホームページ

WeChat アプレット

ミニプログラム開発

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

青灯夜游

Apr 03, 2020 am 09:43 AM

WeChat アプレット

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>
<view>
<button> 获取头像昵称 </button>
<block>
<image></image>
<text>{{userInfo.nickName}}</text>
</block>
</view>
<view>
<text>{{motto}}</text>
</view>
</view>

この例では、<view></view>, 使用される <image></image>、<text></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>
  <block>
    <text>{{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サービスに設定されています。