ミニプログラムは初心者にとっては、公式ドキュメントを読めば比較的完成度の高いミニプログラムを作ることができるので、簡単に始められ、機能も簡単です。ミニプログラムはますます人気があり、商業的価値も高まっています。この記事では、WeChat アプレットを模倣した Hema Xiansheng について説明します。
プロジェクトの概要
Hemaは、アリババがオフラインスーパーマーケット向けに完全に再構築した新しい小売業態であり、非常に人気があります。
プロジェクト関数
* 用户信息注册
* 首页几个轮播和界面交互
* 分类商品管理购买
* 购物车界面交互及其操作
* 个人信息界面
ログイン後にコピー
ログイン後にコピー
ミニプログラム設計プロセス
初心者にとっては、公式ドキュメントを読んで始めるのが簡単です。手軽に始められ、機能も簡単に実装できるからこそ、ミニプログラムはますます普及し、商品価値も高まっています。
1. プロジェクトツールとドキュメント
WeChat Web 開発者ツール: WeChat ミニ プログラム公式 Web サイト これは比較的使いやすいエディターで、ミニ プログラムの編集に非常に便利です。
開発ドキュメント: WeChat ミニ プログラム コレクションとシークレット これを使用して、WeChat ミニ プログラムの API、コンポーネント、フレームワークなどを検索します。
アイコンライブラリ: Iconfont-Alibaba Vector Icon Library 必要な小さなアイコンがほぼすべて見つかり、非常に便利です。
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. ホームページのカルーセル画像
カルーセルには、一般的な水平ポスター画像表示、水平および垂直商品リスト表示、見出し情報ボックスの回転
siwper コンポーネントなど、いくつかの形式があります。
<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>ログイン後にコピー
ログイン後にコピー
など、水平方向のポスター画像表示の非常に優れた実装です。ただし、水平方向のスライドでは他の詳細に注意を払う必要があります
まず、scroll-x-="true" を swiper コンポーネントに追加します
次に、カルーセルの子要素の親コンテナ: 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。 Indexインターフェースで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 Storage を通じてローカルに配置できます
3. ショッピング カートの操作
ショッピング カート内の操作は、必要なものは加算と減算だけです。ボタンの表示やバインドタップなどの操作で商品情報を修正し、ショッピングカート内の商品数を減らす
4. weui フレームワークの紹介
グローバル CSS スタイルで追加された CSS はすべてのページに適用されるため、weui を導入でき、いくつかのインターフェイスを作成するのに非常に便利です
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,
})
},ログイン後にコピー
ログイン後にコピー
概要
WeChat アプレットのコンポーネント、 API は非常に強力であり、継続的な探索、継続的な学習、より多くのドキュメントの読み取りが必要です
iconfont esay -moc weui などの効果的なリソースを上手に活用してくださいhttps://github.com/fishman17/... 詳細なコメントが含まれています
github: https://github .com/fishman17
メール: 734583898@qq.com
最後に、このプロジェクトが気に入ったら、スターを付けてください。ありがとうございます。
プロジェクトの概要
Hema Xianshengを真似ていくつかの機能を実現します。
Hema Freshは、アリババがオフラインスーパーマーケット向けに完全に再構築した新しい小売フォーマットです。非常に人気があります
プロジェクト機能
* 用户信息注册
* 首页几个轮播和界面交互
* 分类商品管理购买
* 购物车界面交互及其操作
* 个人信息界面
ログイン後にコピー
ログイン後にコピー
ミニプログラム設計プロセス
初心者にとっては、公式ドキュメントをよく読めば、簡単に始められ、機能も簡単なので、最初は比較的完成度の高い小さなプログラムを作ることができます。ますます人気が高まっており、商品価値も高まっています。
1. プロジェクトツールとドキュメント
WeChat Web 開発者ツール: WeChat ミニ プログラム公式 Web サイト これは比較的使いやすいエディターで、ミニ プログラムの編集に非常に便利です。
開発ドキュメント: WeChat ミニ プログラム コレクションとシークレット これを使用して、WeChat ミニ プログラムの API、コンポーネント、フレームワークなどを検索します。
アイコンライブラリ: Iconfont-Alibaba Vector Icon Library 必要な小さなアイコンがほぼすべて見つかり、非常に便利です。
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" //购物车
],
ログイン後にコピー
ログイン後にコピー
siwper コンポーネントなど、いくつかの形式があります。
<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>ログイン後にコピー
ログイン後にコピー
まず、scroll-x-="true" を swiper コンポーネントに追加します
次に、カルーセルの子要素の親コンテナ: 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>ログイン後にコピー
ログイン後にコピー
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 Storage を通じてローカルに配置できます
3. ショッピング カートの操作 ショッピング カート内の操作は、必要なものは加算と減算だけです。ボタンの表示やバインドタップなどの操作で商品情報を修正し、ショッピングカート内の商品数を減らす 4. weui フレームワークの紹介
グローバル CSS スタイルで追加された CSS はすべてのページに適用されるため、weui を導入でき、いくつかのインターフェイスを作成するのに非常に便利です
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,
})
},ログイン後にコピー
ログイン後にコピー
概要
WeChat アプレットのコンポーネント、 API は非常に強力であり、継続的な探索、継続的な学習、より多くのドキュメントの読み取りが必要です
iconfont esay -moc weui などの効果的なリソースを上手に活用してください関連する推奨事項:
WeChatミニプログラム開発の導入例
WeChatミニプログラムのビデオ、音楽、画像コンポーネントの詳細な説明
WeChatミニプログラムがWeChat演習ステップを取得する方法のケーススタディ(写真)
以上がWeChatミニプログラム - 模倣Hema Fresh Foodの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
