WeChatミニプログラムクラウド開発プラクティスの概要

クラウド開発入門

クラウド開発とは何ですか？
2017年にWeChatアップルトがリリースされた後、以前の開発モデルはフロントエンドページでWeChatアップルトの関連コンポーネントを使用することでした。バックグラウンドログインとビジネスインタラクションに関しては、PHPであるか、PHPであるかを問わず、自作のサーバーを使用する必要があります。 JAVAアーキテクチャは、WeChatアプリレットが呼び出すための対応するインターフェイスを公開する必要があります。この開発モデルは、複雑な技術アーキテクチャと困難な開発およびデバッグを備えています。比較的成熟したビジネスを持つ専門企業に適しています。
その後、テクノロジーの開発に伴い、WeChatはクラウド開発モデルを導入しました。フロントエンドは引き続きWeChat関連のコンポーネントを使用して開発されますが、WeChatによって構築されたNodeJSバックエンドは、対応するビジネスロジックをフロントエンドが呼び出す関数にカプセル化するだけで済みます。、データベースはMongoDBを使用しており、オンラインでコレクションとデータベースレコードを作成できるため、非常に便利です。また、フロントエンドとバックエンドのテクノロジーはWeChatの自作テクノロジーを使用しているため、サードパーティのサーバーを借りる必要はなく、プログラムは自動的に展開されます。オンラインに接続してWeChatの公式コードレビューに合格すると、使用したトラフィックに応じて支払うだけで、携帯電話カードと同じになります。同様に、アクティブ化される月額家賃に対して利用可能なトラフィックの量。また、初期段階では無料の交通があり、一般的な用途には月額100元の家賃で十分であり、開発から運用・保守まで非常に便利です。

クラウド開発を
有効にする方法は？まず、WeChat公式アカウントの公式アドレスhttps://mp.weixin.qq.com/にアクセスし、自分でアカウントを登録する必要があります
ウェブサイトのホームページ
。
主題の選択
メールで登録する必要があるため、本体選択ページでミニプログラムを選択してください。これも将来的になります。アカウントにログインし、要件に従ってください。
ここに写真の説明を挿入
ログインするときは、認証のために管理者のWeChatコードに登録する必要があります。合格後、アップルトのバックグラウンド管理ページを開くことができます。

頻繁に使用される日常の機能は、バージョン管理とユーザーです。管理、バージョン管理は、コードが送信された後にエクスペリエンスバージョンを設定できることです。その後、ユーザー管理のエクスペリエンス担当者は、携帯電話を使用して、作成したリンゴの特定の効果を体験できます。ユーザー管理は主に経験者を増やすために使用されますが、もちろん開発者を設定することもできます。つまり、これら2つの機能は非常に使いやすいです。
ここに写真の説明を挿入
環境設定
バックグラウンドでの日常業務に加えて、JAVA開発などの開発ツールがあります。WeChatアップルト開発にも独自の開発ツールがあります。バックグラウンドナビゲーションバーのドキュメント列からツールをダウンロードしてインストールできます。
ここに写真の説明を挿入

特定のインストールについては紹介しません。簡単です。プロンプトに従って次のステップに進んでください。
プロジェクト作成
ツールをインストールしたら、アイコンをダブルクリックして開きます。ナレッジポイントはAPPIDであることを強調したいと思います。これは、アップルトの一意の識別コードに相当します。毎日のプロジェクト作成に入力する必要があります。このIDを見つける方法は？バックグラウンドで開発セクションを開き
ここに写真の説明を挿入
ます：あなたはそれを見つけることができます。
インストールが完了したら、インストール済みアイコンをダブルクリックします

。+記号をクリックして、開いたインターフェイスでプロジェクトを作成します。プロジェクトで作成する
ここに写真の説明を挿入
必要のあるディレクトリを選択し、プロジェクト名を入力します。最も重要なことは、独自のプロジェクトのAPPIDを入力することです。バックエンドサービスは、アップルトクラウド開発を選択し

