WeChat ミニプログラム開発チュートリアルマニュアル文書の概要

WeChat ミニプログラム開発チュートリアルドキュメント

WeChat ミニプログラムとは? WeChat ミニプログラムの開発方法 ? WeChat ミニプログラム開発のチュートリアルとは何ですか? このチュートリアルでは、WeChat アプレット自体と公式 WeChat-WeChat アプレット開発ツールを組み合わせて、段階的に WeChat アプレットを作成し、その実際の効果をプレビューします。携帯電話上のアプレット。このミニプログラムのホームページには、ウェルカムメッセージと現在のユーザーの WeChat アバターが表示されます。アバターをクリックすると、新しく開いたページで現在のミニプログラムの起動ログが表示されます。ソースコードをダウンロードします。

ステップ 1. 次の AppID# を取得します。 WeChat アプレット

## https://mp.weixin.qq.com にログインすると、Web サイトの「設定」-「開発者設定」で WeChat アプレットの AppID を確認できます。サービスアカウントまたはサブスクリプションアカウントの AppID を使用します。

WeChat ミニプログラム開発チュートリアルマニュアル文書の概要

注: 携帯電話でミニプログラムを体験するために、登録時にバインドされた管理者の WeChat ID を使用しない場合は、「バインド」も操作する必要があります。開発者"。つまり、「ユーザー ID」-「開発者」モジュールで、ミニプログラムを体験するために必要な WeChat ID をバインドします。デフォルトでは、このチュートリアルでは管理者の WeChat ID を使用してアカウントとエクスペリエンスを登録します。

ステップ 2. プロジェクトの作成

ミニプログラムの作成とコード編集を完了するには、

開発者ツールを使用する必要があります。

開発者ツールがインストールされたら、WeChat を開いて QR コードをスキャンしてログインします。「プロジェクト」の作成を選択し、上記で取得したAppIDを入力し、「My First Project」などのローカルプロジェクト名（ミニプログラム名ではありません）を設定し、コードが保存されるディレクトリとしてローカルフォルダーを選択し、クリックするだけです。 "新しいプロジェクト"。

初心者が WeChat アプレットの基本的なコード構造を理解しやすくするために、作成プロセス中に、選択したローカルフォルダーが空のフォルダーである場合、開発者ツールはクイックファイルを作成する必要があるかどうかを確認するメッセージを表示します。プロジェクトを開始します。「はい」を選択すると、開発者ツールが開発ディレクトリに簡単なデモを生成するのに役立ちます。

WeChat ミニプログラム開発チュートリアルマニュアル文書の概要

プロジェクトが正常に作成されたら、プロジェクトをクリックして入力し、完全な開発者ツールインターフェイスを表示します。左側のナビゲーションをクリックして、「編集」および「デバッグ」でコードを表示および編集します。コードをテストして、 WeChat クライアント上でミニプログラムの効果をシミュレートし、「プロジェクト」では携帯電話に送信して実際の効果をプレビューできます。

ステップ 3. コードを記述します

ミニプログラムインスタンスを作成します

WeChat ミニプログラム開発者ツールの左側のナビゲーションで [編集] をクリックします。は初期化されており、いくつかの簡単なコードファイルが含まれています。 WeChat アプレットのコードファイルのうち、app.js、app.json、app.wxss の 3 つのファイルは必須であり、通常はデフォルトで生成されます。このうち、.js サフィックスはスクリプトファイル、.json サフィックスは設定ファイル、.wxss サフィックスは、スタイルシートファイル。 WeChat ミニプログラムはこれらのファイルを読み取り、ミニプログラムインスタンスを生成します。

これら 3 つのファイルの機能を簡単に理解して、変更を容易にし、独自の WeChat アプレットを最初から開発してみましょう。

app.js はミニプログラムのスクリプトコードです。アプレットのライフサイクル関数を監視および処理し、このファイルでグローバル変数を宣言できます。この例では、ローカルデータの同期ストレージや同期読み取りなど、フレームワークによって提供される豊富な API を呼び出します。利用可能な API の詳細については、API ドキュメントを参照してください。

//app.jsApp({
  onLaunch: function () {    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){    var that = this;    if(this.globalData.userInfo){      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})

ログイン後にコピー

app.json は、WeChat アプレット全体のグローバル構成です。このファイルでは、ミニプログラムがどのページで構成されるかを構成し、ミニプログラムのウィンドウの背景色を構成し、ナビゲーションバーのスタイルを構成し、デフォルトのタイトルを構成できます。このファイルにはコメントを追加できないことに注意してください。設定可能な項目の詳細については、設定の詳細を参照してください。

{  "pages":[    "pages/index/index",    "pages/logs/logs"
  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "WeChat",    "navigationBarTextStyle":"black"
  }
}

ログイン後にコピー

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

/**app.wxss**/.container {  height: 100%;  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-between;  padding: 200rpx 0;  box-sizing: border-box;
}

ログイン後にコピー

ページの作成

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

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。

index.wxml 是页面的结构文件：

<!--index.wxml--><view>
  <view>
    <image></image>
    <text>{{userInfo.nickName}}</text>
  </view>
  <view>
    <text>{{motto}}</text>
  </view></view>

ログイン後にコピー

本例中使用了<view></view>、<image></image>、<text></text>来搭建页面结构，绑定数据和交互处理函数。

index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

//index.js//获取应用实例var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {    console.log('onLoad')    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

ログイン後にコピー

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 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。

logs 的页面结构

<!--logs.wxml--><view>
  <block>
    <text>{{index + 1}}. {{log}}</text>
  </block></view>

ログイン後にコピー

logs 页面使用 <block></block> 控制标签来组织代码，在 <block></block> 上使用 wx:for 绑定 logs 数据，并将 logs 数据循环展开节点。

//logs.jsvar 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))
      })
    })
  }
})

ログイン後にコピー

该微信小程序测试的运行结果如下：

小程序运行结果