前言

随着移动端的不断发展，人们大部分的办公及生活应用都开始趋向于移动端。然而在2017年“微信之父”张小龙带领团队，开发了一款叫做微信小程序的东西，它的出现打破了人们认识移动端的隔膜，由以前的需要先下载app然后在开始工作的老式模式，逐渐的趋向于小程序app（无需下载）的形式。

一、微信小程序是什么？

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用的随开随用，用户只需要用微信扫一扫或者通过微信搜一下即可打开应用，使用完即可关闭，还可以把小程序添加到桌面，真正的做到了便捷方便，用完就走。

二、什么是微信小程序的云开发？

云开发为开发者提供完整的云端支持，弱化了后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

从开发流程来看，以往开发一个微信小程序需要经过产品功能构思、模块划分、原型设计、UI 设计、前端开发、后端开发、接口联调、测试上线等开发阶段。有了「小程序·云开发」后，前端工程师将可以独立实现前端开发、后端开发、接口联调工作，且无需太多后端知识。

三、首先我们要直到什么是微信小程序的云开发

微信小程序云开发是2018年9月腾讯上线的集云函数、云数据库、云储存和云调用等功能于一身的开放服务。云开发为开发者提供了完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，适用平台提供的API进行核心业务开发，即可实现快速上线的迭代，同时这一功能同开发者使用云服务相互兼容，并不互斥

三、代码实现

首页.wxml

<!-- 跳转到真的搜索界面 --><navigatorurl="../sousuo/sousuo"><van-searchvalue="{{ value }}"shape="round"background="#4fc08d"placeholder="请输入搜索关键词"/></navigator><viewstyle="height: 20rpx;"></view><!-- 轮播图开始 --><view><swiperindicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}"interval="{{interval}}"duration="{{duration}}"><blockwx:for="{{imgUrls}}"wx:key="index"><swiper-itemclass="LB_a"><imageclass="LB_b"src="{{item}}"/></swiper-item></block></swiper></view><!-- 轮播图结束 --><!-- 分类开始 --><viewclass="fenlei"><viewclass="fenlei_1"wx:for="{{fenlei}}"wx:key="index"><navigatorclass="fenlei_1"url="../product_fenlei/product_fenlei?name={{item.name}}"><imagesrc="{{item.src}}"style="height: 90rpx;width: 90rpx;border-radius: 20rpx;"></image><textstyle="font-size: 25rpx; color: #fff;">{{item.name}}</text></navigator></view></view><!-- 分类结束 --><van-dividercontentPosition="center"customStyle="color: white; border-color: #888888; font-size: 18rrpx;">产品展示</van-divider><!-- 产品列表开始 --><viewclass="product"><navigatorclass="product_1"wx:for="{{product}}"wx:key="index"url="../product_datail/product_datail?id={{item._id}}"><imagestyle="width: 200rpx;height: 200rpx;"src="{{item.src[0]}}"class="img"></image><viewclass="product_2"><text>{{item.name}}</text><textstyle="color: brown;font-size: 25rpx;">￥：{{item.price}}</text><textstyle="font-size:25rpx;font-weight: 300;color: #6d6b6b;">热度：{{item.num}}</text></view></navigator></view><!-- 产品列表结束 -->

首页.js

// pages/index/index.jsconstdb=wx.cloud.database()
Page({
/**     * 页面的初始数据     */data: {
product:[],
fenlei:[],
// 轮播图开始imgUrls: [
'cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/轮播图/7.jpg',
'cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/轮播图/1.jpg',
'cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/轮播图/5.jpg',
'cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/轮播图/22.jpg'          ],
indicatorDots: true,  //是否显示面板指示点autoplay: true,      //是否自动切换interval: 2000,       //自动切换时间间隔duration: 300,       //滑动动画时长inputShowed: false,
inputVal: "",
// 轮播图结束//商品列表开始pro_list:[],
//商品列表结束search_list:[],
search_case:false,
num:20    },
search_case_close(){
this.setData({
search_case:false        })
    },
//页面上拉触底事件onReachBottom:function(){
letthat=thiswx.showLoading({
title: '刷新中！',
duration:1000        })
letold_data=that.data.productconstdb=wx.cloud.database()
db.collection('product').skip(that.data.num)
        .get()
        .then(res=>{
this.setData({
product:old_data.concat(res.data),
num:that.data.num+20            })
if(res,data==""){
wx.showToast({
title: '加载完毕',
icon:'none'                })
            }
        })
        .catch(err=>{
console.error(err)
        })
console.log('circle 下一页');
    },