、新しいボタンをクリックします。クラウド開発用のプロジェクトを作成できます。
ここに写真の説明を挿入
インターフェースの全体的な機能は比較的明確で、ナビゲーションバー、左側のシミュレーター、右側のコードマネージャーに分かれています。

ナビゲーションバーのクラウド開発は、データベース管理のバックグラウンドエントランスに相当します。クリックして管理インターフェイスに入り、レコードを追加するコレクションを作成すると同時に、アップルトによってアップロードされた添付ファイルを管理できます。コンパイラーはキャッシュをクリアして、コンパイルするページを選択できます。シミュレーターの機能は、実行後に携帯電話にプログラムの効果を表示することであり、コードマネージャーはフォルダーの形式でさまざまなビジネスモジュールのコードを管理します。
ここに写真の説明を挿入
コードマネージャは、フロントエンドコードとバックエンドコードの2つの部分に分かれています。フロントエンドコードはミニプログラムフォルダに配置され、バックエンドコードはcloudfunctionsフォルダに配置されます。
このチュートリアルは実用的なチュートリアルであり、実用的な小さなプロジェクトを使用して、クラウド開発テクノロジーを使用して小さなプログラムを開発する方法を説明します。

需要分析

プロジェクトの背景プロジェクト
の創始者は、教育業界に長年携わってきたシニアプラクティショナーであり、1対1の指導に適した教師を迅速に見つけるという両親のニーズを満たすために、指導プラットフォームを構築する必要があるため、プロジェクトの要件を提示します。
親のニーズ
ホームページは、「有名な教師ホイ➸チューターヘルプ」ミニプログラムの目的を紹介するために使用されます。具体的な内容は次のとおりです。静的HTMLを使用して、次のコンテンツをコンパイル
できます。PeiyouFamous Teacher：9つの正方形のグリッドに従って主題の主題を表示し、主題をクリックして主題の下にあるすべての教師を一覧表示し、教師名をクリックして教師の詳細情報を表示できます。。
プラットフォームが適切な教師と一致するように、保護者は予約情報を公開し、自分の要件と実際の場所を入力できます。
プラットフォーム管理の機能
教師管理の機能：教師情報を維持し、それをPeiyou FamousTeacher列に公開できます。
アポイントメント管理の機能：最新のアポイントメント情報を表示でき、リストはどの情報が表示されたかを区別する必要があります。

データベース設計

需要分析では、一般に3つのテーブルが設計され、1つは権限テーブルであり、管理者のopenidが追加されているため、管理者であるか電話の通常の親であるかを区別できます。2番目のテーブルは、情報を閲覧する親と情報を維持する管理者のニーズを満たすように設計された教師テーブルです。3番目の表は、保護者から提出された予約内容を記録するために設計された予約情報フォームです。
権限テーブル（管理者）
ここに写真の説明を挿入
教師テーブル（教師）

予約テーブル（サブスクライブ）

全体的なアーキテクチャ

プロジェクトをコンパイルするには、要件を読み、データベースの設計を完了した後、次のステップは、技術アーキテクチャ、フロントエンドに使用するアーキテクチャ、およびバックエンドに使用するアーキテクチャを検討することです。ここでは、フロントエンドにWeChatのネイティブフロントエンドフレームワークweuiを使用し、バックエンドを使用します。クラウド機能。利点は、すべてのWeChatフレームワークを使用して構築できるため、さまざまなテクノロジーを統合しないという問題が解消され、開発効率が比較的高いことです。
weuiの構築方法WeChat公式アカウント
プラットフォームにログインし、ドキュメント列を
ここに写真の説明を挿入
クリックして拡張機能をクリックすると、weuiのコンポーネントライブラリの

詳細な紹介が表示されます。初心者が直面する問題は、npmがインストールされないことです。具体的なインストール方法は開発ツールを開くことです。ミニプログラムを右クリック
ここに写真の説明を挿入
して、ターミナルで開くことを選択します。ターミナルで、npm init

npm init install

npm install weui-miniprogramを実行し

、開発ツールの詳細でnpmモジュールの使用を確認して

