小程序总结

（一）小程序集成Bmob作为数据存储
（二）小程序中Flex布局
（三）小程序使用高德地图获取地理位置
（四）小程序列表条目点击
（五）小程序下拉刷新、上拉加载
（六）小程序总结

一、小程序的主体部分由app.js、app.json、app.wxss三个文件组成，放在根目录

（1）app.js 可以监听并处理小程序的生命周期、声明全局变量。其余的.js文 件可以通过var app = getApp() 获取其实例，调用其中定义的方法和变量，但不可以调用生命周期的方法。
（2）app.json 是小程序的全局配置。

  pages 配置小程序的组成页面，第一个代表小程序的初始页面
  window  设置小程序的状态栏、标题栏、导航条、窗口背景颜色
  tabBar  配置小程序tab栏的样式和对应的页面

（3）app.wxss 是小程序的公共样式表，可以在其他.wxss文件中直接使用

二、pages文件夹里是小程序的各个页面，每个界面一般都由.wxml、.wxss、.js、.json四个文件组成，四个文件必须是相同的名字和路径

(1) .js 是页面的脚本代码，通过Page()函数注册页面。可以指定页面的初始数据、生命周期、事件处理等
(2) .wxml 是页面的布局文件，只能使用微信定义的组件
(3) .wxss 是样式表，需要注意

• 尺寸单位：rpx 可以根据屏幕的宽带进行自适应
• 样式导入：@import导入外联样式表，如：@import "test.wxss";
• 定义在app.wxss中的全局样式，作用于每个页面。定义在page的.wxss文件只作用于对应的页面，会覆盖app.wxss中相同的选择器。
  (4) .json 是页面的配置文件，只能设置app.json中的window配置内容，会覆盖app.json中window的相同配置项，即使不配置任何东西也需要写{},否则会报错。

三、utils 里面包含一些公共的代码抽取的js文件，作为模块方便使用。模块通过module.exports对外暴露接口。

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

其他地方使用是var utils = require('../../utils/util.js');进行引用

四、数据绑定

.wxml 中的动态数据都来自Page中的data。数据绑定使用数据绑定使用双大括号将变量包起来，可以作用于内容、组件属性(需要在双引号之内)、控制属性(需要在双引号之内)、关键字(需要在双引号之内)。

Page({
    data: {
        message: "Hello",
        id:0,
        status: true
    }
})
<view> {{message}} </view>
<view id="item-{{id}}"> </view>
<view wx:if="{{status}}"> </view>
<view hidden="{{status}}"> </checkbox>

还可以进行简单的运算在{{ }}里

<view hidden="{{status ? true : false}}"> Hidden </view>
<view> {{a + b}} + c </view> 
<view wx:if="{{num > 6}}"> </view>
<view>{{"hello" + word}}</view>

五、条件渲染

用 wx:if="{{status}}"来判断是否渲染代码块

<view wx:if="{{status}}"> isShow </view>

还可以添加else块

<view wx:if="{{num > 5}}"> A </view>
<view wx:elif="{{num > 2}}"> B </view>
<view wx:else> C </view>

六、列表渲染

在组件上使用 wx:for属性绑定一个数组，就可以渲染组件了
默认情况下数组的当前下标变量名为index,当前项的变量名为item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: ["AA","BB","CC"]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="num" wx:for-item="itemName">
  {{num}}: {{itemName}}
</view>

七、小程序页面跳转以及传值

    <view class='address' bindtap='addrssOnclick'>

• wx.navigateTo()

addrssOnclick: function () {
                wx.navigateTo({
                url: '../../pages/address/address'
              })

• wx.redirectTo()

addrssOnclick: function () {
                wx.redirectTo({
                url: '../../pages/address/address'
              })

wx.navigateTo()是保留当前页面，跳转到某个页面，跳转页面后可以返回上一页。
wx.redirectTo()是关闭当前页面，跳转到某个页面，跳转页面后不能返回上一页。

• navigator 元素跳转

<navigator url='../../pages/address/address'>address</navigator>

• 传值
  只需要在路径后面，添加 ？后面接参数，以key－value的方式。

addrssOnclick: function () {
                wx.redirectTo({
                url: '../../pages/address/address？id=1'
              })

然后在address.js 中的 onLoad() 函数中得值：

onLoad: function (options) {
  console.log(options.id);
}