VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云最新优惠促销活动
jtti最新优惠促销活动
新罗云最新优惠促销活动

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

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

教你如何模仿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。(有点粗糙,但还是能看出来)

1.png

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

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

3.png

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

4.png

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

5.png

6.png

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

购买主页7.gif

购买主页样式8.png

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时,跳转到详情页,显示对应的数据。

产品详情页面9.gif

产品详情页面样式10.png

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选择尺寸

11.png

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设置网格间距。

12.png

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,它将成为选中状态。

搜索页面13.gif

搜索页面样式14.png

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让值=历史列表

页面分类样式16.png

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种类=

页面排序样式18.png

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布局。商品的布局是指商品在购买页面上的布局。

19.png

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微信小程序的详细内容。请多关注主机参考其他相关文章!

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

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

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 教你如何模仿app微信小程序(如何打开APP小程序)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!