小程序?云开发

发布于:2021-07-19 11:45:20

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


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



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


需要注意的是,新建的小程序刚开启云服务的时候,需要点击左上角的云开发开通服务,并且首次开启需要等待十分钟左右才可以正常使用云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循环



糖度

糖度加价


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


然后我们添加两个按钮




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


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.如果糖度选项为必选,则需要加上该条件,如果甜度选项部位必选,则可以不加上该条件。


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


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

相关推荐

最新更新

猜你喜欢