序文

Hema Xiansheng アプレットの模倣 (ソースコード + 実行可能プログラム付き)

学習するコース設計として使用できる、非常に完成度の高いオープンソースプロジェクトです。

このシステムの完全なソースコードは記事の最後にあります。ご自身で入手してください。

プロジェクト概要

Hema Xiansheng を模倣し、いくつかの機能を実現します。

Hema Xiansheng は、アリババがオフラインスーパーマーケット向けに完全に再構築した新しい小売業態で、非常に人気があります。

ここに画像の説明を挿入

プロジェクト機能

* 用户信息注册
* 首页几个轮播和界面交互
* 分类商品管理购买
* 购物车界面交互及其操作
* 个人信息界面

小さなプログラムの設計プロセス

小さなプログラムは使いやすい初心者でも公式ドキュメントを読めば、比較的完成度の高い小さなプログラムを作ることができる使いやすさとシンプルな機能実現だからこそ、小さなプログラムが人気となり、商用化される価値も高まり、大きくなっています。

1. プロジェクトのツールとドキュメント

WeChat Web 開発者ツール: WeChat アプレット公式 Web サイト比較的使いやすいエディタで、小規模なプログラム編集に非常に便利です。
開発ドキュメント: WeChat ミニプログラムコレクションチートこれを使用して、WeChat ミニプログラムの API、コンポーネント、フレームワークなどを検索します。
アイコンライブラリ: Iconfont-Alibaba ベクターアイコンライブラリこれは、必要なほとんどすべての小さなアイコンを見つけるのに非常に便利です。
Easy Mork: easy-mock は、JSON データを取得するためのバックグラウンドシミュレーションに使用されます。
個人情報インターフェースなどのweuiフレームワークの導入は、weuiを使用すると迅速かつ便利に行うことができます

2. プロジェクト開発

WeChat アプレット開発は従来の H5 開発とはやや異なり、ピットを踏むのは簡単です。
アプレットは MVVM フレームワークに基づいています。インターフェイスを更新するには、データバインディングを合理的に使用することが非常に重要です。
開発中に一度に書き続けないでください。ドキュメントをよく見てください。誤って記述したことがわかります。ネイティブのコンポーネント。。

3. プロジェクトのリリース

開発プラットフォームに入り、プロジェクト情報を登録 -> エディターでバージョンをアップロード -> 開発バージョンでレビュー用に送信を選択 -> レビューに合格 -> プロジェクトがオンラインになります

一部の機能の分析

まずプロジェクトディレクトリを見てください

    "pages": [
     "pages/index/index",  //主界面
      "pages/person/person", //个人界面
     "pages/classify/classify", //分类商品界面
     "pages/class/myFruits/myFruits", //水果商店
     "pages/class/myMeat/myMeat", //肉类食品商店
     "pages/myCart/myCart"    //购物车
     ],

1. ホームページのカルーセル

カルーセルには、一般的な横型のポスター画像表示、横型および縦型の商品リスト表示など、いくつかの形式がありますが、見出し情報ボックス回転シウ
パーコンポーネントは、次のような横型ポスター画像表示を実現するのに非常に優れています。

        <swiper indicator-dots="{
   
   {indicatorDots}}" autoplay="{
   
   {autoplay}}" interval="{
   
   {interval}}" duration="{
   
   {duration}}">
            <block wx:for="{
   
   {imgUrls}}" wx:key="index">
                <swiper-item>
                    <image src="{
   
   {item}}" class="slide-image"  />
                </swiper-item>
            </block>
        </swiper>

ただし、横方向のスライドは他の細かい点にも注意する必要があり、
まず swiper コンポーネントにscroll-x-="true"を追加し
、子の親コンテナにdisplay: inline-block;white-space:nowrap;を設定します。カルーセルの要素。

見出し情報ボックスの変換には上下の回転が採用され、スクロールビューのネストされたスワイパーを使用して完了します。

    <scroll-view scroll-y-="true"  >
                <swiper autoplay="{
   
   {autoplay}}" interval="{
   
   {interval1}}" duration="{
   
   {duration}}" vertical="true">
                    <block wx:for="{
   
   {something}}" wx:key="index">
                         //内容 
                    </block>
                </swiper>
    </scroll-view>

2. 分類された商品の管理

まず、インデックスインターフェイスの onLoad ライフサイクル関数を使用して、
easy-moc を通じてバックグラウンドデータを取得し、必要な情報をグローバル globalData に送信します。

wx.request({
      url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline',
      complete: res => {
        this.globalData.classifyList = res.data;
      },
    })

データ処理においては、グローバルシステムに載せる必要のある全商品情報やショッピングカート内の商品情報など、何がグローバル情報で何がローカル情報なのかを整理する必要があります。現在のインターフェイスの状態は、通常、現在のインターフェイスのデータに配置されます。

また、生年月日やアカウント情報などの一部の個人情報は、wx.setStorage および wx.getStorage を通じてローカルストレージに保存できます。

3. ショッピングカートの操作

ショッピングカート内の操作は足したり引いたりするだけで、どこが無理なのかを継続的にデバッグする必要があるボタンの表示やバインドタップなどの操作により、商品情報の修正やステータスの処理が
可能ショッピングカートの。

たとえば、ショッピングカート内の商品の数を減らします。

reduceItems: function (e) {
    let carts = app.globalData.carts;    //获取购物车的信息
    let classifyList = app.globalData.classifyList;  //获取商品的信息
    for (let key of carts) {                        //遍历购物车数组
      if (key.id === e.target.dataset.id) {         //通过WXML中 view里面的bind-id传过来的参数进行查找
        key.cartSelected = true;
        if (key.num === 1) {                  //如果数量为1还要减
          key.num--;
          key.cartSelected = false;           //购物车不选中
          key.selected = false;               //商品中不选中
          app.globalData.carts = carts.filter((item) => {    //进行购物车中商品剔除
            return item.id != e.target.dataset.id;
          })
        } else {
          key.num--;
        }
      }
    }
    let num = 0;                                 //实时更新购物车小计界面显示
    let totalPrice = 0;
    for (let key of carts) {
      if (key.cartSelected) {
        num += key.num;
        totalPrice += key.num * key.price;
      }
    }
    this.setData({                          //通过setData进行当前页面Data数据管理
      cart: app.globalData.carts,
      cartTotal: num,
      cartTotalPrice: totalPrice,
    })
  },

4. Weui フレームワークの紹介

グローバルCSSスタイルで追加されたCSSはすべてのページに適しているため、weuiを導入でき、いくつかのインターフェイスを作成するのに非常に便利です

@import './styles/weui.wxss';

要約する

WeChat アプレットのコンポーネントである API は非常に強力であり、継続的な調査、継続的な学習が必要です。さらにドキュメントを読む
iconfont esay-moc weui などのリソースを有効に活用するのが得意です。
ページのカットには注意し、エラスティックレイアウトなどのレイアウト方法を上手に使いましょう。アプレットの rpx は非常に使いやすいです。
コードを 1 つの頭脳だけで書かないでください。関数が再利用可能な場合は、コードが保守しやすく読みやすいように、抽象化してカプセル化する必要があります。

ソースコードの入手方法：

完全なソースコードが必要な友達は、「いいね」+ブックマーク+コメントをして、プライベートメッセージを送っていただければ幸いです~

Hema Xiansheng アプレットの模倣 (ソース コード + 実行可能プログラム付き)

序文