记第一次小程序之旅

2017-02-28 本文已影响349人刘小帅

论别人，对错分明；关上门，冷暖自知

前言

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

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
}