から、ツールバーでビルドnpmを選択します。
ここに写真の説明を挿入
ビルドが成功すると、追加のminiprogram_npmがあります。ディレクトリは成功を表します。

ビルドが完了したら、
app.wxssの最初の行に@ import'miniprogram_npm /weui-miniprogram/weui-wxss/dist/style/weui.wxss 'を追加して、weuiが
PSを通常どおり使用できるようにする必要があります。npmが内部コマンドでも外部コマンドでもないことを示すプロンプトが表示され、nodejsがコンピューターにインストールされていないことを示します。最新バージョンをダウンロードして、自分でインストールしてください。

ホーム

ここに写真の説明を挿入
ホームページは基本的に情報を表示するためのもので、当初はWeChatのリッチテキストコンポーネントを使って開発することを考えていましたが、ホームページの内容が変更されていました。内容を調整するたびに、jsで長時間変更し、その後記事コンポーネントに変更しました。

wxmlコード

<view class="page">
  <view class="page__hd">
    <view class="weui-article">
      <view class="weui-article__h1 h1_center"><text class="bgindent">名师帮帮</text></view>
    </view>
    <view class="weui-article__section">
      <view class="weui-article__h2 title">概述</view>
      <view class="weui-article__section">
        <view class="weui-article__p p_indent">
          <text class="bgindent">“名师帮帮”</text>何老师从事教学工作二十多年，积累了丰富的教学经验和大量的教师资源，同时也感受到家长、学生的需求与资源匮乏之间的矛盾，希望可以借助该平台在学生和老师之间搭建起一座桥梁。
        </view>
      </view>
      <view class="weui-article__h2 title">教师资质</view>
      <view class="weui-article__section">
        <view class="weui-article__p p_indent">
        <text class="bgindent">“名师帮帮”</text>确认的所有老师都是<text class="green">专职的优秀老师</text>（包括一线在职老师和自由老师），均具有丰富的教学经验，<text class="green">验证过辅导成绩证明</text>，分为：
        </view>
        <view class="weui-article__p p_indent">
        1）<text class="green">培优名师</text>：带出过考入清华北大、获得国内国际竞赛大奖或者班级第一名学生的老师。
        </view>
        <view class="weui-article__p p_indent">
         2）<text class="green">补差名师</text>：辅导后孩子单科学习成绩提高三十分以上的老师。
        </view>
      </view>
      <view class="weui-article__h2 title">运行机制</view>
      <view class="weui-article__section">
        <view class="weui-article__p p_indent">
          <text class="bgindent">“名师帮帮”</text>的运行机制如下：
          <view>
          1). 家长提供学生的学习情况，由何老师推荐适合的最佳老师；
          </view>
          <view>
          2). 上课方式可以到家上课，也可双方协商；
          </view>
          <view>
          3). 课费一次一付给上课老师；
          </view>
          <view>
          4). 何老师负责跟踪教学过程，协助家长和学生解决问题。
          </view>
        </view>
      </view>
      <view class="weui-article__h2 title">课费标准</view>
      <view class="weui-article__section">
        <view class="weui-article__p p_indent">
          <text class="bgindent">“名师帮帮”</text>的老师课时（1小时）费用范围为 300~1000元，具体课费根据年级、科目以及上课时间商议而定。
        </view>
      </view>
      <view class="weui-article__h2 title bgindent">联系人：何老师</view>
      <view class="weui-article__section">
        <view class="weui-article__p">
          1) <text class="green">电话</text>：  
          <view>
          （周一至周五10:00-15:00可电话，其余时间请微信）
          </view>
          <view>
          2) <text class="green">微信</text>：
          </view>
        </view>
      
      </view>
    </view>
  </view>
</view>

wxss

