微信小程序开发小记

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

开发工具：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：

当设置 position 为 top 时，将不会显示 icon
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
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 也做了一些扩充和修改。

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

四，发布前的准备

五，上线

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