教你如何复制APP微信小程序(复制源代码)

最近在研究微信小程序的开发，也在和两个同学一起复制微信小程序。这里主要分享一下我的学习过程和我踩过的一些坑，希望对你有帮助。

微信开发者工具VScode代码编辑器APP微信小程序的开发与编写有赞vant组件库阿里巴巴矢量图标库markman(颜色距离)整体架构。本项目基于小程序云开发，使用的模板是云开发快速入门模板。由于是全栈项目，前端采用applet支持的wxml+wxss+js开发模式，采用BEM命名规范。后台使用云数据库进行数据管理。【相关学习推荐:小程序开发教程】项目中我负责的部分主要如下(部分数据以固定数据的形式写在config中，js文件通过module.exports公开，需要引用时在页面对应的js头中引入，例如const {} = require('../../../config/buys ')。我在项目中使用了很多vant组件，所以在构建npm包时需要引入vant。详见Zan vant的npm安装。当页面使用第三方组件时，必须在对应的json文件中声明，为了不重复工作，可以直接在app.json中声明。示例:(" usingComponents & quot:& quotvan-搜索& quot:& quot@ vant/weapp/search/index & quot；})

| -配置对应数据| -assem . js | -buys . js | -detail . js | -kind . js | -pages | -buy _ Page | -Page | -assem筛选排序页面| -buy购买首页| -详细商品详情页| -种类品牌分类页面| -商品标识介绍页面| -搜索搜索页面项目策划在做这个小程序之前，我会分析每个页面对应的功能，了解这个小程序的交互细节，了解这大致可以分为四个步骤:分析页面、创建数据集、解构页面基本布局、数据绑定和跳转。参考微信小程序，以下是我的小程序的tabBar。(有点粗糙，但还是能看出来)

"tabBar & quot:{ & quot选定的颜色& quot:& quot#000000&quot，& quot边框样式& quot:& quot白色& quot，& quot背景颜色& quot:& quot# fff & quot，& quot列表& quot：

数据集合建立后，需要修改数据权限才能正常访问。

这些操作可以在数据库中执行。请注意，导入的数据格式需要是。csv或。json文件。您可以先建立如何使用excel表格将数据集转换成相应的格式文件，并直接导入数据库。

Const db = wx.cloud.database() //云数据库constdewucllection = db . collection(&；#39;吴德& amp#39;)//将数据采集项导入js文件的解构下面是我主要实现的object APP小程序的界面。

接下来，解构每一页的细节。

购买主页

购买家居风格

& ltview class = & quot页面& quot& gt& lt！--使用van-sticky设置dewu-hd天花板搜索栏--& gt；& ltvan-sticky & gt；& lt！-- dewu-hd采用flex布局-->；& ltview class = & quotdewu -HD & quot；& gt& ltview class = & quotdewu -hd-search & quot；bindtap = & quotgotoSearch & quot& gt& ltvan-搜索占位符= & quot搜索单号" disabled />& lt/view & gt；& ltview class = & quotdewu -种类& quotbindtap = & quot种类& quot& gt& ltimage src = & quot"& gt& lt/image & gt；& lt/view & gt；& lt/view & gt；& lt/van -sticky & gt；& lt！-- van-tabs实现了购买页面的导航和内容页面对应的--tabs > & lt；van-tabs class = & quot；dewu -tabs & quot；& gt& ltvan-tab title = & quot；推荐" & gt& ltview class = & quotdewu -tip & quot；& gt& ltview class = & quotdewu -tip -img -HD & quot；& gt& ltimage src = & quot"& gt& lt/image & gt；& lt/view & gt；& lt！--使用van-网格布局设置边框隐藏和快速定位-->& ltvan-网格& gt& ltvan -grid -项目使用-插槽& gt& lt图像样式= & quot"src = & quot"& gt& lt/image & gt；& lttext & gt真实担保

这个页面的布局并不复杂，但是我写这个布局的时候还是遇到了一个坑(感觉是自己跳进去的)。我做dewu-hd吊顶的时候用van-sticky直接包裹，但实际效果是dewu-hd下面也需要固定拉环。你不能在这里使用与上面相同的方法。实际效果会让整个van-标签页吸顶，页面无法滑动。其实你只需要给van-tabs添加一个sticky属性，设置offset-top。请注意，这两个属性需要一起使用才能生效。

获取商品项async onLoad() {this.proData() //获取推荐数据项this.shoeData() //获取鞋类数据项}，Prodata(){ const { data } = AwaitDewucllection。其中({安利:db . command . eq(&；#39;真实& amp#39;) }) .字段({ //获取指定数据项以提高性能_ ID: true，PIC: true，title: true，buyer: true，price: true})。get ()//console.log(数据)；this.setData({ produces: data，})} shoeData(){ let data1 = await dewuCollection。其中({ type: 1 })。get()//console . log(data1 . data)；this . setdata({ shoes:data1 . data })}绑定详情页goto detail(e){//console . log(e)；wx . navigate to({ URL:'/pages/buy _ page/page/detail/detail？Id = '+e . current target . dataset . ID，}}，利用商品_id的唯一属性，当数据项ID设置为_id时，跳转到详情页，显示对应的数据。

产品详情页面

产品详情页面样式

& ltview class = & quot页面& quot& gt& lt！--头滑块和标题-->；& ltview class = & quotdetail _ hd & quot& gt& ltswiper class = & quotswiper _ _ hd & quot& gt& ltswiper -item class = & quot；swiper _ hd & quot& gt& lt/swiper -item & gt；& lt/swiper & gt；& ltview class = & quotdots1 & quot& gt& ltview class = & quot{ {当前= =索引？& amp#39;主动& amp#39;:& amp#39;& amp#39;} } & quot& gt& lt/view & gt；& lt/view & gt；& ltview class = & quotdetail _ hd-标题& quot& gt{ { img.digest } } & lt/view & gt；& ltview class = & quotdetail _ hd-价格& quot& gt& lttext id = & quotp2 & quot& gt{ { img.price } } & lt/text & gt；& lt/view & gt；& lt/view & gt；& ltvan-电池class = & quot尺寸& quot绑定:click = & quotshowPopup1 & quot& gt& ltview class = & quotsize -l & quot；& gt选择尺寸

& ltvan-弹出可关闭位置= & quot底部& quotcustom -style = & quot；max -宽度:90% & quot；& gt& ltview class = & quotdetail _ size -HD & quot；& gt& ltview class = & quotdetail _ size -hd-img & quot；& gt& ltimage bindtap = & quot预览图像& quotmode = & quotaspectFit&quotsrc = & quot{ { img.pic } } & quot& gt& lt/image & gt；& lt/view & gt；& ltview class = & quotdetail _ size -hd-price & quot；& gt& lt文本样式= & quotfont -size:25 rpx；"& gt@& lt；/text & gt；& lttext wx:if = & quot；{ { activeSizeIndex = = -1 } } & quot；& gt--& lt；/text & gt；& lttext wx:if = & quot；{ { activeSizeIndex = = index } } & quot；& gt{ { item.price } } & lt/text & gt；& lt/view & gt；& lt视图& gt& ltimage src = & quot"& gt& lt/image & gt；& lttext wx:if = & quot；{ { activeSizeIndex = = -1 } } & quot；& gt请选择一个产品

& ltvan-sticky sticky offset -top = & quot；{ { 180 } } & quot& gt& ltview class = & quothead & quot& gt& ltview class = & quotdetail _ produce -HD & quot；& gt相关建议

Get commodity details async onLoad(options){//Get commodity data console . log(options)对应_ idlet id = options . id console . log(id)；wx.cloud.database()。收藏(& amp#39;吴德& amp#39;) .文档(id)。获取()。然后(res = & gt{ console . log(RES)；This.setdata ({img: res.data})}，弹出层showPopup() {//显示弹出层this.setData({ show: true，})；}，once lost(){//关闭弹出层this.setData({ show: false，})；}，选择大小pick size(e){ let flag = e . current target . dataset . flag let index = e . current target . dataset . indexif(flag = = index)。{ this . setdata({ activeSizeIndex:-1，flag:-1 })} else { this . setdata({ activeSizeIndex:Index，Flag: index}}}，点击大小，flag==index为选中状态，再次点击或点击其他大小时设置为未选中状态，否则使Flag等于index，使其成为选中状态。

搜索页面

搜索页面样式

& ltview class = & quot页面& quot& gt& ltview class = & quot搜索& quot& gt& ltvan-stichy & gt；& ltvan-搜索值= & quot{ { value } } & quotbind:clear = & quot；onClear & quotplaceholder = & quot输入商品名称和商品编号"/>；& lt/van -stichy & gt；& lt！--块封装flex布局-->；& ltblock wx:if = & quot；{ { showHistory = = true & amp& amphistoryList.length & gt0 } } & quot& gt& ltview class = & quot历史容器& quot& gt& ltview class = & quot标题& quot& gt历史搜索

搜索记录async onsearch(e){//console . log(e)；如果(！e . detail . trim()){ wx . show toast({ title:& amp；#39;请输入贸易& amp & amp；#39;，}) return } let {value，history list } = this . data if(history list . index of(value)！= = -1){ history list . splice(history list . index of(value)，1)} history list . un shift(value)this . setdata({ history list })wx . setstoragesync(& amp；#39;价值与价值。#39;，historyList) let关键字= e.detail.trim() let结果= await dewuCollection。其中({ title: db。RegExp({ regexp: keyword，options:& amp；#39;我& amp#39;}) }) .get()if(results . data . length = = 0 | | keyword = = & amp；#39;& amp#39;){ wx . show toast({ title:& amp；#39;不存在&；#39;+keyword，}) } else { await dewuCollection。其中({ title: db。RegExp({ regexp: keyword，options:& amp；#39;我& amp#39;}) }) .order by(& amp；#39;热& amp#39;，& amp#39;desc & amp；#39;) .获取()。然后(res = & gt{ console . log(RES)；this . setdata({ results:RES . data })} }，onload(){ this . getsearch history()//获取历史搜索}，getsearch history(){ let history list = wx . getstoragesync(&；#39;价值与价值。#39;)if(history list){ this . setdata({ history list })}，加载页面时，从本地存储中获取历史搜索记录，确定search onSearch时判断值是否为空。将合法值插入historyList，这里使用time unshift方法，这样可以保证最近的搜索记录显示在前面，使用正则表达式模糊查询数据库中的匹配项，存储在数组结果中。当结果出来时。长度>；0以显示商品列表。使用wx.setStorageSync将值存储在缓存中，wx.getStorageSync可以获取并打印出来。通过indexOf方法判断该值是否已经存在，如果已经存在，则删除historyList中的该项。

历史搜索异步历史搜索(e){//console . log(e)；让历史列表= this.data.historyList让值=历史列表

类别页面样式

& ltview class = & quot页面& quot& gt& ltvan-sticky & gt；& ltview class = & quot搜索& quotbindtap = & quotgotoSearch & quot& gt& ltvan-搜索占位符= & quot搜索商品" input -align = & quot；中心& quotdisabled/& gt；& lt/view & gt；& lt/van -sticky & gt；& ltview class = & quot种类& quot& gt& ltview class = & quot高清& quot& gt& ltscroll -view class = & quot；scroll -view -left & quot；& gt& ltview class = & quotscroll -view -left -item { { activenaviindex = = index？& amp#39;主动& amp#39;:& amp#39;& amp#39;} } & quot& gt& lttext & gt{ { } } & lt/text & gt；& lt/view & gt；& lt/scroll -view & gt；& lt/view & gt；& ltview class = & quotbd & quot& gt& ltscroll -view & gt；& lt视图& gt& ltview class = & quotkind -title & quot；& gt& ltvan-分隔符contentPosition = & quot中心& quot& gt{ { } } & lt/van -divider & gt；& lt/view & gt；& ltvan-网格& gt& ltvan-grid -item & gt；{ { } } & lt/van -grid -item & gt；& lt/van -grid & gt；& lt/view & gt；& lt/scroll -view & gt；& lt/view & gt；& lt/view & gt；& lt/view & gt；Scroll-view主要用于设置分类页面的垂直滚动。当你点击左侧的scroll-view-left-item时，该物品变为#00cbcc，并显示相应的品牌类别物品kindsItem。整体采用Flex布局，这里的坑是scroll-view-left。font-size应设置为0，font应设置在子元素scroll-view-left-item中，以避免block元素边距对布局的影响。

初始化类别onload:function(options){ this . setdata({ kind nav:kind nav，kindall: kinditem，//console . log(this . data . kindall))；let种类=

排序页面样式

& ltview class = & quot页面& quot& gt& ltvan-sticky & gt；& ltview class = & quot搜索& quotbindtap = & quotgotoSearch & quot& gt& ltvan-搜索占位符= & quot{ { titles } } & quotdisabled/& gt；& lt/view & gt；& ltview class = & quottab & quot& gt& lt查看wx:for = & quot；{ { tabs } } & quotwx:key = & quot；索引& quotdata -index = & quot；{ { index } } & quotclass = & quottab -item { { activeTabIndex = = index？& amp#39;主动& amp#39;:& amp#39;& amp#39;} } & quotbindtap = & quot更改项目& quot& gt& lttext & gt{ { item.title } } & lt/text & gt；& lt图像样式= & quot宽度:26rpx身高:26rpx"src = & quot{ { item.pic } } & quot& gt& lt/image & gt；& lt/view & gt；& lt/view & gt；& lt/van -sticky & gt；& lt/view & gt；选项卡使用弹性布局。关于商品的布局，请参考购买页面上的商品布局。

& ltvan-popup & gt；& ltscroll -view class = & quot；pop & quotscroll -y & gt；& ltvan-塌陷& gt& ltvan -collapse -item title = & quot；适用人群" value = & quotAll " name = & quot1 & quot& gt& lt/van -collapse -item & gt；& ltvan-网格column -num = & quot；3 & quotgutter = & quot{ { 10 } } & quot& gt& ltvan-grid -item class = & quot；{{activeIndex1==index？& amp#39;active1 & amp#39;:& amp#39;& amp#39;} } & quot& gt{ { } } & lt/van -grid -item & gt；& lt/van -grid & gt；& lt/van -collapse & gt；& ltvan-goods -action & gt；& ltbutton & gt重置

初始商品排序asynconload(选项){//console.log(选项)；Lettitle =选项。titletdata1 = AwaitDewuCollection。其中({ kind:title//绑定跳转时获取对应数据(kind唯一)})。get()//console . log(data1)；This.setdata ({goods: data1.data，titles: title})}，基本排序异步变化项(e){//console . log(e)；设index = e.currenttarget.dataset.index//index对应排序方法this . setdata({ activetabindex:index })//console . log(index)；If(index == 1) {//销售排序等待吴德集合。哪里({kind:这个。数据。标题})。排序依据(&；#39;买家& amp#39;，& amp#39;desc & amp；#39;) .获取()。然后(res = & gt{ this.setData({ goods: res.data，index:index })//console . log(this . data . index)；})} if(index == 0) {//综合排序AwaitDewCollection。哪里({kind:这个。数据。标题})。获取()。然后(RES = > { this . setdata({ goods:RES . data })} } if(index = = 2 & amp；& ampThis.data.flag == -1) {//排序awaitdewucllection . where({ kind:this . data . titles })。order by(&；#39;价格& amp#39;，& amp#39;desc & amp；#39;) .获取()。然后(res = & gt{ this.setData({ goods: res.data，flag:1 })})return } if(index = = 3){//创建时间排序等待吴德集合。其中({kind: this.data.titles})。排序依据(&；#39;ctime & amp#39;，& amp#39;desc & amp；#39;) .获取()。然后(res = & gt{ this . setdata({ goods:RES . data })} } if(index = = 4){//过滤层this.setdata ({show: true，})} else if(index = = 2 &；& ampThis.data.flag == 1) {//排序awaitdewucllection . where({ kind:this . data . titles })。排序依据(&；#39;价格& amp#39;，& amp#39;asc & amp#39;) .获取()。然后(res = & gt{this.setdata ({goods: res.data，flag: -1})}}，设置一个flag属性的默认值为-1，当flag==-1时点击价格的降序，当flag==1和flag==1时点击价格的升序，设置flag==-1。

筛选排序pick(e){ let flag = e . current target . dataset . flag let index = e . current target . dataset . index let CD = this . data . human[index]。。kind if(flag = = index){ this . setdata({ active index 1:-1，flag1: -1，cd1:& amp；#39;& amp#39;})} else { this . setdata({ active index 1:index，flag1: index，cd1: cd }) } }，Filter reset replace() {//点击重置按钮将所有过滤条件恢复为默认this.setdata ({flag1: -1，activeindex 1: -1，flag2: -1，activeindex 2: -1，flag3: -1，activeindex 3: -1，CD1:&；#39;& amp#39;，Cd2:& amp；#39;& amp#39;，cd3: 0，cd4: 10000000，})}，这里是一个坑，不能在data (num:Infinity)中声明，这里无穷大不会生效。目前，优化被声明为常数。

确认筛选asyncicheck(){//点击确定按钮筛选显示结果let cd3 = number(this . data . cd3)let CD4 = number(this . data . CD4)= = 0？1000000:Number(this . data . CD4)let index = Number(this . data . index)if(this . data . cd1！= & amp#39;& amp#39;& amp& ampthis.data.cd2！= & amp#39;& amp#39;){等待dewuCollection。其中({ kind: this.data.titles，sex: this.data.cd1，brand: this.data.cd2，price: _。gt(cd3)。和(_)。lt(cd4))，})。获取()。然后(res = & gt{这个。setdata ({goods: res.data，show: false，})}) return}，难坑< van -grid -item use -slot wx:for = & quot；{ { shoes } } & quotdata -item = & quot；{ { item } } & quotwx:key = & quot；索引& quotdata -id = & quot；{ {项目。_ id } } & quotbindtap = & quotgotoDetail & quot& gt& lt/van -grid -item & gt；goto detail(e){//console . log(e)；wx . navigate to({ URL:& amp；#39;/pages/buy _ page/page/detail/detail？id = & amp#39;+e.currenttarget.dataset.id，})}，跳转到详情页，保留对应数据项。这里利用了_id的唯一性，将每一项的_id赋给data-id。当id相等时，可以跳转并接受_id对应的数据。

& ltvan-grid -item class = & quot；{{activeSizeIndex==index？& amp#39;size-主动& amp#39;:& amp#39;& amp#39;} } & quot使用-slot wx:for = & quot；{ { size } } & quotwx:key = & quot；索引& quotdata -flag = & quot；{ { flag } } & quotdata -index = & quot；{ { index } } & quotbindtap = & quotpickSize & quot& gt& ltview class = & quot尺寸& quot& gt& lttext id = & quotp3 & quot& gt{ { item.size } } & lt/text & gt；& lttext id = & quotp4 & quot& gt{ { item.price } } & lt/text & gt；& lt/view & gt；& lt/van -grid -item & gt；pickSize(e){ let Flag = e . current target . dataset . Flag let index = e . current target . dataset . index if(Flag = = index){ this . setdata({ activeSizeIndex:-1，Flag:-1 })} else { this . setdata({ activeSizeIndex:index，Flag: index}}}，单击大小选择并更改文本，再次单击项目重置样式，单击其他项目取消选择并选择所单击的项目。这里通过设置一个附加标志并结合index来控制是否选中。

& lt查看wx:for = & quot；{ { kindNav } } & quotwx:key = & quot；索引& quotdata -index = & quot；{ { index } } & quotdata -type = & quot；{ { item.type } } & quotbindtap = & quot变化种类& quotclass = & quotscroll -view -left -item { { activenaviindex = = index？& amp#39;主动& amp#39;:& amp#39;& amp#39;} } & quot& gt& lttext & gt{ { item.text } } & lt/text & gt；& lt/view & gt；change kinds(e){ console . log(e)；设{index，type } = e . current target . dataset；console.log(索引，类型)；//指数与推荐品牌的指数相关。Type和camp type kind . js的this . setdata({ activenaviindex:index，})let kinds =[]this . data . kindall . foreach(kind = > { if(kind.camptype = = type){ kinds . push(kind)} })this . setdata({ kind item:kinds，})}绑定类型和kind . camp type，当点击的项发生变化时，将当前项索引赋给activenaviindex，用kindall存储所有数据项，用foreach循环遍历kind all，存储满足条件kind的数据。

deletesearchhistory(){ wx . show modal({ content:'确认清除历史'，成功:(RES)= & gt；{ if(RES . confirm){ this . setdata({ historyList:[]})} } })wx.removeStorageSync(' value ')}，清除历史记录时，不仅将history list设置为空，而且使用wx . removestoragesync清除本地存储的缓存。

建议:自己写项目的时候，用console.log()多打印，跟进数据变化；查看更多文档w3cschool，微信开发文档，Vant-Weapp。

写项目的过程对我来说是一个挑战。毕竟是第一次专注合作项目，项目中遇到的bug会很烦，但是坚持写函数还是很有成就感的。非常感谢你在我写项目的过程中帮助我的老师和同学。如果你喜欢我这篇文章或者看到对你有帮助，不妨喜欢！同时，真的希望大家在看文章的时候能给我一些建议。期待和大家一起探讨学习微信小程序！

更多编程相关知识，请访问:编程入门！！

这几篇文章你可能也喜欢：

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

本文由主机参考刊发，转载请注明：教你如何复制APP微信小程序(复制源代码) https://zhujicankao.com/112867.html