page {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding:5px;
  color:#128b68;
}
.bg{
  padding-right:10px;
}
.h1_center{
  text-align: center;
  
}
.bgindent{
  background: linear-gradient(to right,#005343,#60501d,#802e00,#82181c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.green{
  color:#43853b;
  font-weight:bold;
}
.weui-article{
  padding-top:0px;
  padding-bottom:0px;
}
.p_indent{
  text-indent: 2em;
}
.title{
  border-left: 3px solid #c60;
  padding-left:15px;
  text-shadow: #f7bc9c 1px 0 10px;
}

ナビゲーションページ

ここに写真の説明を挿入
インストラクターのクイックチェックでは、主にトレーニング可能な科目が表示されます。現在9科目あります。科目をクリックすると、対応する科目の教師リストにジャンプします。ここでは、wxmlページの各カテゴリに関連付けられているweuiの9つの正方形のグリッドレイアウトを使用します。カテゴリ名を指定し、リストページにジャンプするときにカテゴリ名を渡します

WXML

<view class="page">
    <view class="page__hd">
        <view class="page__title"><text class="bgindent">教员速查</text></view>
    </view>
    <view class="page__bd">
        <view class="weui-grids">
            <block wx:for="{
   
   {classes}}" wx:key="*this">
                <navigator url="../teacherlist/teacherlist?name={
   
   {item}}&type=0" class="weui-grid" hover-class="weui-grid_active">
                    <image class="weui-grid__icon" src="/images/class-0{
   
   {index+1}}.png" />
                    <view wx:if="{
   
   {index==0||index==1||index==2||index==6||index==7||index==8}}" class="weui-grid__label blue">{
   
   {item}}</view>
                    <view  wx:if="{
   
   {index==3||index==4||index==5}}" class="weui-grid__label green">{
   
   {item}}</view>
                </navigator>
            </block>
        </view>
    </view>
</view>

WXSS

page{
  background: #ffffff;
}
.title{
  padding:20px;
  color:#F8AD00
}
.item{
  width:100px;
  text-align: center;
  margin-top:25px;
}
.wrap{
  flex-wrap:wrap
}
.bgindent{
  background: linear-gradient(to right,#005343,#60501d,#802e00,#82181c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.green{
  color:#43853b;
  font-weight:bold;
}
.blue{
  color:#128b68;
  font-weight:bold;
}

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    classes: ['语文', '数学', '英语', '历史', '地理', '政治', '化学', '物理','生物']
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

先生リストページ

ここに写真の説明を挿入
教師リストページでは、データベースから資格のある教師にクエリを実行してページに表示する必要があります。教師の名前をクリックして詳細ページにジャンプします

wxml

<view class="page">
  <view class="page__bd">
    <view class="weui-panel weui-panel_access">
      <view class="weui-panel__hd"><text class="bgindent">名师汇</text></view>
      <view class="weui-panel__bd">
        <view class="weui-media-box weui-media-box_text" wx:for="{
   
   {teacherlist}}">
          <navigator url="../teacherdetail/teacherdetail?id={
   
   {item._id}}">
            <view class="weui-media-box__title weui-media-box__title_in-text"><text class="blue">{
   
   {item.name}}</text> <text class="blue margin25">编号:</text><text class="green">{
   
   {item.no}}</text></view>
            <view class="weui-media-box__desc"><text class="blue">科目:</text> <text class="green">{
   
   {item.course}}</text> <text class="blue margin20">性别:</text><text class="green">{
   
   {item.sex}} </text><text class="blue margin20">教龄:</text><text class="green">{
   
   {item.year}}</text></view>
          </navigator>
        </view>
        <view wx:if="{
   
   {teacherlist.length==0}}" style="text-align:center;line-height:20px;font-size:16px;padding-top:25px;padding-bottom:25px">
     <text class="blue">该类别下暂无教师</text>
  </view>
      </view>
    </view>
  </view>
</view>

wxss

.margin20{
  margin-left: 20px;
}
.margin25{
  margin-left: 27px;
}

js

