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

Bertha 。 2023-02-24 08:03 34阅读 0赞

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

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

**1、新建项目**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70][]

>  *  项目名称：填写你的项目名称
>  *  目录：选择项目保存的路径
>  *  AppID：填写appid，若无可使用测试号
>  *  开发模式：小程序
>  *  后端服务：我这里选择不使用云服务，因为还没有了解云开发

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70 1][]

这是微信官方的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，配置项如下：

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

pages属性如下：

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

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

![20200709102952154.png][]

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

我这边准备添加一个个人中心页面，先在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格式不可以注释**

编译后效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70 2][]

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

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

成长源于失败！

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[Vant Weapp]: https://youzan.github.io/vant-weapp/#/intro
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70]: /images/20230209/b77bc00c85154e108d946e2c9a0c39f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70 1]: /images/20230209/6a63be850bf4446c858a760d1fddc747.png
[iconfont]: https://www.iconfont.cn/
[20200709102952154.png]: /images/20230209/7b580dcf60bb42eba20eb9233d0f298d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70 2]: /images/20230209/da56e39464954027b4e5bd6b0931b193.png