coderwhy小程序商城项目实战

coderwhy老师的github仓库:https://github.com/codeingLiu/minimall

 首先将项目结构搭起来

先将tabbar的页面创建出来,

再配置tabbar:icon什么的,selectedcolor:等

如果每个tabbar页面的title颜色什么的都一样,就在app.json里设置window就行,然后title文字在各个页面设置就行

上述tabbar页面及title设置好之后,就可以挨个儿页面做内容了,

首页第一块而是轮播图,首先要有数据

1、在发起网络请求时,我们可以创建一个config.js里面配置一个baseUrl,来设置请求的ip地址,这样方便统一管理,如果想连接另一个 服务器,直接改一处就可以了

2、我们在做大的项目的时候,会把一些请求的方法放在一个server文件夹下,这个文件夹有分好多页面的js,这些js中封装这首页接口请求的方法,详情页请求的方法等等,

着花样做有一个好处时,方便这些接口将来在其它页面重复调用,否则就的在另一些页面写同样的代码,重复繁琐!!!

轮播图:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

image标签 一般设置mode属性为widthFix,根据图片的比例显示到image标签内,当然不要忘了,image标签自带宽度和高度,我们也可以自行设置。

 swiper的默认高度是150px!!

如果页面中有许多用到轮播图的,我们就可以将轮播图抽出来封装成组件,当然也可以减少页面的代码,使代码看的整洁。每个页面下可以常见组件文件夹,还有项目的components文件夹下也是放组件的,这就看这个组件是全局的组件还是,某个页面才会用到的组件,看情况将组件放在上面文件夹下。

轮播图是整个项目都会用到的,所以放在components文件夹下

代码就不说了,可以自己封装

3、小程序在iphone6的分别率下,1px=2rpx,方便换算

4、数据模型设计

 我们就可以设计成这样的数据模型

 小程序中改变嵌套数据的一个妙用方法:

 5、把goods.pop.list写成字符串的形式,赋值就可以单独改变goods.pop.list数据了,神奇

6、在wxss中不能引用本地图片

7、滚动到顶部

 8、hidden属性对自定义的组件是无效的

9、监听页面滚动:

 10、不要在滚动的函数中频繁的调用setData  使用flag控制减少setData的操作

11、获取小程序中某一组件在文档流中的位置,我们可以获取组件距离顶部的位置:

wx.createSelectorQuery().select("#id").boundingClientRect(rect=>{

  console.log(rect)

}).exec();//执行过.exec()后才会回调rect

想获取某个组件距离顶部的距离,不能在onShow函数汇中监听,虽然onShow是监听页面展示出来的,但是有些图片有可能还没有加载出来,这时候计算距离有可能是不准确的

我们可以在onshow函数里使用一个计时器,延迟一段时间后再获取这个高度,这时,图片就加载出来了,

 12、小程序图片组件有一个箭筒图片加载完成的函数,可以用它来做做事。bindload

13、当页面js中改变某一个变量不需要刷新页面时,没必要用this.setData来改变变量的值,直接this.data.key=value;即可

.

原文地址:https://www.cnblogs.com/fqh123/p/12350662.html