基于云开发创建（小程序云商城,基本页面的创建及动态代码的编写）

2022-10-08 190

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 基于云开发创建（小程序云商城,基本页面的创建及动态代码的编写）

首先我们要知道什么是微信小程序的云开发

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

云调用

作用：原生微信服务集成

详情：基于云函数免鉴权使用小程序开放接口的能力，包括服务端调用、获取开放数据库能力

云函数

作用：无需搭建数据库

详情：一个既可以在小程序前端操作，也能在云函数中读写的json数据库

云数据库

作用：无需搭建数据库

详情：一个既可以在小程序前端操作，也能在云函数中读写的json数据库

云储存

作用：无需自建储存和CDN

详情：在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理

总结：云开发为微信小程序开辟了一条新的道路，能让开发者更方便的编写自己的代码，简化了后端程序语言编写并部署在服务器上的后端功能函数中，可以通过JavaScript脚本语言与微信原生脚本语言完成编写！

好，我们开始创建一个基本云商城小程序的必须页面及代码！！！

先展示一下效果：

思路：

首先我们的思路是：用四个页面来作为小程序的显示页面，分别为：首页、分类、购物车、我的页面。

1.首页：

搜索框一个（搜索框中我的们输入在数据库中的产品名字，点击某个产品时，通过wxml的<navigator/>标签跳转也可以，通过js中编写跳转命令也可以。实现搜索框可以参考上方的网址！）

轮播图一个（轮播图我们可以在js中写一个如下：）

<!-- 轮播图开始 --><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><!-- 轮播图结束 -->

在page里面的data中：

下方的图片是已经上传到云储存中的图片！

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: "",

分类区（如下：）

<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>

其中{{itme.name}}及{{itme.src}}等写法时动态从wx:for获取到的{{fenlei}}云数据库中的数据，如果wx:for获取指定的云数据库后，后面的动态加载可使用itme.***来实现！

letthat=thisdb.collection('fenlei').get({
success:function(res){
console.log('分类获取成功',res)
that.setData({
fenlei:res.data                })
            },
fail:function(res){
console.log('分类获取失败',res)
            }
        })

注意：微信小程序中要尽量用ES6的语句！

产品展示区（如下）：

<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>

{{itme***}}运用的与上面的原理相同！

db.collection('product').get({
success:function(res){
console.log('商品获取成功',res)
that.setData({
product:res.data                })
            },
fail:function(rex){
console.log('商品获取失败',res)
            }
        })

通过db.collection('product').get来获取到云数据库product中的数据，从而显示在wxml页面上

2.分类（类似前端中的选显卡）：

需要创建一个传统的小程序竖状分类样式

分类左右两边（左边是用来用户选择点击事件，右侧则是根据用户的点击从而携带的某个页面的参数显示数据内容）

如下：

<!-- 左边 --><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>

在编写右侧的同时我们也要添加每个分类中商品的跳转代码，用于用户点击分类中的商品时随时可跳转到商品详情界面。

3.购物车：

需要创建一个背景图及下面的动态合计金额数的js代码块区域

首先我们需要创建一个云数据库用来存放用户添加商品到购物车时的商品数据存放（如下：）

constdb=cloud.database()
const_=db.command// 云函数入口函数exports.main=async (event, context) => {
constap=cloud.getWXContext()
try{
returnawaitdb.collection('shopping_car').where({
_openid:ap.OPENID,
product_checked:"true"        }).remove()
    }catch(e){
console.error(e)
    }
}

然后我们再通过云函数代码来实现 product云数据库的商品的_id与shopping_car中的product_id的相等的判断条件。

<blockwx:for="{{product}}"wx:key="_id">

最后从购物车.wxml用微信原生的wx:for来将product云数据库中的数据循环动态显示出来。

4.我的：

需要创建一个获取用户信息的区域来获取并显示我们获取到的用户信息。同时需要创建三个区域分别为：我的订单，我的地址，商户平台！

获取用户信息（可以使用微信原生代码实现，如下：）

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()
                        })
                    }
                  })

我的订单、我的地址、商户平台（可以分别编写三个隐藏页面当用户点击时跳转）再根据用户所需来创建对应的云数据库用来完成用户一系列的个人操作！

5.隐藏页面：

（商品详情页面，通过点击商品列表或者在搜索框中点击某一个商品的区域跳转过去，并加以显示的页面）