微信小程序开发一个小型商城（一、准备工作）

文章根据b站视频零基础玩转微信小程序教程（黑马）
最开始我们需要在app.json文件当中声明所有使用到的界面。代码如下所示：

"pages": ["pages/index/index","pages/category/index","pages/goods_list/index","pages/goods_detail/main","pages/cart/index","pages/collect/index","pages/order/index","pages/search/index","pages/user/index","pages/feedback/index","pages/login/index","pages/auth/index","pages/pay/index"],

其次需要对windows属性进行部分适配：

"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#eb4450","navigationBarTitleText": "lzq shop","navigationBarTextStyle": "white"},

最后就是在页面下方定义tabBar界面：一个有四个：需要映入对应的小图标，图标放于与pages同层级的icon文件夹下：图标资源，单击下载

"tabBar": {"color": "#999","selectedColor": "#ff2d4a","backgroundColor": "#fafafa","borderStyle": "black","list": [{"pagePath": "pages/index/index","text": "首頁","iconPath": "icon/home.png","selectedIconPath": "icon/home-o.png"},{"pagePath": "pages/category/index","text": "分类","iconPath": "icon/category.png","selectedIconPath": "icon/category-o.png"},{"pagePath": "pages/cart/index","text": "购物车","iconPath": "icon/cart.png","selectedIconPath": "icon/cart-o.png"},{"pagePath": "pages/user/index","text": "我的","iconPath": "icon/my.png","selectedIconPath": "icon/my-o.png"}]},

随后在与pages同层级目录新建一个style文件夹，用于引入外部图标。参考此文章，单击前往在这个项目当中会用到一些小图标：如下图所示，可以自行挑选：

打开上方网址后会得到一段很长的关于样式的代码，全选代码后复制粘贴到style文件夹下的iconfont.wxss文件当中。
随后我们在全局样式文件app.wxss当中进行引入：并且加上一些全局样式

@import "./styles/iconfont.wxss";
/*初始化*/
page,viewe,text,swiper,swiper-item,image,navigator{padding: 0;margin: 0;box-sizing: border-box;
}
page{/*主题颜色*/--themeColor:#eb4450;/*字体大小*/font-size: 28rpx;
}
image{width: 100%;
}

最后还有一个是参考文档，部分接口连接

下一篇文章地址，单击前往微信小程序开发一个小型商城（二、首页设计）

微信小程序开发一个小型商城（一、准备工作）相关推荐

微信小程序开发一个小型商城（八、个人页面）
上一篇文章:微信小程序开发一个小型商城(七.支付页面) 在上方还是使用wx:if进行判断是否有登录的数据,有的话将数据当中的图片和名字渲染到页面当中,不存在的话使用一个登录按钮表示需要用户登录.往下分 ...
微信小程序开发一个小型商城（四、商品列表）
上一篇文章,微信小程序开发一个小型商城(三.商品分类设计) 在从上一个界面跳转过来,会看到商品列表这个界面:如下图所示: 页面分析:从上到下:分别是一个已经定义好的自定义组件,下面的综合,销量,也是一 ...
微信小程序开发一个小型商城（五、商品详情）
上一篇文章:微信小程序开发一个小型商城(四.商品列表) 在从上一个界面跳转过来,会看到商品详情这个界面goods_detail :如下图所示: 页面分析:从上到下:一个轮播图+一个view标签存储商品 ...
微信小程序开发一个小型商城（七、支付页面）
上一篇:微信小程序开发一个小型商城(六.购物车页面) 在这里,基本上是与购物车页面相似的: 在从购物车页面跳转过来,在购物车界面对购物车商品会进行合法判断,是否有收货人的信息和是否存在商品,而在订单页 ...
微信小程序开发一个多少钱
小程序开发是当前比较流行的一项技术服务,能够为企业和个人带来巨大的商业价值和社会价值,但是小程序开发费用也是潜在的成本之一.在选择小程序开发服务时,了解开发费用如何计算.影响价格的因素以及如何降低成本 ...
用微信小程序开发一个计算器
今天我们用微信小程序来写一个计算器的案例页面布局首先我们需要对页面进行一个简单的规划,计算器一般在页面中都分为两部分,一部分是上面的结果显示区,另一部分就是下面的数字按钮及其运算符按钮,整体页面布 ...
微信小程序开发一个简单的摇骰子游戏
页面代码 <view class='top'>{{txt}}</view> <view class='point1'><image src='{{one_im ...
微信小程序开发（一）基础概念汇总
大家好,我是千与千寻,最近开始涉及小程序开发了,学一学最后做出来一个项目,最开始进入微信小程序开发的时候,如果学过Vue框架接触微信小程序开发的速度会非常快.我准备顺便开设一个专题,进行讲解微信小程序 ...
基于微信小程序开发的商城系统
今天和大家分享下开发小程序商城的问题,现在微信小程序越来月得到广大开发者的使用,本项目为基于微信小程序开发的商城管理系统,系统的后台(及服务端,就是提供数据的)是基于ssh框架开发的一个独立的系统,管 ...

微信小程序开发一个小型商城（一、准备工作）

微信小程序开发一个小型商城（一、准备工作）相关推荐

最新文章

热门文章