/**     * 生命周期函数--监听页面加载     */onLoad:function() {
// 分类开始letthat=thisdb.collection('fenlei').get({
success:function(res){
console.log('分类获取成功',res)
that.setData({
fenlei:res.data                })
            },
fail:function(res){
console.log('分类获取失败',res)
            }
        })
// 分类结束// 产品展示开始db.collection('product').get({
success:function(res){
console.log('商品获取成功',res)
that.setData({
product:res.data                })
            },
fail:function(rex){
console.log('商品获取失败',res)
            }
        })
// 产品展示结束    },
/**     * 生命周期函数--监听页面初次渲染完成     */onReady() {
    },
/**     * 生命周期函数--监听页面显示     */onShow() {
    },
/**     * 生命周期函数--监听页面隐藏     */onHide() {
    },
/**     * 生命周期函数--监听页面卸载     */onUnload() {
    },
/**     * 页面相关事件处理函数--监听用户下拉动作     */onPullDownRefresh() {
    },
/**     * 页面上拉触底事件的处理函数     */onReachBottom() {
    },
/**     * 用户点击右上角分享     */onShareAppMessage() {
    }
})

分类.wxml

<viewclass="lay_row_cen"style="height:100vh"><!-- 左边 --><scroll-viewstyle="width:25%;height:100%;border-right: 2rpx solid #e9e9e9;font-size: 25rpx;"scroll-y="true"><blockwx:for="{{fenlei}}"wx:key="index"><viewclass="lay_row_cen {{select_classify==item.name?'select_classify':'classify_def'}}"data-name="{{item.name}}"bindtap="select_classify"><text>{{item.name}}</text></view></block></scroll-view><!-- 右边 --><scroll-viewstyle="width:75%;height:100%;"scroll-y="true"><blockwx:for="{{goods}}"wx:key="index"><navigatorclass="lay_row_spa pad_20"url="../product_datail/product_datail?id={{item._id}}"><viewclass="lay_row_spa pad_20"><imagesrc="{{item.src[0]}}"class="goods_img"></image><viewclass="lay_col_spa"style="height:130rpx;width: 70%;"><viewclass="lay_row_sta"><text>{{item.name}}</text></view><viewclass="lay_row_spa"><textstyle="font-size: 25rpx;color: #888888;">已售：{{item.num}}</text><textstyle="font-size: 30rpx;color: #ff0101;">￥：{{item.price}}</text></view></view></view></navigator><van-dividerstyle="width:100%"custom-style="margin-top:10rpx;margin-bottom:10rpx"></van-divider></block></scroll-view></view>

分类.js

// pages/classify/classify.jsconstdb=wx.cloud.database()
Page({
/**     * 页面的初始数据     */data: {
select_classify:"全部",
fenlei:[{name:"全部"}],
goods:[]
    },
// 获取商品get_goods(fenlei){
letthat=thisif(fenlei=='全部'){
db.collection('product').get().then(res=>{
console.log("获取商品",res.data)
that.setData({
goods:res.data                })
            })
        }else{
db.collection('product').where({
select_classify:fenlei,
            })
            .get()
            .then(res=>{
console.log("获取商品",res.data)
that.setData({
goods:res.data                })
            })
        }
    },
// 选择分类select_classify(e){
letthat=thisletname=e.currentTarget.dataset.namethat.setData({
select_classify:name        })
that.get_goods(name)
    },
// 获取分类get_classify(){
letthat=thisletfenlei=that.data.fenleiconsole.log(fenlei)
db.collection('fenlei').orderBy('num','asc').get().then(res=>{
console.log("获取分类",res.data)
that.setData({
fenlei:fenlei.concat(res.data),
            })
        })
    },
/**     * 生命周期函数--监听页面加载     */onLoad:function(options) {
letthat=thisthat.get_classify()
that.get_goods("全部")
    },
/**     * 生命周期函数--监听页面初次渲染完成     */onReady() {
    },
/**     * 生命周期函数--监听页面显示     */onShow() {
    },
/**     * 生命周期函数--监听页面隐藏     */onHide() {
    },
/**     * 生命周期函数--监听页面卸载     */onUnload() {
    },
/**     * 页面相关事件处理函数--监听用户下拉动作     */onPullDownRefresh() {
    },
/**     * 页面上拉触底事件的处理函数     */onReachBottom() {
    },
/**     * 用户点击右上角分享     */onShareAppMessage() {
    }
})

购物车.wxml

