这个系列文章记录自己学习微信小程序的过程,教程起源黑马程序员,我只是用文字记录下,以备忘。
筹备工作:装置微信小程序开发工具装置VScode,并装置如下插件:各个插件的作用都有阐明,这里说下Easy LESS,因为微信小程序不反对less语法,
为了不便开发,咱们不间接编写微信的款式文件,而是应用该插件将less语法主动生成wxss款式,插件增加如下设置:
"less.compile": { "outExt": ".wxss", },小程序目录:components--寄存自定义组件icons--寄存小程序用到的图标(次要是底部tabs图标)lib--寄存用到的第三方库pages--小程序的页面request--封装request申请styles--寄存公共的款式utils--寄存一些工具类
pages构造 "pages/index/index", "pages/category/index", "pages/goods_list/index", "pages/goods_detail/index", "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"别离是首页、分类页、商品列表页、商品详情页、购物车、珍藏页、订单页、搜寻页、用户核心、反馈、登录、验证、领取页。
应用微信小程序开发工具在app.json中疾速搭建各个页面和底部导航tabs:
{ "pages":[ "pages/index/index", "pages/category/index", "pages/goods_list/index", "pages/goods_detail/index", "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" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#eb4450", "navigationBarTitleText": "黑马优购", "navigationBarTextStyle":"white" }, "style": "v2", "sitemapLocation": "sitemap.json", "tabBar": { "color":"#999", "selectedColor": "#ff2d4a", "backgroundColor": "$fafafa", "position": "bottom", "borderStyle": "black", "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "./icons/home.png", "selectedIconPath": "./icons/home-o.png" }, { "pagePath": "pages/category/index", "text": "分类", "iconPath": "./icons/category.png", "selectedIconPath": "./icons/category-o.png" }, { "pagePath": "pages/cart/index", "text": "购物车", "iconPath": "./icons/cart.png", "selectedIconPath": "./icons/cart-o.png" }, { "pagePath": "pages/user/index", "text": "我的", "iconPath": "./icons/my.png", "selectedIconPath": "./icons/my-o.png" } ] }}首页次要有四局部组成:搜寻框、幻灯片、分类导航、楼层导航,如下图:
...