// miniprogram/pages/teacherlist/teacherlist.js
wx.cloud.init()
const db = wx.cloud.database()
const teacherCollection = db.collection('teacher')
const _ = db.command
Page({

  /**
   * 页面的初始数据
   */
  data: {
    teacherlist:[],
    type:""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options.name+" "+options.type)
    console.log(teacherCollection)
    teacherCollection.where({
      course:options.name,
    }).get().then(res => {
        console.log(res.data)
      this.setData({
        teacherlist: res.data,
        type:options.type
      })
      })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

先生の詳細ページ

ここに写真の説明を挿入
詳細ページは比較的シンプルです。ページから渡されたIDパラメータを受け取り、データベースにアクセスして教師の情報を取得し、ページに表示します。

wxml

<view class="page">
    <view class="page__bd">
<view class="weui-cells weui-cells_after-title">
            <view class="weui-cell">
                <view class="weui-cell__bd"><text class="blue">姓名</text></view>
                <view class="weui-cell__ft"><text class="green">{
   
   {teacher.name}}</text></view>
            </view>
            <view class="weui-cell">
                <view class="weui-cell__bd"><text class="blue">编号</text></view>
                <view class="weui-cell__ft"><text class="green">{
   
   {teacher.no}}</text></view>
            </view>
            <view class="weui-cell">
                <view class="weui-cell__bd"><text class="blue">科目</text></view>
                <view class="weui-cell__ft"><text class="green">{
   
   {teacher.course}}</text></view>
            </view>
            <view class="weui-cell">
                <view class="weui-cell__bd"><text class="blue">性别</text></view>
                <view class="weui-cell__ft"><text class="green">{
   
   {teacher.sex}}</text></view>
            </view>
            <view class="weui-cell">
                <view class="weui-cell__bd"><text class="blue">教龄(年)</text></view>
                <view class="weui-cell__ft"><text class="green">{
   
   {teacher.year}}</text></view>
            </view>
            <view class="weui-cell">
                <view class="weui-cell__bd"><text class="blue">可辅导年级</text></view>
                <view class="weui-cell__ft"><text class="green">{
   
   {teacher.grade}}</text></view>
            </view>
            <view class="weui-cell flex">
                <view class="weui-cell__bd left" style="width:100%"><text class="blue">过往辅导成绩</text></view>
                <view class="weui-cell__ft left" style="width:100%"><text class="green">{
   
   {teacher.score}}</text></view>
            </view>
            <view class="weui-cell">
                <view class="weui-cell__bd"><text class="blue">课时费</text></view>
                <view class="weui-cell__ft"><text class="green">{
   
   {teacher.cost}}</text></view>
            </view>
        </view>

    </view>
</view>

wxss

.flex{
  flex-direction: column;
  
}
.left{
text-align: left;
}

js

wx.cloud.init()
const db = wx.cloud.database()
const teacherCollection = db.collection('teacher')
const _ = db.command
Page({

  /**
   * 页面的初始数据
   */
  data: { 
    teacher:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options.id)
     teacherCollection.doc(options.id).get({
      success: res => {
        console.log(res.data)
        this.setData({
          teacher:res.data
        })
      }
     })
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  getUserInfo: function (result) {
    console.log("111")
    wx.redirectTo({
      url: '../order/order',
    })
  }
})

マイページ

ここに写真の説明を挿入
最初のステップはログインの問題を解決することであるため、私のページは比較的複雑です。WeChatは、ボタンをクリックした後のログインをサポートするために、ボタンコンポーネントを介して属性を追加します。ログイン情報を取得したら、ユーザーが管理者であるかどうかを取得する必要があります。下のメニューには、教師管理と予約管理の機能は表示されません。管理者であれば、教師を管理して予約情報を処理できます。もちろん、これらの機能を実現するには、小さな端末のコードを完了できないため、クラウド関数を作成する必要があります。の。

wxml

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-spacing">
        <view style="flex-direction:row;width:100%;">
        <block wx:if="{
   
   {userInfo.nickName}}">
        <view class="flex-item"><image class="userinfo-avatar" src="{
   
   {userInfo.avatarUrl}}" background-size="cover"></image>{
   
   {Object.keys(userInfo).length}}</view>
          <view style="text-align:center;margin-bottom:5px">{
   
   {userInfo.nickName}}</view>
          </block>
    <block wx:else>
    <view class="flex-item"><image class="userinfo-avatar" src="../../images/user-unlogin.png" background-size="cover"></image></view>
          <view style="text-align:center;margin-bottom:5px"><button open-type="getUserInfo" lang="zh_CN" size="mini" type="primary" bindgetuserinfo="onGotUserInfo">登录{
   
   {Object.keys(userInfo).length}}</button></view>
    </block>
          <mp-cells title="">
            <mp-cell link url="../orderlist/orderlist" hover value="我的预约" footer="" ext-class="green">
                <image slot="title" src="../../images/dingdan.png" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
            </mp-cell>
            <mp-cell link url="../order/order" hover value="快速预约" footer="" ext-class="green">
                <image slot="title" src="../../images/yuyue.png" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
            </mp-cell>
            <mp-cell wx:if="{
   
   {userInfo.isadmin==1}}" link url="../teachermanage/teachermanage" hover value="教师管理" footer="" ext-class="blue">
                <image slot="title" src="../../images/jiaoshiguanli.png" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
            </mp-cell>
            <mp-cell wx:if="{
   
   {userInfo.isadmin==1}}" link url="../ordermanage/ordermanage" hover value="预约管理" footer="" ext-class="blue">
                <image slot="title" src="../../images/jiazhang.png" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
            </mp-cell>
        </mp-cells>
        </view>
      </view>
    </view>
  </view>