<viewstyle="margin-bottom: 200rpx;"><blockwx:for="{{product}}"wx:key="_id"><!-- 商品信息模块 --><viewclass="product_list"><viewclass="product_list_1"><viewclass="product_list_11"bindlongpress="delete_product"><checkbox-groupbindchange="xuanze"data-id="{{item._id}}"><checkboxvalue="{{item._id}}"checked="{{item.product_checked}}"></checkbox></checkbox-group><viewclass="product_list_3"><imagesrc="{{item.product_src}}"style="width: 100rpx;height: 100rpx;"></image><viewclass="product_list_2"><viewstyle="font-size:20px">{{item.product_name}}</view><viewstyle="color: red;">￥：{{item.product_price}}</view></view><viewclass="jiajian"><van-iconname="plus"data-id="{{item._id}}"bindtap="product_jia"/><view><view>{{item.product_num}}</view></view><van-iconname="minus"data-id="{{item._id}}"bindtap="product_jian"data-product_num="{{item.product_num}}"/></view></view></view></view></view></block></view><van-emptydescription="请添加商品"/><viewclass="bottom"><van-submit-barprice="{{money}}"button-text="提交订单"bind:submit="pay"safe-area-inset-bottom=""tip="{{ true }}"><van-tagtype="primary"data-name="删除"bindtap="delete">删除</van-tag></van-submit-bar></view>

购物车.js

// pages/shopping_car/shopping_car.jsconstdb=wx.cloud.database()
const_=db.commandPage({
/**     * 页面的初始数据     */data: {
product:[],
money:0,
product_now:[],
product_id:[],
delet_id:[]
    },
//支付事件pay:function(e){
letthat=thisdb.collection('shopping_car').where({
product_checked:"true"        }).get({
success:function(res){
console.log('获取商品成功',res)
if(res.data.length==0){
wx.showToast({
title: '您还未选择商品',
icon:"none"                    })
                }else{
wx.redirectTo({
url: '../tijiaodingdan/tijiaodingdan',
                    })
                }
            },fail:function(res){
console.log('获取商品失败',res)
            }
        })
    },
//计算金额get_money_sum(){
letthat=thisletmoney_sum=0for(varx=0;x<that.data.product.length;x++){
if(that.data.product[x].product_checked=="true"){
money_sum=money_sum+(that.data.product[x].product_num*that.data.product[x].product_price)
            }
        }
that.setData({
money:money_sum*100        })
    },
//选择事件xuanze:function(e){
letthat=thisconsole.log(e)
that.setData({
delet_id:that.data.delet_id.concat(e.detail.value[0])
        })
if(e.detail.value.length!==0){
db.collection('shopping_car').doc(e.target.dataset.id).update({
data:{
product_checked:"true"                },success:function(res){
db.collection('shopping_car').get({
success:function(res){
console.log('获取购物车商品成功',res)
that.setData({
product:res.data,
                            })  
that.get_money_sum()
                        },fail:function(res){
console.log('获取购物车商品失败',res)
                        }
                    })
                }
            })
        }else{
db.collection('shopping_car').doc(e.target.dataset.id).update({
data:{
product_checked:""                },success:function(){
db.collection('shopping_car').get({
success:function(res){
console.log('获取购物车商品成功',res)
that.setData({
product:res.data,
                            })
that.get_money_sum()
                        },fail:function(res){
console.log('获取购物车商品失败',res)
                        }
                    })
                }
            })
        }
    },
//商品删除delete:function(){
letthat=thiswx.cloud.callFunction({
name:"product_delet",
success:function(res){
console.log('删除商品成功',res)
db.collection('shopping_car').get({
success:function(res){
console.log('获取购物车商品成功',res)
that.setData({
product:res.data,
                        })
that.get_money_sum()
                    },fail:function(res){
console.log('获取购物车商品失败',res)
                    }
                })
            },fail:function(res){
console.log('删除商品失败',res)
            }
        })
    },
//商品数量增加事件product_jia:function(e){
letthat=thisconsole.log(e)
db.collection('shopping_car').doc(e.target.dataset.id).update({
data:{
product_num: _.inc(1)
            },success:function(res){
console.log('商品数量加一',res)
db.collection('shopping_car').get({
success:function(res){
console.log('获取购物车商品成功',res)
that.setData({
product:res.data                        })
that.get_money_sum()
                    },fail:function(res){
console.log('获取购物车商品失败',res)
                    }
                })
            },fail:function(res){
console.log('获取商品价格失败',res)
            }
        })
    },
