从零开始的微信小程序线上商城开发（一）

今天开始制作一款微信小程序，一方面是巩固所学，一方面也在查漏补缺，准备尽可能的将所有电商功能模块都做出来，首先是准备工作。

这是微信小程序开发文档，下载微信开发者工具，我的开发者工具版本为1.03.2006090（突然改了界面好不习惯），UI库我选择了Vant Weapp。准备就绪，出发！

1、新建项目

打开微信开发者工具，点击新建项目进入以下界面

项目名称：填写你的项目名称

目录：选择项目保存的路径

AppID：填写appid，若无可使用测试号

开发模式：小程序

后端服务：我这里选择不使用云服务，因为还没有了解云开发

点击新建按钮进入以下界面

这是微信官方的HelloWorld示例，项目包含以下部分：

pages 存放页面文件
utils 存放工具文件
app.js 小程序启动逻辑
app.json 小程序公共配置
app.wxss 小程序公共样式表

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

2、添加底部tab栏

首先先下载两个图标，因为tabbar不支持网络图片，这里我选择去iconfont下载图标，建议尺寸为81px*81px。下载后在小程序根目录下新建static/img文件夹，把刚刚下载的图标存进img文件夹中。

接着配置tabbar，打开app.json，配置项如下：

属性	类型	必填	描述	最低版本
pages	string[]	是	页面路径列表
window	Object	否	全局的默认窗口表现
tabBar	Object	否	底部 `tab` 栏的表现
networkTimeout	Object	否	网络超时时间
debug	boolean	否	是否开启 debug 模式，默认关闭
functionalPages	boolean	否	是否启用插件功能页，默认关闭	2.1.0
subpackages	Object[]	否	分包结构配置	1.7.3
workers	string	否	`Worker` 代码放置的目录	1.9.90
requiredBackgroundModes	string[]	否	需要在后台使用的能力，如「音乐播放」
plugins	Object	否	使用到的插件	1.9.6
preloadRule	Object	否	分包预下载规则	2.3.0
resizable	boolean	否	PC 小程序是否支持用户任意改变窗口大小（包括最大化窗口）；iPad 小程序是否支持屏幕旋转。默认关闭	2.3.0
usingComponents	Object	否	全局自定义组件配置	开发者工具 1.02.1810190
permission	Object	否	小程序接口权限相关设置	微信客户端 7.0.0
sitemapLocation	string	是	指明 sitemap.json 的位置
style	string	否	指定使用升级后的weui样式	2.8.0
useExtendedLib	Object	否	指定需要引用的扩展库	2.2.1
entranceDeclare	Object	否	微信消息用小程序打开	微信客户端7.0.9
darkmode	boolean	否	小程序支持 DarkMode	2.11.0
themeLocation	string	否	指明 theme.json 的位置，darkmode为true为必填	开发者工具 1.03.2004271
lazyCodeLoading	string	否	配置自定义组件代码按需注入	2.11.1
singlePage	Object	否	单页模式相关配置	2.12.0

pages属性如下：

"pages":["pages/index/index","pages/logs/logs"],

这表示小程序有两个页面，一个index，另一个logs，它与资源管理器中文件相对应：

删除时需要将两处都删除，否则报错。

我这边准备添加一个个人中心页面，先在pages属性中新增一行"pages/user/user"，编译后会该代码会匹配pages文件夹下的user页面文件，如果不存在会自动添加。

然后添加tabBar属性进行配置，helloworld示例中未配置，具体配置及注释如下图：

"tabBar": {"color": "#000000",  //tab 上的文字默认颜色，仅支持十六进制颜色"selectedColor": "#00BFFF", //tab 上的文字选中时的颜色，仅支持十六进制颜色"backgroundColor": "#FFFFFF",  //tab 的背景色，仅支持十六进制颜色"borderStyle": "black",  //tabbar 上边框的颜色， 仅支持 black / white"position": "bottom",  //tabBar 的位置，仅支持 bottom / top"custom": false,  //自定义tabBar"list": [  //tab 的列表，最少 2 个、最多 5 个 tab{"pagePath": "pages/index/index",  //页面路径，必须在 pages 中先定义"text": "首页",  //tab 上按钮文字"iconPath": "static/img/index.png",  //图片路径，不支持网络图片，当 position 为 top 时，不显示 icon"selectedIconPath": "/static/img/selectedIndex.png"  //选中时的图片路径，不支持网络图片，当 position 为 top 时，不显示 icon},{"pagePath": "pages/user/user","text": "个人中心","iconPath": "static/img/user.png","selectedIconPath": "/static/img/selectedUser.png"}]}

以上代码中的注释便于查看，实际使用中json格式不可以注释

编译后效果如下图：

然后我将pages属性中的logs路径及pages文件夹下的logs文件删除，把index页面的内容包括wxml和wxss以及js的事件函数全部删除，下一篇开始设计开发首页。

ps：第一次写这样的博客，旨在整理大脑里杂乱无章的东西。本系列内容算是自己的总结，主要面向初学者。如果能给新人一些帮助我会很高兴，如果大佬看到了能指出文中某些不足那再好不过。

成长源于失败！

从零开始的微信小程序线上商城开发（一）相关推荐

微信小程序线上预约管理系统
微信小程序线上预约管理系统核心代码展示 /** * 人员列表 * @param {Object} $table 表名 * @param {Object} $pageindex 分页page * @p ...
Java设计-微信小程序线上点餐/外卖项目+后台管理系统
文章目录 XOrder 前言环境微信开发者工具 Java开发环境 Vue开发环境成果展示小程序端小程序前端扫码点餐文件树技术选型鸣谢小程序后端文件树技术选型项目总结未完成的 ...
微信小程序线上点餐问题及解决
2019.5.22 1.当我们遍历出数据库中菜单的菜品时,需要为其单个产品添加数量的问题. 解决:在表中加入购买数量(buycount)的字段然后,在js文件中,控制当前对象中的buycount ...
基于微信小程序线上生鲜选购平台
微信小程序之商用商城小程序
微信小程序之商用商城小程序 https://pan.baidu.com/s/1CdxrlV7GeRRmsT9UWEMtJg 码cygy 2. 用户端需求列表分类主要功能点功能特性描述首页搜索 ...
商城前端模板_如何理解微信小程序和微商城,微信公众号以及APP之间的关系？一张图看懂了！...
老张的一位粉丝,花了几天时间把知乎里面分享的一些关于微信小程序,微信商城,微信公众号,以及APP的相关介绍全看完了. 然后用他自己的话描述了微信小程序和微商城,微信公众号以及APP之间的关系,如下图所 ...
【微信小程序宝典】从零开始做微信小程序开发
开发前必读简要基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要:| 链接微信小程序个人注册简单步骤打开mp.weixin.qq.com,点击右上角立即注册,进入小程序注册| 链接微 ...
微信小程序-计算器小程序《从零开始学微信小程序》
主界面的代码块  <view class="container" ...
基于毕设的微信小程序校园二手商城实现(一)
商城系统没花多少时间在UI美化上,主要实现了微信小程序校园二手商城的一些主要功能.界面是丑了点,但是在开发中学习到了很多的东西.还是非常值得的. 下面来看主界面的主要布局代码,主要知识点是html+c ...

从零开始的微信小程序线上商城开发（一）

从零开始的微信小程序线上商城开发（一）相关推荐

最新文章

热门文章