微信小程序开发小记

年前的时候，因为公司开发小程序的人员不够，临时参与了一个项目中几个小模块的开发，这里做个简单的小记录，眼过千篇不若手过一遍，希望将来如果要用到时不至于大脑空白！

开发工具：wechat_devtools

一，准备工作

1.申请账号。

2.安装开发工具。

二，小程序代码构成

1.json配置：app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。这里说pages,window,tabBar三个项目中使用到的主要配置项，其余配置可参考小程序配置app.json

先贴一个配置代码：

{
  "pages": [
    "pages/index/index",
    "pages/info/info",
    "pages/detail/detail",
    "pages/unpay/unpay",
    "pages/history/history",
    "pages/mall/mall",
    "pages/discover/discover"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "紫微斗数",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "测算",
        "iconPath": "images/index_icon1.png",
        "selectedIconPath": "images/index_icon2.png"
      },
      {
        "pagePath": "pages/history/history",
        "text": "我的",
        "iconPath": "images/history_icon1.png",
        "selectedIconPath": "images/history_icon2.png"
      },
      {
        "pagePath": "pages/discover/discover",
        "text": "发现",
        "iconPath": "images/discover_icon1.png",
        "selectedIconPath": "images/discover_icon2.png"
      },
      {
        "pagePath": "pages/mall/mall",
        "text": "商城",
        "iconPath": "images/mall_icon1.png",
        "selectedIconPath": "images/mall_icon2.png"
      }
    ],
    "color": "#7C7C7C",
    "selectedColor": "#BA3E3E",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "position": "bottom"
  }
}

• pages:

  接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

  文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。

　　　例如：“pages/detail/detail”。将对应detail文件夹中的js,json,wxml,wxss四个文件。

　　　　

• window:用于设置小程序的状态栏、导航条、标题、窗口背景色。各字段可见名知意。

  "window": {
      "backgroundTextStyle": "light",
      "navigationBarBackgroundColor": "#fff",
      "navigationBarTitleText": "紫微斗数",
      "navigationBarTextStyle": "black"
    },

• tabBar:

  如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

  Tip：

1. 当设置 position 为 top 时，将不会显示 icon
2. tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
3. List后面的参数用来设置底部导航的样式，例如字体颜色，选中颜色以及背景色等等。

 "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "测算",
        "iconPath": "images/index_icon1.png",
        "selectedIconPath": "images/index_icon2.png"
      },
      {
        "pagePath": "pages/history/history",
        "text": "我的",
        "iconPath": "images/history_icon1.png",
        "selectedIconPath": "images/history_icon2.png"
      },
      {
        "pagePath": "pages/discover/discover",
        "text": "发现",
        "iconPath": "images/discover_icon1.png",
        "selectedIconPath": "images/discover_icon2.png"
      },
      {
        "pagePath": "pages/mall/mall",
        "text": "商城",
        "iconPath": "images/mall_icon1.png",
        "selectedIconPath": "images/mall_icon2.png"
      }
    ],
    "color": "#7C7C7C",
    "selectedColor": "#BA3E3E",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "position": "bottom"
  }

2.WXML 模板：这就类似于我们的html标记语言，不过规则略微不同，详情可参考官方文档 小程序WXML。

<!--pages/detail/detail.wxml-->
<view class="body" style="width:{{width}}px;height:{{height}}px;">
  <scroll-view class="main" scroll-y style="width:{{width}}px;height:{{height}}px;">
  <view class="bg-box">
     <image src="../../images/banner.jpg" mode="widthFix"></image>
    <view class="user-message clear">
      <view class="box">
         <image src="{{userInfo.avatarUrl}}" mode="widthFix" style="border-radius:50%;"></image>
        <view class="name">姓名：{{orderList.name}}</view>
        <view class="p-box">阳历 ：{{orderList.year}}年{{orderList.month}}月{{orderList.day}}日  {{hours[orderList.hour]}}时</view>
      </view>
    </view>

    <view class="info-box">
      <view style="margin-bottom:1rem;color:#7F453A;font-size:0.875rem;font-weight:bold;">您已解锁下列测算内容，点击可查看详情。</view>
        <view class="m-body">
          <view class="ul">
            <block wx:for="{{list}}">
              <view class="li ispay" catchtap='changePage' data-index="{{index+1}}">
                <view class="tit-box">
                  <view class="tit_s">{{item.title}}</view>
                  <view class="sanjiao">></view>
                </view>
              </view>
            </block>
          <view style="width:100%;height:20px;"></view>
          </view>
        </view>
    </view>
  </view>
  <view style="height:2.4rem;"></view>
  </scroll-view>
</view>

3.WXSS :WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

1. 新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
2. 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
3. 此外 WXSS 仅支持部分 CSS 选择器

更详细的文档可以参考 WXSS 。

app.wxss中可以设置所有页面的样式，每个具体样式文件中，只能设置它对应的文件的样式。

4.JS交互：微信小程序中，我们不能直接操作dom，只能在wxml对应的js文件中定义好函数，然后使用某种绑定方式（比如bindtap）绑定到dom元素上，来触发。

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

三，小程序的能力

1.小程序启动：

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径，写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。

于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

整个小程序只有一个 App 实例，是全部页面共享的，更多的事件回调参考文档 注册程序 App 。

2.小程序的页面：

看看detail.js文件的内容

// pages/detail/detail.js
var app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    data1: 0,
  },
  onLoad: function (options) {
  },
  getInfo:function(sn){
  },
  changePage: function (res) {
    var index = res.currentTarget.dataset.index;
    var sn = this.data.sn
    wx.navigateTo({
      url: '../info/info?index=' + index + "&sn="+sn
    })
  },

  onShareAppMessage: function () {
    return {
    }
  }
})

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。

在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。所有页面中需要用到的函数等都要写在page构造器的内部，然后在合适的时机被调用。

有关于 Page 构造器更多详细的文档参考 注册页面 Page 。

备注：在传统的html开发的页面中，如果没有做特殊处理，只有当页面中引用了对应的样式文件和逻辑交互代码文件，它们才会起作用。前面提到过，微信小程序会自动匹配文件，所有只要你的文件名命名规范，所有页面的样式及交互文件会自动被引用。

3.组件：小程序提供了丰富的组件可以供我们使用，同时我们也可以自己自定义符合自己要求的组件。

组件的引用和html中的标签类似，我们还可也给组件传值，例如我们要显示地图，并且在用户单击地图时做出响应代码可以如下来书写：

<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>

这个地图组件的中心将是广州的经纬度，同时单击地图时会触发绑定的markertap事件。我们也可以通过class类名或者style来控制组件的样式。

更多的组件可以参考 小程序的组件 。

4.API:为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。

需要注意的是：多数 API 的回调都是异步，需要处理好代码逻辑的异步问题。

API 能力见 小程序的API 。

四，发布前的准备

五，上线

四五两点需要有相应的身份才可以使用，这个具体需要用到时可以去官网查阅。^_^