某日，心血来潮，想捣鼓下微信小程序，尝试微信的云开发功能。
本小程序包含三部分的功能：
- 商品banner图片的展示
b.商品列表的展示
- 2.1 热门商品的展示
- 2.2 普通商品的展示
c.小程序的指南说明
感兴趣的通过上面的小程序码，自行体验~
好了，直接上开发的过程吧~
初始化项目
通过微信开发者工具新建项目。
点击超大的+号 -> 输入自己申请的小程序的AppId -> 后端服务勾选'小程序.云开发'
按照上面的简单操作就可以进入你新建的小程序了，简单快捷。
初始化后项目的代码目录结构：
├── cloudfunctions # 云函数 ├── miniprogram # 小程序前台部分 ├── README.md # 代码文档说明 └── project.config.json # 项目配置文件 复制代码
PS: 要申请自己的小程序噢，测试的AppId没支持云开发
然后通过按钮云开发进入你的云开发控制台：
嘿嘿嘿，在接下来的一个月时间，你就可以免费使用资源均衡型-基础版1。
编写看得过去的页面部分
这里使用的UI框架是Vant Weapp。能快速开发好看的UI。
首页页面结构代码如下：
<!--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;"/>没有更多数据... </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> 复制代码
得到的效果图如下：
嗯～为了做一个虽然简单但是有些完整的小程序，我特地配置了下攻略的指导板块。
相关的guide.wxml页面结构代码如下：
<!--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>领券购买步骤</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> 复制代码
编写调得通的api接口
这里调用的接口，我以guide.wxml中的数据courseList为例吧 - 就是一个步骤说明的数据。其需要的数据结构是：
data: [{ step: 1, title: 'this is step1', img: 'step 1 image note' }] 复制代码
在小程序的云开发控制台上操作。
数据库上新建集合，这里我命名为course，之后在此集合中添加记录。我这里有5个步骤说明，所以新建了五条数据，如下：
之后，你就可以在相关的JS文件中新建查询。
onGetCourse: function() { const db = wx.cloud.database(); db.collection('course') .where({ show: 1 }) .get({ success: res => { this.setData({ courseList: res.data || [] }) }, fail: err => {} }) } 复制代码
只是通过上面的函数我们并不能获取到数据，我们还得去设置数据权限：
之后，上传代码，提审上线即可。
