当前位置:源码库-建站教程-网站开发-微信小程序开发-小程序开发入门实例分享之新建一个商城项目

小程序开发入门实例分享之新建一个商城项目

时间:2018-05-04来源:www.aspku.com 作者:源码库 文章热度:

前言

小程序出来也有一段时间了,不过好像并没有预期的那样激起千层浪。只是刚出来的时候热了几天就趋于平淡了。除了业内人员,吃瓜群众似乎连看一眼的心思都没有了,更别说体验了。不过微信一定会有进一步动作的,应该是会放开一些权限,毕竟是花了大力气搞的亲儿子。

Mabe it's life

不作不会死

手痒的我自是要玩一玩这个小程序咯,不幸的是被老大看见了;老大就把公司产品小程序的开发工作交给我了。大哥,我是Android开发啊,这个应该交给前端吧!工作就是这样,是没有理由的。自己种的苦果,含着泪也要吃下去。自此开始了苦逼的开发(摸索)之旅,历时七个工作日,万幸不辱使命搞出来了。

准备

为了方便测试最好自己弄一个Appid,直接选择政府类型,随便填一个政府名称就好。

知识积累

1.首先需要学习html,css,js。不需要很全面的学习。这个是html和css是必须要会的,否则你也界面都码不出来。在w3c学习就可以了https://www.w3school.com.cn/

2.接下来梳理一下小程序的知识点:

组件:包含了微信封装的一些组件,这部分只需要简单的浏览,脑子中有个概念就行,用到的时候再细看

API:这部分根据需求去看,我这边只用到了网络请求和获取系统信息,其他的我也没仔细去看

框架:这部分需要仔仔细细的看,尤其是数据绑定,条件渲染,列表渲染,*模板,事件

开动

小程序,小程序开发,小程序开发实例,小程序商城

目录结构.png

新建一个项目呈现的项目结构大概这样子的,我会以Android的思路来讲解这部分(了解页面的生命周期很重要)

app.js 相当于Application,管理整个App的生命周期,这里还包含一些全局函数(如登录)和全局变量(如Token,域名)

app.json 小程序全局配置,包括(pages页面路径配置;window窗口表现配置;tabBar 底部 tab 的表现;networkTimeout网络超时时间配置;debug设置是否开启debug模式)

images 相当于drawable里面是所有项目中需要用到的图标,图标不要太大太多,因为微信对于小程序的大小是有限制的。

pages 所有的页面,每个页面建一个文件夹,这边有一个巧妙的方法(在app.js配置好page,那么这个页面的所有文件自动生成了)

utils 封装了一些公共的函数方法

外部框架搭建

这边采用了大多数app的tab切换的方式,只需要在app.json中配置,整个外部框架就成型了

  1.  
  2. "pages": [ 
  3.  
  4. "pages/homepage/homepage"
  5.  
  6. "pages/trolley/trolley"
  7.  
  8. "pages/mine/mine"
  9.  
  10. "pages/order/order"
  11.  
  12. "pages/address/address"
  13.  
  14. "pages/detail/detail"
  15.  
  16. "pages/blance/blance"
  17.  
  18. "pages/comment/comment"
  19.  
  20. "pages/remind/remind" 
  21.  
  22. ], 
  23.  
  24. "window": { 
  25.  
  26. "backgroundTextStyle""light"
  27.  
  28. "navigationBarBackgroundColor""#ED5085"
  29.  
  30. "navigationBarTitleText""挑趣特卖商城"
  31.  
  32. "navigationBarTextStyle""white" 
  33.  
  34. }, 
  35.  
  36. "tabBar": { 
  37.  
  38. "backgroundColor""#ffffff"
  39.  
  40. "color""#A3A3A2"
  41.  
  42. "selectedColor""#ED5085"
  43.  
  44. "list": [ 
  45.  
  46.  
  47. "pagePath""pages/homepage/homepage"
  48.  
  49. "text""爆款特卖"
  50.  
  51. "iconPath""images/homepage_nomal.png"
  52.  
  53. "selectedIconPath""images/homepage_select.png" 
  54.  
  55. }, 
  56.  
  57.  
  58. "pagePath""pages/trolley/trolley"
  59.  
  60. "text""购物车"
  61.  
  62. "iconPath""images/trolley_nomal.png"
  63.  
  64. "selectedIconPath""images/trolley_select.png" 
  65.  
  66. }, 
  67.  
  68.  
  69. "pagePath""pages/mine/mine"
  70.  
  71. "text""我的"
  72.  
  73. "iconPath""images/mine_nomal.png"
  74.  
  75. "selectedIconPath""images/mine_select.png" 
  76.  
  77.  
  78.  
  79. }, 
  80.  
  81. "networkTimeout": { 
  82.  
  83. "request": 20000, 
  84.  
  85. "connectSocket": 20000, 
  86.  
  87. "uploadFile": 20000, 
  88.  
  89. "downloadFile": 20000 
  90.  
  91. }, 
  92.  
  93. "debug"true 
  94.  

接下来就是写一个个界面了,每个界面包含.wxml,.wxss,.json,.js

.wxml+.wxss构成layout

.js相当于Activity

.json 重置页面的window

下面我主要讲一下遇到的问题和易错点,仅供参考

布局模板需要在.wxml和.wxss导入@import "item.wxss";

因为我的小程序中有很多列表,所以列表的item我是用模板来写的,这时候就出现item的下标传不进去的情况

共用方法需要导出module.exports = {

showSuccess: showSuccess

}

page的.js中变量的值在页面关闭后会保留,需要在onUnload初始化

提交审核

提交审核之前一定要测试完全,千万不要把未测试的版本放上去,测试阶段可以先设置为体验版。有幸两次提交都是第二天就通过了,并没有遇到审核不过的问题。

部分截图

小程序,小程序开发,小程序开发实例,小程序商城

首页.jpg

小程序,小程序开发,小程序开发实例,小程序商城

收藏夹.jpg

小程序,小程序开发,小程序开发实例,小程序商城

我的.jpg

小程序,小程序开发,小程序开发实例,小程序商城

我的订单.jpg

小程序,小程序开发,小程序开发实例,小程序商城

商品详情.jpg

小程序,小程序开发,小程序开发实例,小程序商城

结算.jpg


注:相关教程知识阅读请移步到微信小程序开发频道。
相关微信小程序开发
热门标签

微信小程序开发Rss订阅微信小程序开发搜索