ミニプログラムの開発プロセス例を共有する

WeChat ミニ プログラムは、正式にリリースされる前にすぐにみんなの議論の焦点になったため、プライベート ベータ版の招待状を受け取った場合のみミニ プログラムの開発プロセスを体験できると思われるかもしれません。実は、以下のようなことは誰もが経験することができるので、皆さんも一緒に理解していきましょう。

WeChat Web 開発者ツールをダウンロードします

まず第一に、WeChat は小規模プログラム用の独自の統合開発ツールを提供します。このページからダウンロードするだけです:

ダウンロードが完了したら、開発者ツールを開きます。 QR コードのログイン インターフェイスが表示されます。 WeChat QR コードを使用してログインすると、開発者ツールがデフォルト プロジェクトの作成に役立ちます。プロジェクトのファイル構造は次のとおりです:

すべてのコード編集と実行プレビューはこの開発者ツールで行うことができます。行為。次に、WeChat アプレットのプロジェクト構造を見てみましょう。

プロジェクト構造

上記の通り、ルートディレクトリにはapp.js、app.json、app.wxssの3つのファイルがあります。 このうち、app.jsはプログラムのメイン入口のスクリプトファイル、app.jsonはグローバル設定ファイル、app.wxssはミニプログラムのスタイルシートファイルです。

まず app.json を見てみましょう:

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

この設定ファイルは、2 つのノードを定義します。page はミニ プログラムのすべてのページに対応するパスであり、window はミニ プログラム ウィンドウの設定情報です。

スタイル ファイル app.wxss:

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

を見てみましょう

定義されている特定のスタイルを詳しく調べる必要はありません。最初にプロジェクトの構造を理解する必要があるだけです。次に、プログラムの入り口である app.js を見てみましょう:

//app.js App({
  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 オブジェクト が初期化され、onLaunch、getUserInfo、globalData の 3 つのメソッドが定義されています。 まず onLaunch を見てみましょう:

onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

}

まず、wx.getStorageSync メソッドはログをキーとしてローカル キャッシュ データを取得します。 このメソッドに渡されるログには特別な意味はなく、使用するキャッシュ データを表すためにのみ使用されます。 このメカニズムは、iOS の NSUserDefaults に似ていると理解できます。

次に、現在の日付をこのキャッシュ配列 logs.unshift(Date.now()) に挿入します。 最後に、setStorageSync メソッドを呼び出して、新しいキャッシュ コンテンツをローカル キャッシュに書き込みます。

onLaunch メソッドはアプレットのライフサイクル メソッドであるため、アプレットの起動時に呼び出され、現在の起動日が記録されてローカル キャッシュに書き込まれます。 そうです、onLaunch メソッド全体がまさにそれを行います。

getUserInfo メソッドを見てみましょう。WeChat プラットフォームで wx.login 関数と wx.getUserInfo 関数を呼び出して現在のユーザーのログイン情報を取得し、それをコールバック関数 cb:

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)
            }
          })
        }
      })
    }

}

の最初の if に渡します。判断 if( this.globalData.userInfo) 今のところ詳しく調べる必要はありません。else 部分を見てください。

页面结构

了解完根目录的几个文件， 咱们再来看看页面文件, 正如咱们刚开始截图中看到的项目结构：

所有的页面都在 pages 文件夹中。 我们这个示例工程中有两个页面 index 和 logs。 还记得我们前面在 app.json 看到的页面配置吗：

"pages":[ "pages/index/index", "pages/logs/logs" ]

正好对应上咱们现在看到的两个目录， 还要记得一点， pages 数组中的第一个元素会作为我们小程序的主页。 切记，index 页面之所以是首页，是因为它是 pages 里面的第一个元素， 而不是因为它的名称是 index。

我们来看看 index 页面的构成， index.js, index.wxml, index.wxss。 index.js 是页面的脚本文件, index.wxml 是页面的 UI 文件， index.wxss 是页面的样式文件。

先看一下 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
      })
    })
  }
})

getApp() 方法获取我们的 app 实例。 然后在看 onLoad 方法， 使用我们刚才提到的 getUserInfo 方法获取用户信息，并设置到 data 属性中。

