微信小程序初体验

前言：

小程序 ——实际上就是基于微信平台的H5轻应用，微信将系统底层功能（设备、位置、媒体、文件等）和微信自身功能（登录、支付、分享等）封装成相应API供小程序调用。

自从微信小程序出来后，一直想找个机会上手体验一下，因为它跟我们移动端非常像，开发思想也很契合，而且很轻量，开发效率也很高。趁着公司最近在做技术分享，然后花了两天业余时间写了两个页面，算是有个大概的入门吧，在此做个笔记备忘。

因为本人之前写过一个开源的仿想去App的项目，有现成的接口和页面，我就直接拿那个项目的UI写了两个页面，以后有时间和机会再继续完善一下吧，本文可能没有什么技术含量哈，纯粹为了自己练手简单学习一下滴~

下面是小程序运行的效果，本文项目地址：WxDesigner

wxapp.gif

技术要点：

1、对网络请求进行了封装
2、banner的实现
3、横向列表和纵向列表及网格布局的实现
4、圆角图片的展示

《一》开发环境及账号准备

1、下载对应系统（Windows/Mac os）的微信开发者工具

image.png

2、注册一个小程序帐号，用于管理你的小程序。具体操作官方文档微信公众平台都有说明，在此不赘述。

《二》项目初建

1、打开微信开发者工具，新建项目，AppID选测试号即可。

image.png

2、新建的项目预览(左)及项目默认目录(右)如下，下面详细介绍一下项目目录结构。

image.png

小程序的目录结构及含义，我们基本都可以用Android项目开发的知识类比：

（1）app.json是小程序的全局配置文件，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。app.json可以理解为Android项目中的AndroidManifest.xml文件，写的所有的页面都要在"pages"里面配置。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

（2）wxml文件，所有的页面都有对应的xxx.wxml文件，类似 HTML 的角色，由标签、属性等等构成，用来描述当前页面的结构。与 HTML 标签不同的是wxml中的标签是微信包装好的开发组件，例如scroll-view、button、 text还有音视频组件等，wxml可以理解为Android中的xml布局文件。

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

（3）wxss文件，所有的页面都有对应的xxx.wxss文件，用来描述页面的样式风格的，类似于CSS。app.wxss为全局样式，每个页面下的为局部样式。wxss可以理解为我们Android开发中UI组件对应的各个属性样式，例如布局位置、颜色、字体大小、间距等。

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}

（4）js文件，所有的页面都有对应的xxx.js文件，用来处理用户操作和业务逻辑处理的。可以理解为Android中的Activity。

《三》入门开发小技巧

开发小程序跟开发移动端App类似，无非就是页面+数据+用户交互。

一般项目刚开始都是先实现几个Tab的切换来构建项目主体内容的展示，在小程序Tab的实现超级简单，直接在app.json中配置一下就搞定了。相比Android首页Tab及Fragment的搭建，真的是不能再省事了😂

"tabBar": {
    "backgroundColor": "#fff",
    "color": "#212121",
    "selectedColor": "#d1a938",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "设计",
        "iconPath": "src/icn_designer.png",
        "selectedIconPath": "src/icn_designer_highlight.png"
      },
      {
        "pagePath": "pages/discovery/discovery",
        "text": "发现",
        "iconPath": "src/icn_guang.png",
        "selectedIconPath": "src/icn_guang_highlight.png"
      }
    ]
  }

下面我们以logs页面为例，来了解一下页面的样式及数据绑定是如何实现的，以及如何处理简单的用户操作：

1、页面样式：这个就需要有扎实的CSS基础了，反正我的基础一般般😭

image.png

2、数据绑定：

image.png

①我们在js文件中的data:{ }声明需要绑定的变量及类型。然后通过

this.setData({声明的变量名称:变量的值})

给变量赋值，一般而言动态赋值都是从网络异步获取数据，固定数据的绑定直接写死就行。
②在wxml中通过 {{ }} 的语法把该变量绑定到界面上，即可完成数据的绑定。
③写一个列表就用一个 wx:for循环就完成了，对比Android写一个列表，这个简直不能太爽😂。

wx:for="{{logs}}" 表示对遍历数组logs；
wx:for-item="log" 表示声明数组每个对象的名称，可以不声明，默认名称为item，数组默认下标为index。

3、处理用户操作及页面数据的传递：这就简单讲一下点击事件的处理及页面数据的传递。
（1）点击事件：我们只需要给UI组件声明catchTap就能给对应的控件绑定点击事件了，即可以理解为Android中在xml中声明onClick事件

image.png

（2）当我们进行页面跳转时，肯定需要传递一些数据，下面就介绍一下类似Android中通过Intent来携带数据一样的方式来传递页面参数。
以本文案例中的home.js为例，点击首页分类菜单，进入商品分类列表。

image.png

通过在wxml中声明data-id,即要传的参数的值，然后在事件处理函数中通过 e.currentTarget.dataset.id获取到该参数的值，然后调用navigateTo进行页面跳转时，在页面路径中携带参数传递给要跳转的页面。

 /**
   * 点击分类进入分类详情
   */
  categoryDetail: function(e) {
    var categoryId = e.currentTarget.dataset.id;
    console.log(categoryId)
    wx.navigateTo({
      url: '../category/category?id=' + categoryId
    })
  }

跳转的新页面在onLoad函数中的options取出传递的参数即可。关于页面参数传递的详细介绍可以参考：小程序页面传参

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log("接收页面传递过来的参数" + options.id)
  }

4、开发调试
（1）我们可以在Console中查看我们打印的日志，例如我在网络请求net.js中统一处理了接口返回的数据,打印出接口返回的结果。

image.png

（2）我们可以在AppData查看每个页面绑定的具体数据

image.png

（3）还可以在Network中查看到所有的网络请求的详细情况。

image.png

《四》新手遇到的一些小问题

（1）写wx:for时提示下面警告，需加上wx:key=""即可。

image.png

（2）由于微信小程序只支持https的网络请求，所以如果是http的接口，真机调试时，需要打开调试模式，才能正常访问到数据。

《五》参考文档

微信公众开放平台
 微信小程序开发文档
 微信公众平台