教你如何模仿app微信小程序(如何打开APP小程序)

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

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

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

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

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

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

Const db = wx.cloud.database() //云数据库constdewucollection = db . collection( # 39；吴德 # 39；)//导入js文件中的数据采集项目进行解构。下面是我拿东西APP的主界面。

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

购买主页

购买主页样式

ltview class = 页面 gt lt！--用van-sticky设置dewu -高清天花板搜索栏-->: lt；van-sticky gt； lt！-- dewu-hd采用flex布局-->: lt；view class = dewu -HD ； gt ltview class = dewu -hd-search ；bindtap = gotoSearch gt ltvan-搜索占位符= 搜索号码" disabled/>； lt/view gt； ltview class = dewu -种类 bindtap = 种类 gt ltimage src = " gt lt/image gt； lt/view gt； lt/view gt； lt/van -sticky gt； lt！-- van-tabs实现购买页面的导航和--对应内容页面>: ltvan-tabs class = ；dewu -tabs ； gt ltvan-tab title = ；推荐" gt ltview class = dewu -tip ； gt ltview class = dewu -tip -img -HD ； gt ltimage src = " gt lt/image gt； lt/view gt； lt！--使用van -网格的布局设置边框隐藏和快速定位-->: lt；van-网格 gt ltvan -grid -项目使用-插槽 gt lt图像样式= "src = " gt lt/image gt； lttext gt正品保证: ltvan -grid -项目使用-插槽 gt ltview class = item -img ； gt ltimage src = " gt lt/image gt； lt/view gt； ltview class = item -text ； gt ltspan gt{ { } } lt/spangt。 lt/view gt； lt/van -grid -item gt； lt/van -grid gt； lt/view gt； lt/van -tab gt； lt/van -tabs gt； lt/view gt；Item van-grid-item采用绝对定位。Tips将direction属性设置为horizontal，以便网格的内容可以水平排列。将搜索框的禁用属性设置为禁用状态，解决点击自动对焦的问题。使用van -网格布局时，需要设置use-slot属性来自定义各项的属性，否则不会生效。

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