</view>

wxss

.container{
  background: #ffffff;
  width:100%;
  
}
.page-body{
  width:100%；
}
.flex-item{
  text-align: center;
  width:325px;
}

js

// miniprogram/pages/my/my.js
const db = wx.cloud.database()
const admin = db.collection('admin')
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
    const userInfo = app.globalData.userInfo
    if (userInfo) {
    admin.where({
      openid:userInfo.openid
    }).count().then(res => {
      userInfo.isadmin = res.total
      
        this.setData({
          userInfo: userInfo
        })
     
    })
      .catch(err => {
        console.error(err)
      })
  }
    
   
    /*wx.getSetting({
      success: res => {
        console.log("-----" + res.authSetting['scope.userInfo'])
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          console.log("已授权" + res.authSetting['scope.userInfo'])
          wx.getUserInfo({
            success: res => {
              this.setData({
                avatarUrl: res.userInfo.avatarUrl,
                userInfo: res.userInfo
              })
              console.log(Object.keys(this.data.userInfo).length)
            }
          })
        }
      }
    })*/
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    const userInfo = app.globalData.userInfo
    if (userInfo) {
    admin.where({
      openid: userInfo.openid
    }).count().then(res => {
        userInfo.isadmin = res.total
        this.setData({
          userInfo: userInfo
        })
      
    })
      .catch(err => {
        console.error(err)
      })
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    const userInfo = app.globalData.userInfo
    if (userInfo) {
      admin.where({
        openid: userInfo.openid
      }).count().then(res => {
        userInfo.isadmin = res.total
        this.setData({
          userInfo: userInfo
        })

      })
        .catch(err => {
          console.error(err)
        })
    }
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  onGotUserInfo: function (result) {
    wx.cloud.callFunction({
      name: 'login',
      success: res => {
        console.log(res.result.dbResult.total)
        result.detail.userInfo.openid = res.result.OPENID
        result.detail.userInfo.isadmin = res.result.dbResult.total
        app.globalData.userInfo = result.detail.userInfo
        this.setData({
          userInfo: result.detail.userInfo
        })
        wx.setStorageSync("userInfo", result.detail.userInfo)
      }
    })
  }
})

ここに写真の説明を挿入
予約リストページは、主にデータベースのレコードを照会します。予約情報を表示すると、同時にステータスが更新され、ステータスが読み取りに変更されます。

wxml