bindViewTap 方法会绑定一个事件，这个事件调用 wx.navigateTo 方法。 这个方法其实就是页面跳转，从代码中也不难看出，跳转到了 logs 页面。

脚本文件就这些内容了，咱们继续再来看看 UI 文件， index.wxml:

<!-- <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view> -->

这个就是小程序 index 页面的 UI 文件了，其实就是微信平台定义了一系列组件，最外层是 454c904013ba956423e0e11fb40cf036 还记得 container 么？ 我们在最外层的 app.wxss 定义了它的样式。 它里面包含了两个 View。先来看看第一个：

<!-- <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> -->

首先 bindtap="bindViewTap" 给这个 View 绑定了一个点击事件，也就是我们前面 index.js 对应的这个方法，用户点击这个 View 就会跳转到 logs 页面上。 然后这个 View 里面包含了一个 Image 和 Text， Image 的 src 属性设置为 userInfo.avatarUrl， 代表当前用户的头像， Text 中使用 userInfo.nickName， 代表当前用户的昵称。

这样， index 页面的整体逻辑就都完成了， 还有一个 index.wxss 样式文件，这个咱们就先略过。

再来看看第二个视图：

<!-- <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> -->

motto 其实就是我们在 index.js 中定义的一个属性：

data: {
    motto: 'Hello World',
    userInfo: {}
 }

它会在页面上显示一个 Hello World。

现在，我们切换到调试界面， 就可以看到小程序的主页了， 和我们刚刚描述的 UI 完全一样吧：

这里的用户头像和昵称是动态从你的登录状态中取到的。

然后我们在这里点击用户的头像，就会跳转到 logs 页面， 列出你每次登录小程序的时间点。

ミニプログラムのアップロード

ここまでWeChatミニプログラムの基本的な開発プロセスを紹介しました。紹介していないログページもありますが、基本的な考え方はインデックスページと同じです。詳細には立ち入りません。 小さなプログラムを開発した後、それをどこにデプロイする必要があるでしょうか? 誰もが同じ悩みを抱えていると思います。 答えも非常に簡単です。プロジェクトタブに切り替えて、アップロードボタンをクリックします:

私の環境には内部テストアカウントがないため、アップロード領域には、プロジェクトがAppID テストアカウントがある場合は、AppID が表示されます。 現在、ミニ プログラムをアップロードできるのは内部ベータ アカウントのみです。それが唯一の違いです。ベータ アカウントがない場合はアップロードできませんが、ローカルで開発してテストすることはできます。

このミニプログラムのアップロード方法は少し違うように感じるかもしれません。 誰もが通常理解しているように、Web アプリでは通常、独自のサーバーを構築して保守する必要があります。 ミニプログラムのホスティング方法は、実際にはネイティブアプリの開発方法とほぼ同じです。 フロントエンドには Web テクノロジーに似た js が使用されていますが、その核となる考え方は従来の Web アプリとは異なります。 React Native のような実装に似ています。

終わり

今回は皆さんと一緒に、最も単純な小さなプログラムの全体構造と開発の考え方を最初から最後まで完全に体験してきました。個人的には、適切なエントリーポイントを見つけることができれば、ミニプログラムプラットフォームでまだ良い機会を見つけることができると感じています。しかし、私が言いたいのは、ミニプログラムの出現がすぐに誰かを転覆させるとは思わないでください、そして、ミニプログラムが大きなものになるのは難しいというインターネット上の人々の意見を聞く必要はなく、ミニプログラムが存在しないと考える必要はありません。チャンス。 自分の得意なこと、ユーザーが必要としているものを見つければ、良い商品ができるかもしれません。 今回も基本的な技術レビューをしていきたいと思いますので、お役に立てれば幸いです。

【関連おすすめ】

1. ミニプログラム社内テスト申請チュートリアル

2. WeChatミニプログラム申請アカウント開発体験

3. WeChatミニプログラムの作成に関するチュートリアルゼロから

以上がミニプログラムの開発プロセス例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。