[toc]

1、创建项目

之前有过记录,可以查看之前的笔记传送门

2、填写自己的appid

微信小程序网站中,找到开发第二栏,找到appid,复制到微信开发工具中。

3、搭建目录结构

目录名作用
components组件存放
icons图标存放
lib存放第三方库
pages页面存放
request自己封装请求帮助库
styles样式库
utils工具库

image.png

4、创建页面

在pages文件夹下创建所需要的页面,项目开发可能功能确定一块功能,开发一个页面。本次项目是确定所有的页面一次性进行创建。

⻚⾯名称名称
⾸⻚index
分类⻚⾯category
商品列表⻚⾯goods_list
商品详情⻚⾯goods_detail
购物⻋⻚⾯cart
收藏⻚⾯collect
订单⻚⾯order
搜索⻚⾯search
个⼈中⼼⻚⾯user
意⻅反馈⻚⾯feedback
登录⻚⾯login
授权⻚⾯auth
结算⻚⾯pay

image.png

5、引入阿里字体图标

5.1、打开阿里

https://www.iconfont.cn/home/index

5.2、选择图标

选择自己需要的图标,加入到购物车中,然后添加到项目中。

如果需要登入,则进行选择自己账号进行登录关联。

image.png

image.png

5.3、生成样式,复制到本地styles库

点击font class ,点击在线查看链接

//at.alicdn.com/t/font_872326_uhu5h1xgqrh.css

image.png

image.png

image.png

我本地文件内容