//商品数量减少事件product_jian:function(e){
letthat=thisconsole.log(e)
if(e.target.dataset.product_num<2){
wx.showToast({
title: '客观不能再少了',
icon:"none"            })
        }else{
db.collection('shopping_car').doc(e.target.dataset.id).update({
data:{
product_num: _.inc(-1)
               } ,success:function(res){
console.log('商品数量加一',res)
db.collection('shopping_car').get({
success:function(res){
console.log('获取购物车商品成功',res)
that.setData({
product:res.data                           })
that.get_money_sum()
                       },fail:function(res){
console.log('获取购物车商品失败',res)
                       }
                   })
               },fail:function(res){
console.log('获取商品价格失败',res)
               }
            })
        }
    },
/**     * 生命周期函数--监听页面加载     */onLoad:function(options) {
letthat=thisdb.collection('shopping_car').get({
success:function(res){
console.log('获取购物车商品成功',res)
that.setData({
product:res.data                })
that.get_money_sum()
            },fail:function(res){
console.log('获取购物车商品失败',res)
            }
        })
    },
/**     * 生命周期函数--监听页面初次渲染完成     */onReady() {
    },
/**     * 生命周期函数--监听页面显示     */onShow() {
letthat=thisdb.collection('shopping_car').get({
success:function(res){
console.log('获取购物车商品成功',res)
that.setData({
product:res.data                })
that.get_money_sum()
            },fail:function(res){
console.log('获取购物车商品失败',res)
            }
        })
    },
/**     * 生命周期函数--监听页面隐藏     */onHide() {
    },
/**     * 生命周期函数--监听页面卸载     */onUnload() {
    },
/**     * 页面相关事件处理函数--监听用户下拉动作     */onPullDownRefresh() {
    },
/**     * 页面上拉触底事件的处理函数     */onReachBottom() {
    },
/**     * 用户点击右上角分享     */onShareAppMessage() {
    }
})

我的.wxml

<!-- 个人信息开始 --><viewclass="lay_row_spa pad_20 user_msg lay_row_sta"><viewclass="lay_row_sta "style="width:60%;"><imageclass="avg"src="{{user.userInfo.avatarUrl}}"class="avg"></image><textstyle="font-size: 30rpx;font-weight: bolder;color: #FFFF;">{{user.userInfo.nickName}}</text></view><!-- <text style="font-size: 25rpx;font-weight: bolder; color: #FFFF;">个人信息</text> --></view><!-- 个人信息结束 --><!-- 内容总模块开始 --><view><!-- 订单管理开始 --><viewclass=" order_case"style="margin-top: 30rpx;height: 100rpx;"><navigatorurl="../DDguanli/DDguanli"class="WDDD"><imagestyle="width: 80rpx;height: 80rpx;margin-left: 20rpx;margin-top: 10rpx;"src="cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/我的img/222.png"></image><viewclass="WDDD1"style="margin-left: 50rpx;"><textstyle="font-size: 40rpx;">我的订单</text></view><van-iconstyle="margin-left: 370rpx;"name="arrow"/></navigator></view><!-- 订单管理结束 --><!-- 功能模块开始 --><viewclass="lay_col_cen pad_20 fun_case"><!-- 第一行开始 --><viewclass="lay_row_sta fun_row"><viewclass="lay_col_cen fun_item"bindtap="my_address"><imagesrc="cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/我的img/dizhi.png"class="fun_img"></image><text>我的地址</text></view><viewclass="lay_col_cen fun_item"bindtap="show_login_case"><imagesrc="cloud://shangcheng-1gv76n6pf3af957d.7368-shangcheng-1gv76n6pf3af957d-1312670923/我的img/houtaiyunying.png"class="fun_img"></image><text>商户平台</text></view></view><!-- 第一行结束 --><!-- 第三行结束 --></view><!-- 功能模块结束 --></view><!-- 内容总模块结束 --><!-- 登录弹窗开始 --><van-popupshow="{{ show_login }}"roundposition="bottom"custom-style="height: 60%"closeablebind:close="close_login_case"><viewclass="lay_col_sta pad_20"><viewclass="lay_row_cen"style="height:100rpx"><text>登录</text></view><viewclass="lay_row_sta"style="width:80%;margin-top: 80rpx;"><van-iconname="friends-o"/><inputtype="text"placeholder="账号"style="margin-left:20rpx"data-name="username"bindinput="input_msg"/></view><van-dividerstyle="width:80%"custom-style="margin-top:10rpx;margin-bottom:10rpx"></van-divider><viewclass="lay_row_sta"style="width:80%;margin-top: 40rpx;"><van-iconname="goods-collect-o"/><inputtype="password"placeholder="密码"style="margin-left:20rpx"data-name="password"bindinput="input_msg"/></view><van-dividerstyle="width:80%"custom-style="margin-top:10rpx;margin-bottom:10rpx"></van-divider><buttonstyle="background-color:#4fc08d;color:#FFFF;width:70%;margin-top:100rpx"disabled="{{is_login?'true':''}}"bindtap="login_admin">登录</button></view></van-popup><!-- 登录弹窗结束 -->