<view class="page">
    <view class="page__bd">
        <mp-cells ext-class="my-cells" title="预约列表">
        <block wx:for="{
   
   {subscribe}}">
        <navigator url="../orderdetail/orderdetail?id={
   
   {item._id}}&flag=1">
             <block wx:if="{
   
   {item.status=='0'}}">
                <mp-cell ext-class="blue" value="预约科目:{
   
   {item.class}}[未读]" footer="{
   
   {item.createtime}}"></mp-cell>
              </block>
              <block wx:if="{
   
   {item.status=='1'}}">
                 <mp-cell ext-class="green" wx:if="{
   
   {item.status==='1'}}" value="预约科目:{
   
   {item.class}}[已读]" footer="{
   
   {item.createtime}}"></mp-cell>
                </block>
              
                </navigator>
          </block>
        </mp-cells>
    </view>
</view>

json

{
  "usingComponents": {
    "mp-cells": "../components/cells/cells",
    "mp-cell": "../components/cell/cell",
    "mp-slideview": "../components/slideview/slideview"
  }
}

wxss

/* miniprogram/pages/ordermanage/ordermanage.wxss */
.weui-cell__ft{
color:#43853b!important;
} 
.weui-cells__title{
  color:#43853b;
}

js

wx.cloud.init()
const db = wx.cloud.database()
const subscribeCollection = db.collection('subscribe')
const _ = db.command
const app = getApp();
Page({
  data: {
    subcribe: {}
  },
  onLoad: function () {
    
    subscribeCollection.orderBy('createtime', 'desc').get().then(res => {
      for (var index in res.data) {
        var time = res.data[index].createtime;
        console.log(time)
        res.data[index].createtime = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate()
      }

      this.setData({
        subscribe: res.data,
      })
    })
    this.setData({
      slideButtons: [{
        type: 'warn',
        text: '删除',
        extClass: 'test',
        src: '/page/weui/cell/icon_del.svg', // icon的路径
      }],
    });
  },
  onShow(){
    subscribeCollection.orderBy('createtime', 'desc').get().then(res => {
      for (var index in res.data) {
        var time = res.data[index].createtime;
        console.log(time)
        res.data[index].createtime = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate()
      }

      this.setData({
        subscribe: res.data,
      })
    })
  },
  slideButtonTap(e) {
    console.log('slide button tap', e.detail)
  }
});

ここに写真の説明を挿入
新しい予定ページは、主にフォームを使用して、weuiの拡張コンポーネントを使用します。これは、簡単に確認できます。

wxml

<mp-toptips msg="{
   
   {error}}" type="error" show="{
   
   {error}}"></mp-toptips>
<view class="page" xmlns:wx="http://www.w3.org/1999/xhtml">
    <view class="page__bd">
        <mp-form id="form" rules="{
   
   {rules}}" models="{
   
   {formData}}">
            <mp-cells class="green" title="快速预约家教">
                <mp-cell prop="class" title="辅导科目" ext-class="blue">
                    <input bindinput="formInputChange" data-field="class" placeholder-class="green" class="weui-input green" placeholder="请输入辅导科目"/>
                </mp-cell>
                <mp-cell prop="grade" title="辅导年级" ext-class="blue">
                    <input bindinput="formInputChange" data-field="grade" placeholder-class="green" class="weui-input green" placeholder="请输入辅导年级"/>
                </mp-cell>
                <mp-cell prop="contactname" title="联系人姓名" ext-class="blue">
                    <input bindinput="formInputChange" data-field="contactname" placeholder-class="green" class="weui-input green" placeholder="请输入联系人姓名"/>
                </mp-cell>
                <mp-cell prop="telphone" title="手机号" ext-class="blue">
                    <input placeholder-class="green" bindinput="formInputChange" data-field="telphone" class="weui-input green" placeholder="请输入手机号"/>
                </mp-cell>
                <mp-cell  title="微信号" ext-class="blue">
                    <input placeholder-class="green" bindinput="formInputChange" data-field="microno" class="weui-input green" placeholder="请输入微信号"/>
                </mp-cell>
            </mp-cells>
            <view class="weui-cells__title blue">地址</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell">
                <view class="weui-cell__bd">
                    <input placeholder-class="green" class="weui-input green" bindinput="formInputChange" placeholder="填写辅导的详细地址" data-field="address"/>
                </view>
            </view>
        </view>

        <view class="weui-cells__title blue">要求</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell">
                <view class="weui-cell__bd">
                    <textarea placeholder-class="green" data-field="demand" bindinput="formInputChange" class="weui-textarea green"  placeholder="填写您对辅导老师的具体要求" style="height: 3.3em" />
                </view>
            </view>
        </view>
        <view class="weui-btn-area">
            <button class="weui-btn" type="primary" bindtap="submitForm">提交</button>
        </view>
        </mp-form>
        
    </view>
