小さなプログラム プロジェクトの戦闘シリーズでは、独自の小さなプログラムを作成する方法を説明します。
1. アプレットと API の作成と構成
更新予定: 2. ホームページ カルーセルと製品検索
の実現更新予定: 3. ホームページの 9 方角グリッド エントリと製品レコメンデーションの
実現更新予定: 4. マーキーの実現お知らせとユーザー位置取得
更新予定: 5. 商品分類と商品詳細の
実現更新予定: 6. ショッピングカートページと配送先住所ページの
実現更新予定: 7. 注文提出ページと個人センターページの実現
更新予定: 8 . 注文一覧ページとフィードバック
を実現 更新予定: 9. クーポンと販売後の払い戻し
を実現 更新予定: 10. 注文評価機能を実現
1. ミニプログラムの紹介
アプレットは、APP プログラム内のサブルーチンとして理解でき、メイン プログラムで許可された仕様でアプレットを開発するために必要な機能です。アプリはどこにでもあり、いつでも利用できますが、インストールやアンインストールの必要はありません。
2. プロジェクトを作成する
2.1. アカウントの申請
- WeChatパブリック プラットフォームにアクセスし、アカウント登録をクリックします。
- アプレットを選択し、フォームに必要事項を入力して登録します。
- 開発管理で、開発設定を選択し、ストレージ用に AppID と AppSecret をコピーします。
2.2、開発ツールのインストール
Wechat Web 開発者ツールのダウンロード アドレス。
SQLServer インストール チュートリアル。
- 2008R2 バージョンの SQL Server インストール パッケージをダウンロードして解凍し、インストール アイコンをクリックします。
- 左側でインストールを選択し、右側で新規インストールまたは既存のインストールへの機能の追加を選択します。
- 対応するプロダクト キーを入力します。ここで、Baidu に移動してさまざまなバージョンに従って自分で検索し、ライセンス条項を受け取ることを選択して、[次へ] をクリックします。
- プログレス バーが終了したら、[インストール]、[次へ] の順にクリックし、[すべて選択] を選択して、次の手順に進みます。
- [すべての SQL Server サービスに同じアカウントを使用する] を選択し、[次へ] をクリックして、[データベース エンジン構成に現在のユーザーを追加] を選択します。
- インストールが完了するまで、次のステップに進みます。
Visual Studio のダウンロードとインストールのチュートリアル。
Visual Studio のダウンロードとインストールのチュートリアル
2.3. 小さなプログラム プロジェクトと WebApi をビルドする
ミニ番組企画制作
- WeChat Web 開発者ツールを開き、コードをスキャンしてログインし、[Create Mini Program] を選択します。下図に示すテキスト ボックスに、アカウントの申請時にコピーした AppID を入力します。
- これは e コマース アプレットであるため、既定ではインデックス ページのみが存在するため、さらに 3 つのページ (商品分類、ショッピング カート、個人センター) を作成する必要があります。
- 対応するページを作成したら、アプレット ディレクトリに新しいイメージ フォルダを作成し、下部にあるタブバー スイッチの対応するアイコンをダウンロードします。ここでは、アリババのベクター アイコン ライブラリにアクセスして、必要な素材を見つけることができます。
- app.json ファイルにタブバー ノードを追加し、対応する構成を追加すると、作業が完了しても、タブバーを介してページを切り替えることができます。
"tabBar": {
"color": "#666666",
"selectedColor": "#F2A602",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/images/6-1.png",
"selectedIconPath": "/images/6-2.png"
},
{
"pagePath": "pages/classification/index",
"text": "分类",
"iconPath": "/images/6-3.png",
"selectedIconPath": "/images/6-4.png"
},
{
"pagePath": "pages/shoppingCart/index",
"text": "购物车",
"iconPath": "/images/6-5.png",
"selectedIconPath": "/images/6-6.png"
},
{
"pagePath": "pages/person/index",
"text": "我的",
"iconPath": "/images/6-7.png",
"selectedIconPath": "/images/6-8.png"
}
]
},
データベースの作成
- SQL Server を開き、データベース エンジンに接続して、左上隅にある [新しいクエリ] をクリックします。
- データベースとユーザー テーブルを作成し、コードを選択して [実行] をクリックします。
--创建数据库
CREATE DATABASE ShoppingMall;
--选中数据库
USE ShoppingMall;
--创建用户表
CREATE TABLE UserInfo(
--用户ID
userId INT PRIMARY KEY IDENTITY,
--用户openId
userOpenId NVARCHAR(200),
--用户姓名
userName NVARCHAR(50),
--用户头像
userHead NVARCHAR(200),
--用户性别
userSex NVARCHAR(50),
--创建时间
createTime DATETIME
);
WebApi アーキテクチャの構築
- Visual Studio を開き、[新しいプロジェクトの作成] を選択して、対応するプロジェクト名と保存場所を入力します。
- WebApi プロジェクト テンプレートを選択し、[作成] をクリックします。
- What you see at this step is a traditional MVC API architecture. 右側のソリューションでモデル フォルダーを選択し、[追加] をクリックして、[新しいアイテム] を選択します。
- 右上のテキスト ボックスで Entity Data Model を検索し、[追加] をクリックします。
- データベースから EF デザイナーを選択し、[次へ] をクリックします。
- [新しい接続] をクリックし、[Microsoft SQL Server] を選択します。
- サーバー名のテキスト ボックスに「 . 」を入力し、データベースのドロップダウン ボックスで上記の手順で作成したデータベースを選択し、[OK] をクリックして、[次へ] をクリックします。
- Entity Data Model ウィザードでテーブルを選択し、[完了] をクリックすると、現在のデータベースで作成されたテーブルがここにマップされます。
- データベース コンテキストを取得するために、Models フォルダーにエンティティ クラス BaseModel を作成します。ここまでで基本的にアプレットとWebApiの構築は完了したので、次の記事ではホームページのカルーセルと商品検索を実現する方法を紹介します。
public class BaseModel
{
/// <summary>
/// 获取上下文
/// </summary>
/// <returns>EF上下文</returns>
public static ShoppingMallEntities Create()
{
ShoppingMallEntities db = CallContext.GetData("db") as ShoppingMallEntities;
if (db == null)
{
db = new ShoppingMallEntities();
CallContext.SetData("db", db);
}
return db;
}
}