小程序开发

底部菜单

窗体，菜单，网络，设置

在app.json文件中添加以下配置信息。

,
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "演示",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "page/component/index",
      "iconPath": "image/icon_component.png",
      "selectedIconPath": "image/icon_component_HL.png",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "iconPath": "image/icon_API.png",
      "selectedIconPath": "image/icon_API_HL.png",
      "text": "接口"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  },
  "debug": false

JS 交互逻辑（修改视图数据模型，视图自动更新）

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

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

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

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

数据绑定：

绑定文本：

//数据
  data: {
    text:"Hello World"
  },
//绑定视图
<view>{{ text }}</view>

绑定组件属性值：

//数据
 data: {
    id:0 //数字
  },
//视图
<view id="item-{{id}}"> </view>

布尔类型的属性值绑定：

<checkbox checked="{{false}}"></checkbox> //正确方法
<checkbox checked="false"></checkbox> //错误方法

三元运算绑定：

//数据
 data: {
    greet:true
  },
//视图
<view>{{greet?'Hello':'Byebye'}}</view>

算术运算：

//数据
  data: {
    x:3,
    y:5,
    result:15
  },
//视图
<view>{{ x * y }}={{result}}</view>

字符串拼接：

//数据
 data: {
    name:"isco"
  },
//视图
<view>{{ "Hello "+name }}</view>

对象和数组绑定：

//数据
  data: {
    userInfo:{nickname:"isco"},
    people:["Li Lei","Han Meime"]
  },
//视图
<!--对象-->
<view>{{ userInfo.nickname }}</view>
<!--数组-->
<view>{{ people[0] }},{{people[1]}}</view>

组合绑定： 

WXML条件控制和循环

wx:if,wx:for 属性必须放在组属性的开始位置。

<view wx:if="{{true}}">
</view>
<view wx:elif="{{false}}"></view>
<view wx:else>
</view>

<view wx:for="{{arrar}}" wx:for-index="index"
  wx:for-item="item"
  wx:key="unique">
    {{ index }}:{{ item }}
</view>

注意：wx:for中的key属性，可以保证条目的新增删除修改条目后不会重新创建。状态和结构不会被重置。

包装元素：不会产生任务多余和视图输出，无需渲染，效率比View组件快

<block wx:for="{{array}}">
  <block wx:if="{{condition1}}">
    <block wx:if="{{ condition2 }}">
      <text>Hello</text>
    </block>
  </block>
</block>

事件对象

 

target：被点击的组件

currentTarget：通过事件流冒泡或捕获到的事件所响应的组件。

事件使用组件的自定义属性值：

事件冒泡与捕获的实现：

WXML动态模板文件

 模板脚本语言WXS

即JS脚本，主要用于数据的格式化处理，例如：对时间戳的格式化

WXS属于JaveScript的子集

注意：WXS是单例模式，我们应该使用闭包调用函数，被免互不干扰。

WXS例子：

format.wxs定义文件:

module.exports = {
  comma: function(text) {
    return text.toString().replace(getRegExp(',', 'g'), '，');
  }
};

frame.wxml模板中调用WXS:

<wxs src="format.wxs" module="format"></wxs>

<template name="frame">
  <view class="frame" data-index="{{index}}" bind:tap="edit">
    <image class="image" mode="aspectFit" src="{{src}}" data-tag="image"></image>
    <text class="text" hidden="{{!aside}}" data-tag="text">{{format.comma(text)}}</text>
  </view>
</template>

WXMS中引用模板:

<import src="frame.wxml"></import>
<view class="wrap">
  <block wx:for="{{images}}" wx:for-index="i" wx:for-item="image" wx:key="unique">
    <template is="frame" data="{{...image, index: i}}"></template>
  </block>
</view>