小程序-入门篇

本来这是用来交差的，结果发博客了。。。

这两天主要学些了小程序相关知识，主要包括一些基本概念、开发方式、以及项目实战。这篇文章不仅仅是对这一阶段学的一个记录，同样也是摸索过程中的一个总结。

其实呢我刚开始学习小程序开发时并没有去从官方文档着手开始，而是借鉴了网上大神们对入门基础所需知识的总结，接着就做了一个小型的电商页面(码云地址：https://gitee.com/lrxu/ecommerce_small_program.git)，最后再回过头来体会官方文档的详细介绍。由于知识重点较多，我就讲比较重要的知识点和该过程中所遇到的问题及解决办法作一下简单的介绍。

到着呢我想以提问题的方式来介绍一下入门基础，当不用看答案或者去网上能找到答案差不多也就入门了。

1. 我们如何创建小程序，请对项目的目录结构的分析？
2. 如何增加页面？
3. 如何设置导航栏的属性？
4. 一个小程序页面的生命周期是什么？
5. 小程序是如何将视图层和逻辑层进行绑定的？

这些问题弄明白了之后差不多就可以做一些简单的开发了。下面了展示一波实战项目的页面图。这个小练习呢是站在大神的肩膀上完成的，大家也可以去借鉴一下。(https://www.jianshu.com/p/e63be70e3ab9，文章分很多章节，需要耐心看完)

 

         

忘记说了，这些做小程序之前是需要基础知识的了解比如h5，css样式基础这些都不必说了。下面呢我将在做这些页面过程中遇到的问题及解决办法做一下总结，希望对别人有所帮助。

1. 路径配置问题。

作为一个新手，深深体会到页面重定向、初始化、重加在、切换等一系列操作在小程序路由框架下管理是多么方便，那为什么我会把这便捷的一点作为总结之一呢，就是因为我经常自以为页面路径写对了，但是页面一直加载不出来，总是习惯在逻辑代码中寻找问题。但是经验告诉我们两点：先看控制台后看路径。因为有些时候控制台为告诉开发者对应路径的文件是否发现，再者呢一定看好路径有没有写对，包括文件名称的大小写(知道绝对路径和相对路径的区别，再加上注意文件大小写)

    2.页面传参问题

页面传参呢问题可以说是家常便饭了，这里我也来简单介绍一下小程序页面是如何进行页面传参的。navigator是小程序用来进行页面跳转的组件。

// 跳到购物车

  toCar() {

    wx.navigateTo({

      url: '/pages/cart/cart？id=1'

    })

  }

             

  /** /pages/cart/cart

   * 生命周期函数--监听页面加载函数中option来接受传过来的参数   */

  onLoad: function (options) {

    console.log("options",options.id);

  },

以上便是页面传参的用法。但是微信团队留了个坑，就是当我跳转过去全的目的页面是tabBar中的页面是，这样的传参是没法实现的。这里的tabBar就是像这种页面底部的页面。

当然，想传呢也不是不可能的，第一种方法就是将所需要传到目的页面的参数作放到一个全局变量中，当然这种做法很流氓。微信团队开放了另一个api搞定了这个问题wx.relaunch(object),接受参数的方式同上。

    3.遇到css样式问题。

这一点呢其实不是太想写，因为这是一门考积累的艺术，这里就简单扯两句。Relative ,absolute ,fixed ,flex，了解一下这四个属性后一些基本的页面布局也就差不多了，再重生一遍这是一门靠积累的艺术。