前言

随着移动端的不断发展，人们大部分的办公及生活应用都开始趋向于移动端。然而在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() {
    }
})

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

前言