從零開發(fā)簡易微信小程序

發(fā)表時間：2021-3-15

發(fā)布人：葵宇科技

瀏覽次數(shù)：55

某日，心血來潮，想搗鼓下微信小程序，嘗試微信的云開發(fā)功能，于是就有了下面簡單的成品：

本小程序的包含三部分的功能：

1. 商品banner圖片的展示
1. 商品列表的展示
- 2.1 熱門商品的展示
- 2.2 普通商品的展示
1. 小程序的指南說明

感興趣的通過上面的小程序碼，自行體驗~

好了，直接上開發(fā)的過程吧~

初始化項目

通過微信開發(fā)者工具新建項目。

點擊超大的+號 -> 輸入自己申請的小程序的AppId -> 后端服務(wù)勾選'小程序.云開發(fā)'

按照上面的簡單操作就可以進入你新建的小程序了，簡單快捷。

初始化后項目的代碼目錄結(jié)構(gòu)：

├── cloudfunctions # 云函數(shù)
├── miniprogram # 小程序前臺部分
├── README.md # 代碼文檔說明
└── project.config.json # 項目配置文件
復(fù)制代碼

PS: 要申請自己的小程序噢，測試的AppId沒支持云開發(fā)

然后通過按鈕 云開發(fā) 進入你的云開發(fā)控制臺：

嘿嘿嘿，在接下來的一個月時間，你就可以免費使用 資源均衡型-基礎(chǔ)版1 一個月時間。

一個月時間，對于寫簡單的 demo 綽綽有余啊~

編寫看得過去的頁面部分

這里使用的 UI框架 是 Vant Weapp 。能快速開發(fā)好看的 UI 。

首頁頁面結(jié)構(gòu)代碼如下：

<!--index.wxml-->
<view class="index-page">
  <view class="navigation" style="{{navStyle}}">
    <view class="nav-text" style="{{navTextStyle}}">{{navTitle}}</view>
  </view>
  <view style="{{navStyle}}"></view>

  <view style="width: 100%; height: 300rpx; overflow: hidden;">
    <swiper 
      class="swiper"
      indicator-dots="true"
      autoplay="true" interval="5000" duration="500">
      <block wx:for="{{bannerList}}" wx:key="index">
        <swiper-item class="swiper-item" bindtap="previewGoods" data-item="{{item}}">
          <image class="swiper-img" src="{{item.url}}" mode="widthFix"></image>
          <text class="swiper-title">{{item.title}}</text>
        </swiper-item>
      </block>
    </swiper>
  </view>

  <view style="width: 100%;">
    <van-notice-bar
      left-icon="volume-o"
      text="{{notice}}"
    />
  </view>

  <view class="hot-list">
    <view wx:for="{{hotList}}" wx:key="index">
      <van-card
        tag="熱門"
        origin-price="原價 {{item.origin}}"
        price="券后 {{item.current}}"
        desc="{{item.desc}}"
        title="{{item.title}}"
        thumb="{{ item.url }}"
        bindtap="previewGoods"
        data-item="{{item}}"
        />
    </view>
  </view>

  <view class="goods-list" wx:if="{{goodsList.length > 0}}">
    <view wx:for="{{goodsList}}" wx:key="index">
      <van-card
        origin-price="原價 {{item.origin}}"
        price="券后 {{item.current}}"
        desc="{{item.desc}}"
        title="{{item.title}}"
        thumb="{{ item.url }}"
        bindtap="previewGoods"
        data-item="{{item}}"
        />
    </view>
    <view class="no-more-data">
      <van-icon name="smile-comment-o" style="margin-right: 10rpx;"/>沒有更多數(shù)據(jù)...
    </view>
  </view>

  <van-popup round show="{{showPopup}}" wx:if="{{isLoaded}}" close-on-click-overlay="{{false}}">
    <guide-modal wx:if="{{popupType===1}}" bind:closeGuide="onCloseGuide" courseList="{{courseList}}" goodsItem="{{toGuideItem}}"></guide-modal>
  </van-popup>

  <view bindtap="openGuide" class="strategy-btn">
    <van-button 
      size="small" 
      color="linear-gradient(to right, #f00, #EC644E)" 
      icon="send-gift-o">
      攻略
    </van-button>
  </view>

</view>
復(fù)制代碼

得到的效果圖如下：

嗯～為了做一個雖然簡單但是 有些完整 的小程序，我特地配置了下攻略的指導(dǎo)板塊。

相關(guān)的j頁面結(jié)構(gòu)代碼如下：

<!--guide.wxml-->
<view class="guideModal" style="margin-top: {{mgTop}}px">
  <view class="guideModal-head">
    <van-icon customStyle="display: block;margin-right: 4px;" name="info-o" size="16"></van-icon>
    <text>領(lǐng)券購買步驟</text>
  </view>
  <view class="guideModal-body">
    <view class="guide-item">
      <view class="guide-item-num">1</view>
      <view class="guide-item-content">
        <text>了解完步驟點擊下方按鈕，進行操作吧</text>
      </view>
    </view>
    <view class="guide-item" wx:for="{{courseList}}" wx:for-item="course" wx:key="index">
      <view class="guide-item-num">{{course.step+1}}</view>
      <view class="guide-item-content">
        <text>{{course.title}}</text>
        <image class="image" mode="widthFix" src="{{course.img}}"></image>
      </view>
    </view>
  </view>
  <view class="guideModal-footer">
    <view class="footer-btn" bindtap="iKnow">我知道了</view>
  </view>
</view>
復(fù)制代碼

效果如下：

編寫調(diào)得通的api接口

這里調(diào)用的接口，我以 guide.wxml 中的數(shù)據(jù) courseList 為例吧 - 就是一個步驟說明的數(shù)據(jù)。其需要的數(shù)據(jù)結(jié)構(gòu)是：

data: [{
  step: 1,
  title: 'this is step1',
  img: 'step 1 image note'
}]
復(fù)制代碼

在小程序的 云開發(fā)控制臺 上操作。

數(shù)據(jù)庫上新建集合，這里我命名為 course ，之后在此集合中 添加記錄 。我這里有 5個步驟說明 ，所以新建了五條數(shù)據(jù)，如下：

之后，你就可以在相關(guān)的 JS 文件中新建查詢。

onGetCourse: function() {
  const db = wx.cloud.database();
  db.collection('course')
      .where({
        show: 1
      })
      .get({
        success: res => {
          this.setData({
            courseList: res.data || []
          })
        },
        fail: err => {}
      })
}
復(fù)制代碼