用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

记第一次小程序之旅

纸飞机 2018-3-8 09:37

前言出来也有一段时间了,不过好像并没有预期的那样激起千层浪。只是刚出来的时候热了几天就趋于平淡了。除了业内人员,吃瓜群众似乎连看一眼的心思都没有了,更别说体验了。不过微信一定会有进一步动作的,应该是会 ...

前言

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

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 "item.wxss";
  • 因为我的小程序中有很多列表,所以列表的item我是用模板来写的,这时候就出现item的下标传不进去的情况
  • 共用方法需要导出module.exports = {
    showSuccess: showSuccess
    }
  • page的.js中变量的值在页面关闭后会保留,需要在onUnload初始化
提交审核

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

部分截图

首页.jpg

收藏夹.jpg

我的.jpg

我的订单.jpg

商品详情.jpg

结算.jpg
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