小程序·云开发 - 仿瑞幸咖啡小程序（一） - 从入门到辞职

最近新开一个瑞幸咖啡小程序的项目。刚好看到小程序有新的功能 - 云开发，就开始边做边学了。

首先，开启一个新的项目的时候，勾选云开发。

新建完项目之后，小程序就可以进行云开发服务了。

需要注意的是，新建的小程序刚开启云服务的时候，需要点击左上角的云开发开通服务，并且首次开启需要等待十分钟左右才可以正常使用云API，否则会报错cloud init error: Error: invalid scope 没有权限，请先开通云服务

---------------------------------------------------------灰常可爱的分割线~-------------------------------------------------------------------

首先，先要考虑添加商品详情，有了商品详情之后，多个商品详情才会有商品列表。

商品详情的设计，参照瑞幸咖啡，我们需要有一个主图片，一个原始的价格，另外需要有三个可选的项目。热度，糖度，奶油。除此之外，必不可少的就是商品详情了。单纯从以上结构来看，可以先做一个简单的商品详情的后台。

哦，仔细看一下，还有一个推荐商品。

我们逐步来添加功能。首先，我们搭建界面。这时候会遇到一个问题。热度，糖度，奶油这三种个类目，都需要按具体商品来添加的，有点可能有三个选项，有的可能没有选项。那么就需要动态添加view组件。

对于小程序来说，可以使用动态数组来实现该功能。参考 微信小程序 动态添加view组件

我们拿甜度来举例。首先创建一个甜度的类

function Sweet_detail(sweet,price){
  this.sweet = sweet;
  this.price = price;
}
function Sweet_all(){
  this.sweets = [];
}

然后在onLoad函数内初始化

onLoad: function (options) {
    let that = this;
    that.setData({
      sweet_all:new Sweet_all()
    })
    let sweet_all = that.data.sweet_all;
    sweet_all.sweets.push(new Sweet_detail())
    that.setData({
      sweet_all: sweet_all
    })
  },

初始化完，我们就有一个默认的甜度输入框了。如果不需要的话，可以将后面添加Sweet_detail的方法去掉，改成

onLoad: function (options) {
    let that = this;
    that.setData({
      sweet_all:new Sweet_all()
    })
  },

我们有了一个初始化的类之后，开始去wxml里添加for循环

<view wx:for="{{sweet_all.sweets}}" wx:key="key" class="forItemBorder">
		<view class="text_name">糖度</view>
    <input class="input_type" bindinput="get_sweet" placeholder="请输入糖度" id="sweet-{{index}}"></input>
    <view class="text_name">糖度加价</view>
    <input class="input_type" bindinput="get_sweet_price" placeholder="请输入糖度加价" id="sweet-price-{{index}}"></input>
</view>

这样，界面上就会显示两个输入框，一个输入糖度，一个输入糖度对应的价格。

然后我们添加两个按钮

<button style="margin:5vw auto;" type="default" bindtap="add_sweet">增加一个糖度选项</button>
<button style="margin:5vw auto;" type="default" bindtap="remove_sweet">删去一个糖度选项</button>

分别用来添加和删除糖度的选项，两个具体的方法为

add_sweet:function(){
    let that = this;
    let sweet_all = that.data.sweet_all;
    sweet_all.sweets.push(new Sweet_detail())
    that.setData({
      sweet_all: sweet_all
    })
  },
  remove_sweet: function () {
    let that = this;
    if(that.data.sweet_all.sweets.length>1){
      let sweet_all = that.data.sweet_all;
      sweet_all.sweets.pop();
      that.setData({
        sweet_all: sweet_all
      });
    }
  },

其中if(that.data.sweet_all.sweets.length>1)该语句用于判断选项数量是否大于1.如果糖度选项为必选，则需要加上该条件，如果甜度选项部位必选，则可以不加上该条件。

--------------------------长长的分割线------------------------------------

手头忽然换了个项目。唔。等下一篇更新吧、、、