</view>

wxss

/* miniprogram/pages/order/order.wxss */
.weui-cells__title{
   color:#43853b;
}

js

wx.cloud.init()
const db = wx.cloud.database()
const orderCollection = db.collection('subscribe')
const _ = db.command
Component({
  data: {
    showTopTips: false,
    formData: {
    },
    rules: [{
      name: 'class',
      rules: { required: true, message: '辅导科目是必选项' },
    }, {
        name: 'grade',
        rules: { required: true, message: '辅导年级是必选项' },
      }, {
        name: 'contactname',
        rules: { required: true, message: '联系人姓名是必选项' },
      }, {
        name: 'telphone',
        rules: [{ required: true, message: '手机号必填' }, { mobile: true, message: '手机号格式不对' }],
      }, {
        name: 'microno',
        rules: { required: true, message: '微信号是必选项' },
      }]
  },
  methods: {
    formInputChange(e) {
      const { field } = e.currentTarget.dataset
      this.setData({
        [`formData.${field}`]: e.detail.value
      })
    },
    submitForm() {
      this.selectComponent('#form').validate((valid, errors) => {
        console.log('valid', valid, errors)
        if (!valid) {
          const firstError = Object.keys(errors)
          if (firstError.length) {
            this.setData({
              error: errors[firstError[0]].message
            })

          }
        } else {
          console.log(this.data.formData)
          var address ="";
          var demand = ""; 
            if(this.data.formData.hasOwnProperty('address')){
            address = this.data.formData.address;
            console.log(address)
          }
          if (this.data.formData.hasOwnProperty('demand')){
            demand = this.data.formData.demand;
          }
          orderCollection.add({
            // data 字段表示需新增的 JSON 数据
            data:{
              class:this.data.formData.class,
              grade:this.data.formData.grade,
              contactname:this.data.formData.contactname,
              telphone:this.data.formData.telphone,
              microno:this.data.formData.microno,
              address:address,
              demand:demand,
              createtime: new Date(),
              status:0
            }
          })
            .then(res => {
              console.log(res)
              wx.showToast({
                title: '预约成功',
                icon: 'success',
                duration: 2000
              })
              wx.switchTab({
                url: '../my/my',
              })
            })
            .catch(console.error)
        }
      })
    }

  }
});

json

{
  "usingComponents": {
    "mp-toptips": "../components/toptips/toptips",
    "mp-cells": "../components/cells/cells",
    "mp-cell": "../components/cell/cell",
    "mp-checkbox": "../components/checkbox/checkbox",
    "mp-checkbox-group": "../components/checkbox-group/checkbox-group",
    "mp-form": "../components/form/form"
  }
}

コース概要

このコースでは、WeChat Cloudが開発したテクノロジーを使用して、実際のケースで小さなプログラムを開発する方法を示します。一般に、WeChatの小さなプログラムクラウドの開発は非常に高速で使いやすく、サーバーを展開しなくても多くの時間を節約できます。最も重要なものは、特に個人の開発に適しています。1人の人が日常業務の一般的なニーズを満たし、中小企業の急速なクラウド移行を実現できます。簡単に実験してみましょう。
プロジェクトのソースコード
https://gitee.com/tuodagitee/famous-teacher-help.git
オンラインアドレス。最終結果を確認するには、WeChatアップルトで有名な教師の助けを検索してください。