错误解决
1、如果出现:预编译器错误:代码使用了scss/sass语言,但未安装相应的编译器插件,请前往插件市场安装该插件,到插件中搜索scss/sass并下载安装。
安装插件:(DCloud需要使用邮箱,这里使用hit8181@sina.com,密码已重置为LHJshr168)
2、打开IDE失败
[微信小程序开发者工具] Fail to open IDE
方法1:在manifest.json中将AppID设置为空‘’。弊端是微信支付等模块不可用
方法2:如下图,改为自己的AppID
3、需要配置setting.xml
左面是原来的xml,将自己的appid填好,再生成appsercert,填好保存。
重置后:7e41da1dfa757bd50e81f9c4e569398a
生成的测试号
appid: wx44fcee39e3412522
密钥:855a7c38d546b6a943d26ba685d9611c
调试单个页面
1、比如,想调试的页面是pages/about/about
①使用Hbuilder调试小程序,对单独页面调试时(如下图),出现:[微信小程序开发者工具] [error] IDE service port disabled. To use CLI Call, please enter y to confirm enabling CLI capability, or manually open IDE -> Settings -> Security Settings, and set Service Port On.翻译过来:IDE服务端口被禁止了,要使用CLI 调用,请输入y确认CLI功能开启,或手动模式:打开IDE-设置-安全设置,将服务端口打开,打开后状态如图(服务端口原来是关闭状态)。
②原来path后面是" ",现在想调试pages/about/about,改为"about"后再编译,出现下图,/about.wxml未找到。解决方案:"path":"pages/about/about"
按正确写法后,重新运行,出现预期的界面:
需要更改为自己商城名字的地方
1、 设置,进入manifest.json,在基础设置中,可以设置项目的名称。
2、page.json
3、pages/about/about.vue页面:
首页相关测试
1、pages.json中:"path": "pages/tabs/index/index"
2、首页分为以下五个部分:搜索框,轮播图,频道内容展示,商城列表展示,更多。
①搜索框:引入组件 components/mehaotian-search/mehaotian-search.vue
②轮播图(后台后端名称为banner):使用小程序原生组件swiper,后台表为banner,sku,spu,specfic等
③频道内容展示:自定义组件 components/index/item-container.vue,暴露的组件name为item-container,后台表为[channel]和[chandetail]等
④商城列表展示:自定义组件 components/index/list-mall.vue,
⑤更多:自定义组件components/index/sola.vue
轮播图(banner)
1、轮播图前台展示和后台数据对应
①左面为轮播图,当点击第2个图时,其对应的skuid=2,而sku表中对应的spuid=2,此时,spu表中对应的id=2,image和goodname分别如上。
②当点击第2个图,其实就是显示spuid=2的商品的详情,因为sku中的spec_list内容为:尺寸L,规格网格,此时需要[specfic]表中内容如下:
,所以当展示详情时,规格也会匹配为:尺寸L,规格网格。如上面最右图。
2、前台组件和后台数据对应:
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"> <swiper-item v-for=\'(item,index) in bannerList\' :key=\'index\'> <image @tap="toDetail(item)" class="swiper-image" :src="serverurl+ item.imgsrc"></image> </swiper-item> </swiper>
轮播图,调用的后台api为ctl_index.fsp?proc=getbanner,从后台获取要展示的条幅,然后存于banerList中,在这里循环展示。
①图片都放到后台,比如这里,测试时,后台代码存放于E:\wxprogram\qiyushopServer\,则其图片文件夹一般为E:\wxprogram\qiyushopServer\wwwroot\images
②通过ctl_index中的getbanner方法,返回的图片地址为(imgsrc):images/index/banner.png,这里的images就是上面①中的images目录,然后展示条幅之一放于index目录中的banner.png文件
③使用vue绑定方式,:src="serverurl+ item.imgsrc",将服务器ip+图片目录结合,便可以展示图片。下图为banner表返回的数据:
④ 后台getbanner返回的数据见上面右图,返回后存放于this.bannerList(代码中绿色部分),轮播图展示时,src绑定imgsrc(代码中红色部分),即可显示对应的图片。
⑤展示详情时,调用的接口为ctl_goods.fsp?proc=getlist
频道:
1、前台展示和后台数据的对应:
①[channel]表是频道名称、频道副标题, [channel]表中的每条数据,展示为一个VIEW区域的标题,如图红色箭头所示,id=1时,展示"时尚好物新人专区",副标题为“全场满38元包邮”。
②[chandetail]表是频道明细,展示该频道中的商品明细。比如fid=1时(见绿色椭圆框),表示其对应的父表id=1,所以展示在"时尚好物新人专区",同时,fid=1时,标题为“时尚女装”,副标题为“复古上海风”,见绿色箭头所示。
③标题展示完成,[chandetail]表中还有image,根据该字段对应的数据,到相应目录中取出图片展示。比如images/index/noswiper2/first.jpg等。
2、频道中列表详情的实现
①当点击"时尚好物新人专区"中第2个图片时,展示的商品详情如上面右图。此时对应的后台表数据为:
所点击的图片,对应 [chandetail]表中id=2,fid=1,skuid=28的数据,再到sku表中,id=28的数据对应的spuid=16,最后到spu表中,找到id=16时对应的image,goodname,展示在商品详情页面。
②同时,详情页面还有sku表中的规格,由图可见,spec_list字段为尺寸:S,颜色:黑,详情页面展示的内容与此相同。另外,还有商品价格,对应sku表中的oldprice和price两字段。
③sku表中的spec_list字段,在展示详情时,会自动根据该字段进行规格匹配,如上图,方框自动显示在S尺寸和黑颜色上面。
3、前台页面使用的组件和后台数据的对应:
①频道列表使用自定义组件item-container
<item-container :serverurl="serverurl" :num=\'itemcontainer1.noswipernum\' :banner=\'itemcontainer1.banner\' :list=\'itemcontainer1.data1\'></item-container>
②传给item-container的参数有4个,服务器地址severurl:绑定的变量是severurl,子表中取几条数据num:noswipernum, 显示的标题:banner,channel表返回的数据list:绑定的变量是data1
③后台getchannel返回的mydata数组包含两部分,banner对象和data1数组,
* banner: Object
link: "新人专享"
pageurl: null
subtitle: "全场满38元包邮"
title: "时尚好物 新人专区"
data1数据是从channel表中获取的频道数据,是数组
data1[0]:(即data1中第1个元素为:)
image: "images/index/noswiper/2/first.jpg"
skuid: 1
subtitle: "复古上海风"
title: "时尚女装"
商城列表
1、前台展示和后台数据对应
①[listmall]表中是商城列表的标题,如“全球热卖”,“大牌精选”等, [listmalldetail]表是各标题与skuid的对应,比如fid=1时,代表[listmall]表中的“全球热卖”,此时skuid=2,再到sku表中,根据id=2,此时spuid=2,最后到spu表中,找到id=2的记录,就有了image,goodname等,然后根据spec_list,oldprice,price,image等展示详情,方法同前面频道、轮播图等。
2、
原来的商品明细界面
网上下载的后端管理端
1、克隆或下载项目到本地,这里是放到d:\workspace\qiyushopadmin中
2、CMD切换到该目录,然后npm install