记第一次小程序之旅

前言

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

Mabe it’s life

不作不会死

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

准备

知识积累

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

(此图片来源于网络，如有侵权，请联系删除! )