论别人，对错分明；关上门，冷暖自知
前言
小程序出来也有一段时间了，不过好像并没有预期的那样激起千层浪。只是刚出来的时候热了几天就趋于平淡了。除了业内人员，吃瓜群众似乎连看一眼的心思都没有了，更别说体验了。不过微信一定会有进一步动作的，应该是会放开一些权限，毕竟是花了大力气搞的亲儿子。
Mabe it's life
不作不会死
手痒的我自是要玩一玩这个小程序咯，不幸的是被老大看见了；老大就把公司产品小程序的开发工作交给我了。大哥，我是Android开发啊，这个应该交给前端吧！工作就是这样，是没有理由的。自己种的苦果，含着泪也要吃下去。自此开始了苦逼的开发（摸索）之旅，历时七个工作日，万幸不辱使命搞出来了。
准备
- 为了方便测试最好自己弄一个Appid，直接选择政府类型，随便填一个政府名称就好。
- 开发工具 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
- 文档 https://mp.weixin.qq.com/debug/wxadoc/dev/ 最好全部浏览（学习）一遍，前端的同学学起来可能会快一点
- 别人写的例子 https://github.com/search?utf8=%E2%9C%93&q=%E5%B0%8F%E7%A8%8B%E5%BA%8F
知识积累
1.首先需要学习html，css，js。不需要很全面的学习。这个是html和css是必须要会的，否则你也界面都码不出来。在w3c学习就可以了http://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中配置，整个外部框架就成型了
{
"pages": [
"pages/homepage/homepage",
"pages/trolley/trolley",
"pages/mine/mine",
"pages/order/order",
"pages/address/address",
"pages/detail/detail",
"pages/blance/blance",
"pages/comment/comment",
"pages/remind/remind"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#ED5085",
"navigationBarTitleText": "挑趣特卖商城",
"navigationBarTextStyle": "white"
},
"tabBar": {
"backgroundColor": "#ffffff",
"color": "#A3A3A2",
"selectedColor": "#ED5085",
"list": [
{
"pagePath": "pages/homepage/homepage",
"text": "爆款特卖",
"iconPath": "images/homepage_nomal.png",
"selectedIconPath": "images/homepage_select.png"
},
{
"pagePath": "pages/trolley/trolley",
"text": "购物车",
"iconPath": "images/trolley_nomal.png",
"selectedIconPath": "images/trolley_select.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "images/mine_nomal.png",
"selectedIconPath": "images/mine_select.png"
}
]
},
"networkTimeout": {
"request": 20000,
"connectSocket": 20000,
"uploadFile": 20000,
"downloadFile": 20000
},
"debug": true
}
接下来就是写一个个界面了，每个界面包含.wxml,.wxss,.json,.js
- .wxml+.wxss构成layout
- .js相当于Activity
- .json 重置页面的window
下面我主要讲一下遇到的问题和易错点，仅供参考 - 布局模板需要在.wxml和.wxss导入<import src="item.wxml" /> @import "item.wxss";
- 因为我的小程序中有很多列表，所以列表的item我是用模板来写的，这时候就出现item的下标传不进去的情况
- 共用方法需要导出module.exports = {
showSuccess: showSuccess
} - page的.js中变量的值在页面关闭后会保留，需要在onUnload初始化
提交审核
提交审核之前一定要测试完全，千万不要把未测试的版本放上去，测试阶段可以先设置为体验版。有幸两次提交都是第二天就通过了，并没有遇到审核不过的问题。
部分截图
首页.jpg
收藏夹.jpg
我的.jpg
我的订单.jpg
商品详情.jpg
结算.jpg
网友评论