@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_1199223_3th2jwrfikp.eot?t=1558237601879'); /* IE9 */
  src: url('//at.alicdn.com/t/font_1199223_3th2jwrfikp.eot?t=1558237601879#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAocAAsAAAAAEcwAAAnPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEIAqVBJBoATYCJAMoCxYABCAFhG0HgSEbzw4jA8HGAQqwPwvZXxwY4zQ1eELIFi1DMTSnD/pYP4rd6PtLB+Hk8Xpr2ppW/u3LRARP+9Hm7e7/fqLRnHgdjZpIRNF0l1BLEBKJ0mnttAQO5zId9jum2FFJvhqRQvulC7T9pKGRn9NTakJOyA1rw2Rr0NWdetXxBb2KkC9+FZYVRpsPnP8folPv/4O7LFk+bJtCGBShgL4D9B3sNJMrL+1AZvLRWquiUTTqoJv4Xnbvdc4XFQvxEyETSWp7qEZKg1DJjVj4RTdJ0XkFtaDyrVcT6C054t24enhGvoLKAQNecJojP5GrVESEVq8LTizit2ht+pkmSX55Px8X9oVPUmX0WncfXVbo5NjbUR/+0+7kj2h/xTA2I+MSpBja30LzD1DiHTWqHx7lEDJvnvwW5TiMpq3akhgyMz/vman3MM+qkWJlm2rUQpJ1yh+vRpQRgt+0dRx7glA4niZUHM8TWo5XCQ3HW4Sa40TWXh0Cl0A1QMicmBIdqvRO7rz7wfOXR94BUrWbnhJ3tLjSO5iEYLNebgTB9qJ30OtFzOD96bFxnKDxl+bnpze5PxtdcOS1yxQlR3zv4t/pmx4ZnEO2BD8ozFTJjdQy3SQq+BBbCEC1W6bI+F26A+PUUlYOgAmpGkPXbvA5ZzQqG/qu2SOuksv1bfpd6yQHFIq07e7rd/u2mkyGdg3mvdrcWKxSqB0CzYcM3HigEDbPrzOMc9Xb0vMbejab5nmzosNu20rOElLUlZf7u3FyiZw+fahx1po7aM8sV9KmUMsCnT/0prid1hpltW5ILC6nFUG32waHEMz3gnJj55Ioy7WFHk0rdEWyXIRIRKobiKQalqurmCOBe6qKEJRD8Ds/uBYEhufhQW+N7xMUCcPQ9Ks1TgQq4MxpzjLWR8I3cDhYVxBeRm8hQEP+2lzvFiCM93lP3RRFbupiLDmOyXiGLsLTFenbuMYXY4fxMisVQ1u7vC2d3mLnvVzcvUwI232jMiGMHh/lL0806p5aZEbPZqWoa2lUaucryCQ0QhQAihOlBAr2UiwQapXr4ChSRy4bnQPa2TAJ7RhMMwojbJXIcBpoAlpTGPkz6WT3qticnsMNilMhHA7r4f2Sw/VYPhyyclqio6auguLOXxAXAGiybaWU2flot9i4KIZp5vCmzPecTZ2d5XIc+bMcXTnjzX4zrfmUgUtHIdxZtnd3bvK3ErOiBmTPH2KNi53MpWpaZmvzJo1zIVTVdZ2empZesL1iYlvva9VuwaTM315Sk1/dPrihcIlTnK5nbJ7wd9Z5R0o/ndI98/yLqOW4aZSP/4RWmV1By1npA2ilFdklGSA95vleaMIE9yirDCXaRWVZS3BqK5Sd5PGKHa42c4I7tBzK97KnD0GEH1qfetctQoqoeL6DoXRlcgDOiEKMBoR1zIzxYF9AzYbwemiTMX+vL9HeDqdw/nkhuGfMOsQOj4uitNTFrZ7JND5aeEZJkWJm/zvsOLxeeEySB8t39O+YV0g8Yuwv1iaPY53VjUEij28/X9Ovy8PlifDlFMQSB/BqGtLdQPdH8wv2BsqJAkB5lAmYxMiBke8m52Z6zHo2NpFjeVwtS1p9bVaE77St9zAtUDhJ4ZboePrx5RHx4Psjb7cyQaIOGKv0Ep3E0jNKZOv0xFIw0+ZZCS/G4BpznJPW4W+kkrge852xT3FX52B9eEXqx5EgrG5XmO/0/OHdwuiUuGTaq/uw/Gl+XnRyXArtuHwEL7RreNdQHu1E/43+BW8xYt+41/eVrLnD2OvRarAvIQuaBevZWWSKbcYwaIYr71wIcd+MNMMYVmSO3L2NvV5ghreheUT0CDO/AgLQ+9FEZp9kwFtQd3QBzkRrj/DmxStTIabOyVFjGq2aP2bP6nG4Yu5ZQ+5cqNEaRcN2Lx6Jo0phJZqN15iFs1z7Jt/rJ3NTqXBcDHCT9fogsyXeXMwGYKwYVSLEoc4dorAqQDWY/8d1FHA5NSS1ZtV4KrUfefbRNvXUqZSgQ0C5VtybqEyucs7YlePbSyaAT9siOXAUZuKnHvI2I08+MXILPMGJ3FY6dDMnsrRiGoZ5cT4NOJe6lK61185zs3IqRZUcK7KKrDA5FrHMSh80TIs60AWOVWjlXEAdbNGV0qrSBZ0Cd6g6TdiJUCcwAqRSlNxBVQa6X6RlZAeG8A5yYt1/mY33E1kQgqJGhixs7/DxPCDj140n73oij7siIuQvMiwcc8IhLithJQxHZ+Ff2I7Co03iihfUgaWAt4DnlM4f5b0CeLncGlepS/sWEEl6cI+2RT7/8juvMNmJYcQLS4ERM5QUGzCbKrAzM//9ieJIKSuqSBxy/4M5zS7quXYG90ya635bdSbV9jLfzm763wxPb+dig9HOdefNt8ef2Mrl3Iu5G4gF7eRQh+0DilYO/LFF1l/2YLus7O+lrDvlsSYHaIybwThsHJ+dlnM/AUS4OXS3/xf6L0x8ebxdd/6rLS5bXvHZ78PeTz0Ze98LJ9VuahIXfshNkqtfl0BJxkO1q5qfEaKLtmpeL++i2u1DqsnjJ4dsnx8WjbtLNJfbs2ZOrxDeBdsF8HsnTBs0KI2sJFMHD9ao2SGsJNMGDCwltxlADRQ+RhbSgjQOjcAFFbHDKgSWSTOhhf2SbRFY4Mtgoz0GheOv4uJDjooV3HPI9/yK6yseAoZQu+wJ+igHld5Pm4KXHzhQbntwnYE9+rzgVHvd7MjtkbMtxU63FrCSZ/k7l/kvi7b3l8bH2a2wT6VXlrm4gel1gG5KHCPKAfj/ql2EnZf4rrP4m0RLPk+kJb5uKyFtnd59gsZG1BKs1oOFQSQlyxfjz2XenQB7Hcgo4Pf+CtG/8apbMZ+2e/z/dLx/eTkEuMyhAnlWQjb+/1OiPi6ax2G85iec0rlmlnQUPCEZU2TXSiG437cmQTskdE0SAQ7YwBmIC9Da8C/Bl6AyOIBa6zL09l2fPpijjYrSYc+3AmHaDyST/kE27ZcCheA/qCz6h9p0jELvXswJDraCB9c15BYqXHxiXkpBeIEN/IGPQF2b67jLS3gFbXgDTsI43XENAnQfh5g3mlpLMNFyiK+U60HbStxpWUNpQ2Zt148iUnRoWMohClyngZx1MlawwqctV5IE4t0KMt//CFBOK6crZnzbvgKawdeOJUIxwv9aEagZ5zLceEOlLCkmsBivSUPYFSkGLWuVsK54uxooWSHWornTF5GVCFYJx9eGV9v13z0LfXkfKXKUqKKOJtrooo9Bd8SkK3NBEz8QnDuEEnhnj/Oq0mDM2HMgboaLNy4XVgr6xbj/gAs6qHIRvOQf3LVkGD/2qXTvrmSwbB1nTmoSmg+qqprOIQQ=') format('woff2'),
  url('//at.alicdn.com/t/font_1199223_3th2jwrfikp.woff?t=1558237601879') format('woff'),
  url('//at.alicdn.com/t/font_1199223_3th2jwrfikp.ttf?t=1558237601879') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('//at.alicdn.com/t/font_1199223_3th2jwrfikp.svg?t=1558237601879#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shoucang1:before {
  content: "\e631";
}

.icon-shoucang:before {
  content: "\e66d";
}

.icon-receipt-address:before {
  content: "\e673";
}

.icon-kefu:before {
  content: "\e601";
}

.icon-fukuantongzhi:before {
  content: "\e60c";
}

.icon-ding_dan:before {
  content: "\e61b";
}

.icon-yixianshi-:before {
  content: "\e616";
}

.icon-gouwuche:before {
  content: "\e610";
}

.icon-tuihuotuikuan_dianpu:before {
  content: "\e773";
}

5.4、样式引入

app.wxss中,import入样式

@import "/styles/iconfont.wxss";

image.png

image.png
image.png

Q.E.D.


只有创造,才是真正的享受,只有拚搏,才是充实的生活。