我的.js

// pages/wode/wode.jsconstdb=wx.cloud.database()
constapp=getApp()
Page({
/**     * 页面的初始数据     */data: {
user:{},
show_login:false,
username:"",
password:"",
is_login:false    },
login_admin(){
letthat=thiswx.showLoading({
title: '登陆中',
        })
if(that.data.username==''||that.data.password==''){
wx.showToast({
title: '请输入账号密码',
icon:"none"            })
        }else{
that.setData({
is_login:true            })
db.collection('admin').where({
username:that.data.username,
password:that.data.password,
            }).get().then(res=>{
console.log('登录',res)
that.setData({      
is_login:false                })
wx.hideLoading()
if(res.data.length==0){
wx.showToast({
title: '账号或密码错误',
                    })
                }else{
app.globalData.admin=res.data[0]
wx.navigateTo({
url: '../admin_index/admin_index',
                    })
                }
            })
        }
    },
//输入信息开始input_msg(e){
letthat=thisletname=e.currentTarget.dataset.namethat.setData({
            [name]:e.detail.value        })
    },
// 输入信息结束// 后台运营关闭登录框开始close_login_case(){
this.setData({
show_login:false        })
wx.showTabBar()
    },
// 后台运营关闭登录框结束// 后台运营显示登录框开始show_login_case(){
this.setData({
show_login:true        })
wx.hideTabBar()
    },
// 后台运营显示登录框结束//我的地址开始my_address:function(e){
wx.getSetting({
success(res){
console.log(res)
if(res.authSetting['scope.address']){
wx.authorize({
scope: 'scope.address',
success(){
wx.chooseAddress({
success(res){
console.log(res)
                          },
                        })
                    }
                  })
              }else{
wx.openSetting({
success(res){
console.log(res.authSetting)
                    }
                  })
              }
          }
        })
    },
//我的地址结束 // 用户注册开始register(){
letthat=thiswx.showModal({
title: '提示',
content: '您还未注册，是否注册',
success (res) {
if (res.confirm) {
console.log('用户点击确定')
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (userInfo) => {
console.log(userInfo)
wx.showLoading({
title: '注册中',
                        })
db.collection('user').add({
data:{
userInfo:userInfo.userInfo                            }
                        }).then(user=>{
wx.hideLoading()
wx.showToast({
title: '注册成功！',
                            })
that.login()
                        })
                    }
                  })
              } elseif (res.cancel) {
console.log('用户点击取消')
              }
            }
          })
    },
// 用户注册结束// 用户登录开始login(){
letthat=thisdb.collection('user').get().then(res=>{
if(res.data.length>0){
that.setData({
user:res.data[0]
                })
            }else{
that.register()
            }
        })
    },
// 用户登录结束/**     * 生命周期函数--监听页面加载     */onLoad(options) {
letthat=thisthat.login()
    },
/**     * 生命周期函数--监听页面初次渲染完成     */onReady() {
    },
/**     * 生命周期函数--监听页面显示     */onShow() {
    },
/**     * 生命周期函数--监听页面隐藏     */onHide() {
    },
/**     * 生命周期函数--监听页面卸载     */onUnload() {
    },
/**     * 页面相关事件处理函数--监听用户下拉动作     */onPullDownRefresh() {
    },
/**     * 页面上拉触底事件的处理函数     */onReachBottom() {
    },
/**     * 用户点击右上角分享     */onShareAppMessage() {
    }
})

基于云开发小程序云商城,基本页面的创建全部代码编写

前言

一、微信小程序是什么？

二、什么是微信小程序的云开发？

三、首先我们要直到什么是微信小程序的云开发

三、代码实现

首页.wxml

首页.js

分类.wxml

分类.js

购物车.wxml

购物车.js

我的.wxml

我的.js

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

基于云开发小程序云商城,基本页面的创建全部代码编写

前言

一、微信小程序是什么？

二、什么是微信小程序的云开发？

三、首先我们要直到什么是微信小程序的云开发

三、代码实现

首页.wxml

首页.js

分类.wxml

分类.js

购物车.wxml

购物车.js

我的.wxml

我的.js

热门文章

最新文章

相关课程

相关电子书

相关实验场景