Get商品item async onLoad(){ this . prodata()//获取推荐数据项this.shoeData() //获取鞋类数据项}，pro data(){ const { data } = awaitdewucollection . where({安利:db . command . eq( # 39；真 # 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: # 39；/pages/buy _ page/page/detail/detail？id = # 39+e.currenttarget.dataset.id，})}，利用商品_id的唯一属性，当设置的数据项id等于_id时，跳转到详情页，显示对应的数据。

产品详情页面

产品详情页面样式

ltview class = 页面 gt lt！--磁头滑块和标题-->: lt；view class = detail _ hd gt ltswiper class = swiper _ _ hd gt ltswiper -item class = ；swiper _ hd gt lt/swiper -item gt； lt/swiper gt； ltview class = dots1 gt ltview class = { {当前= =索引？'活跃 # 39；:''} } gt lt/view gt； lt/view gt； ltview class = detail _ hd-标题 gt{ { img.digest } } lt/view gt； ltview class = detail _ hd-价格 gt lttext id = p2 gt{ { img.price } } lt/text gt； lt/view gt； lt/view gt； ltvan-电池class = 尺寸 绑定:click = showPopup1 gt ltview class = size -l ； gt选择尺寸

ltvan-弹出可关闭位置= 底部 custom -style = ；身高:75% ； gt ltview class = detail _ size -HD ； gt ltview class = detail _ size -hd-img ； gt ltimage bindtap = 预览图像 mode = aspectFitsrc = { { img.pic } } gt lt/image gt； lt/view gt； ltview class = detail _ size -hd-price ； gt lt文本样式= font -size:25 rpx；" gt@ lt；/text gt； lttext wx:if = ；{ { activeSizeIndex = = -1 } } ； gt-- lt；/text gt； lttext wx:if = ；{ { activeSizeIndex = = index } } ； gt{ { item.price } } lt/text gt； lt/view gt； lt视图 gt ltimage src = " gt lt/image gt； lttext wx:if = ；{ { activeSizeIndex = = -1 } } ； gt请选择一个项目。 lttext wx:if = ；{ { activeSizeIndex = = index } } ； gt{ { item . size } } : lt；view class = detail _ size -BD ； gt ltvan-网格方槽= 10 gt ltvan-grid -item gt； ltview class = 尺寸 gt lttext id = p3 gt{ { item.size } } lt/text gt； lttext id = p4 gt{ { item.price } } lt/text gt； lt/view gt； lt/van -grid -item gt； lt/van -grid gt； lt/view gt； lt视图 gt ltbutton gt{ { } } lt/button gt； lt/view gt； lt/van -popup gt；使用van-popup组件，可以通过为相应的标签设置事件来绑定和弹出。示例:< van-单元格绑定:click = showPopup gt lt/van -cell gt；。三元运算符设置默认样式并控制选定的边框样式，并设置closeable属性以启用关闭按钮。将square van-grid-item设置为square，gutter设置网格间距。

ltvan-sticky sticky offset -top = ；{ { 180 } } gt ltview class = head gt ltview class = detail _ produce -HD ； gt被推荐的

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

搜索页面

搜索页面样式

ltview class = 页面 gt ltview class = 搜索 gt ltvan-stichy gt； ltvan-搜索值= { { value } } bind:clear = ；onClear placeholder = 输入商品名称和商品编号"/>； lt/van -stichy gt； lt！--块封装柔性布局-->: lt；block wx:if = ；{ { showHistory = = true historyList.length gt0 } } gt ltview class = 历史容器 gt ltview class = 标题 gt搜索历史记录删除 src = " gt lt/image gt； lt/view gt； ltview class = 历史列表 gt ltview class = 历史项目 gt lttext class = 订单 gt{ { } } lt/text gt； lt/view gt； lt/view gt； lt/view gt； lt/block gt； lt/view gt； lt/view gt；搜索页面主要分为头部搜索框和内容(搜索推荐、历史和搜索到的商品列表)两部分。这里搜索框用van -粘性包裹使其吸顶，内容部分用块标签包裹。wx:if作为控制属性来判断是否显示。

search (e) {//console.log (e)上的搜索记录异步；如果(！e . detail . trim()){ wx . show toast({ title: # 39；请输入商品名称 # 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( # 39；价值 # 39；，historyList) let关键字= e.detail.trim() let结果= await dewuCollection。其中({ title: db。RegExp({ regexp: keyword，options: # 39；我 # 39；}) }) .get()if(results . data . length = = 0 | | keyword = = # 39；'){ wx . show toast({ title: # 39；不存在 # 39；+keyword，}) } else { await dewuCollection。其中({ title: db。RegExp({ regexp: keyword，options: # 39；我 # 39；}) }) .order by( # 39；热 # 39；, 'desc # 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中，这里使用了unshift方法，这样可以保证最近的搜索记录显示在前面。通过正则表达式对数据库中匹配的商品进行模糊查询，存储在数组results中，当results.length >: 0时，显示商品列表。使用wx.setStorageSync将值存储在缓存中，使用wx.getStorageSync获取并打印出来。使用indexOf方法确定该值是否已经存在，如果已经存在，则删除historyList中的该项。

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

页面分类样式

ltview class = 页面 gt ltvan-sticky gt； ltview class = 搜索 bindtap = gotoSearch gt ltvan-搜索占位符= 搜索商品" input -align = ；中心 disabled/ gt； lt/view gt； lt/van -sticky gt； ltview class = 种类 gt ltview class = 高清 gt ltscroll -view class = ；scroll -view -left ； gt ltview class = scroll -view -left -item { { activenaviindex = = index？'活跃 # 39；: ''} } gt lttext gt{ { } } lt/text gt； lt/view gt； lt/scroll -view gt； lt/view gt； ltview class = bd gt ltscroll -view gt； lt视图 gt ltview class = kind -title ； gt ltvan-分隔符contentPosition = 中心 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 -视图设置垂直滚动。当您点击左侧scroll -view -left -项目时，该项目将变为#00cbcc，并显示相应的品牌类别项目kindsItem。整体采用flex布局，这里的孔是scroll-view-left。font-size应设置为0，字体应设置在子元素scroll-view-left-item中，以避免块元素的边距影响布局。

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

页面排序样式

ltview class = 页面 gt ltvan-sticky gt； ltview class = 搜索 bindtap = gotoSearch gt ltvan-搜索占位符= { { titles } } disabled/ gt； lt/view gt； ltview class = tab gt lt查看wx:for = ；{ { tabs } } wx:key = ；索引 data -index = ；{ { index } } class = tab -item { { activeTabIndex = = index？'活跃 # 39；: ''} } bindtap = 更改项目 gt lttext gt{ { item.title } } lt/text gt； lt图像样式= 宽度:26rpx身高:26rpx"src = { { item.pic } } gt lt/image gt； lt/view gt； lt/view gt； lt/van -sticky gt； lt/view gt；使用tabflex布局。商品的布局是指商品在购买页面上的布局。

ltvan-popup gt； ltscroll -view class = ；pop scroll -y gt； ltvan-塌陷 gt ltvan -collapse -item title = ；适用人群" value = All " name = 1 gt lt/van -collapse -item gt； ltvan-网格column -num = ；3 gutter = { { 10 } } gt ltvan-grid -item class = ；{{activeIndex1==index？'active1 # 39:''} } gt{ { } } lt/van -grid -item gt； lt/van -grid gt； lt/van -collapse gt； ltvan-goods -action gt； ltbutton gt重置

初始商品排序asynconload(选项){//console.log(选项)；let = options . title data 1 = awaitdewucollection . where({ kind:title//绑定跳转时获取对应数据(kind唯一)})。get()//console . log(data1)；This.setdata ({goods: data1.data，titles: title})}，基本排序异步更改项(e){//console . log(e)；let = e.currenttarget.dataset.index//index对应this . setdata({ activetabindex:index })//console . log(index)；If(index == 1) {//销售排序等待dewucollection . where({ kind:this . data . titles })。排序依据( # 39；买家 # 39；, 'desc # 39；) .获取()。然后(res = gt{ this.setData({ goods: res.data，index:index })//console . log(this . data . index)；})} if(index == 0) {//综合排序wait dew collection . where({ kind:this . data . titles })。获取()。然后(RES = >；{ this . setdata({ goods:RES . data })} } if(index = = 2 ； This.data.flag == -1) {//价格降序等待收露. where ({kind: this.data.titles})。排序依据( # 39；价格 # 39；, 'desc # 39；) .获取()。然后(res = gt{ this.setData({ goods: res.data，flag:1 })})return } if(index = = 3){//创建时间排序await dewucollection . where({ kind:this . data . titles })。order by( # 39；ctime # 39, 'desc # 39；) .获取()。然后(res = gt{ this . setdata({ goods:RES . data })} } if(index = = 4){//过滤层this.setdata ({show: true，})} else if(index = = 2 ；This.data.flag == 1) {//价格升序wait dew collection . where({ kind:this . data . titles })。排序依据( # 39；价格 # 39；, 'asc # 39) .获取()。然后(res = gt{this.setdata ({goods: res.data，flag: -1}}}}，设置一个flag属性，默认值为-1。当flag==-1时，单击价格降序并设置flag==1，当flag==1时，单击价格升序并设置flag==-1。

sort Pick(e){ let flag = e . current target . dataset . flaglet index = e . current target . dataset . indexlet CD = this . data . human[index]。kind if(flag = = index){ this . setdata({ active index 1:-1，flag1: -1，cd1: # 39；'})} else { this . setdata({ active index 1:index，flag1: index，cd1: cd }) } }，重置过滤器replace() {//点击重置按钮将所有过滤条件恢复为默认this.setdata ({flag1: -1，activeindex 1: -1，flag2: -1，activeindex 2: -1，flag3: -1，activeindex 3: -1，cd1:# 33。'，Cd2: # 39；'，CD3: 0，CD4: 1000000，})}，这里有一个不能在data (num:Infinity)中声明的坑，这里无穷大不会生效。目前的优化是将其声明为常量。

检查async ischeck() {//点击确定按钮过滤显示结果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！='' this.data.cd2！=''){等待dewuCollection。其中({ kind: this.data.titles，sex: this.data.cd1，brand: this.data.cd2，price: _。gt(cd3)。和(_)。lt(cd4))，})。获取()。然后(res = gt{this.setdata ({goods: res.data，show: false，}}}) return}}，难点< van -grid -item use -slot wx:for = ；{ { shoes } } data -item = ；{ { item } } wx:key = ；索引 data -id = ；{ {项目。_ id } } bindtap = gotoDetail gt lt/van -grid -item gt；goto detail(e){//console . log(e)；wx . navigate to({ URL: # 39；/pages/buy _ page/page/detail/detail？id = # 39+e.currenttarget.dataset.id，})}，跳转到详情页，保留对应数据项。这里用unique _id将每一项的_id赋给data-id，只有id相等时才能跳转接受_id对应的数据。

ltvan-grid -item class = ；{{activeSizeIndex==index？'size -活动 # 39；:''} } 使用-slot wx:for = ；{ { size } } wx:key = ；索引 data -flag = ；{ { flag } } data -index = ；{ { index } } bindtap = pickSize gt ltview class = 尺寸 gt lttext id = p3 gt{ { item.size } } lt/text gt； lttext id = p4 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 = ；{ { kindNav } } wx:key = ；索引 data -index = ；{ { index } } data -type = ；{ { item.type } } bindtap = 变化种类 class = scroll -view -left -item { { activenaviindex = = index？'活跃 # 39；: ''} } 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(索引，类型)；//指数与推荐品牌的指数相关。用typekind.js的c type this . setdata({ activenaviindex:index，})让kind . js =[]this . data . kind . foreach(kind = >；{ if(kind.ctype = = type){ kinds . push(kind)} })this . setData({ Kind item:kinds，})}绑定type和Kind . c type .当点击的项发生变化时，将当前项索引赋给activeNavIndex，用kindall存储所有数据项，用foreach循环遍历kindall，将满足条件kind.ctype == type的数据存储在一个数组Kind中，然后setData。

deleteSearchHistory(){ wx . show modal({ content: # 39；清除历史 # 39；，成功:(RES)= gt；{ if(RES . confirm){ this . setdata({ history list:[]})} })wx . removestoragesync( # 39；价值 # 39；)}，清除历史时，不仅historyList会被设置为空，本地存储的缓存也会被wx.removeStorageSync清除

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

结论编写源代码项目的过程对我来说是一个挑战。毕竟是第一次关注协作项目。项目中遇到的bug会很烦，但是坚持写函数之后很有成就感。我非常感谢我的老师和同学，他们在我写项目的过程中帮助了我。如果你喜欢我的文章或者看到对你有一点帮助，请给我一个赞！同时，真的希望大家看完文章后能给我一些建议。期待和大家一起探讨学习微信小程序！

有关编程的更多信息，请访问:编程入门！！以上是教你如何模仿事物的APP微信小程序的详细内容。请多关注主机参考其他相关文章！

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

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：教你如何模仿app微信小程序(如何打开APP小程序) https://zhujicankao.com/77540.html