微信小程序（一）

*************************************************

小程序很容易上手，类似vue、angular。

1.基础

数据绑定

{
  {}} 。用大括号将数据绑定

wx:for

循环。最好把wx:for-item=""和wx:key=""都写上，否则会有警告。

wx:if

判断。还有wx:if---wx:elif---wx:else

2.模板

<template name="msgItem">
  ... ...
</template>

模板的好处就是随时都可以引用。此处的name就好像标识一样 引用的时候is='';对应 。data是对模板传的参数。 

<template is="msgTtem" data=""/> 

3.flex布局

在h5页面上，部分浏览器不支持flex布局，用起来很不方便，在此处随便用。

display:flex;

在父级和子级上都可以加上。那他们不同在于：

父级：

（横向或纵向布局）flex-direction：row | column | row-reverse | column-reverse

（横向上的布局）justify-content: flex-start | flex-end | center | space-between | space-around

（纵向上的布局）align-items: stretch | flex-start | flex-end | center | baseline

子级：

（可覆盖父级的align-items）align-self: auto | stretch | flex-start | flex-end | center | baseline

（是否换行）flex-wrap: wrap | nowrap | wrap-reverse 

（顺序）order:默认为0

4.注意的点

a.就算是空的js也要把page({})写上
b.json文件中不许出现注释 || 就算空的json也必须加{}
c.在页面绑定方法的时候不能加(),要写成bindtap='aa'
  js:aa:function(){}
d.<text>合计：<text>￥3333</text><text>
  <text>合计：
	<text>￥3333</text>
  <text>
  以上这两种写法表现的效果是不同的

 

5.小程序的bug

• textarea的auto-height自动增高，换到第二行会出现滚动条，再往下滚动条就会消失
• input输入框当加上placeholder='xxx'之后，输入框会出现抖动
• scroll-view不能使用canvas、textarea、map、video中使用（官方文档）。

6.事件

    点击事件：bindtap

7.echarts图

<cover-view  class="modal-box" hidden="{
  {zhezhao2}}" bindtap="hide2">
    <cover-view class="modal-body">
      <cover-view class="modal-content">
        <cover-image src="../../images/jijiangshangxian-20.png" class="fenxiang"/>
        <cover-view class="knowBtn" bindtap="hide2">知道了</cover-view>
     </cover-view>
    </cover-view>
</cover-view>

注：在原生的控件之上再使用布局，原生的z-index为最高的，再使用布局也遮不住，需要换成cover-view。

cover-view覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image

第一步

下载文件ec-canvas（下好后放到文件夹中）

第二步

在使用的页面中配置json（让页面可以使用echarts图）

"usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
}

第三步

效果

wxml

<view class="container">
  <ec-canvas id='mychart-dom-line' canvas-id='mychart-line' ec="{
  {ec}}"></ec-canvas>
</view>

wxss

.container{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
ec-canvas{
  width: 100%;
  height: 300px;
}

js

import * as echarts from '../../ec-canvas/echarts';
var app=getApp();
 function initChart(canvas, width, height) {
  var chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  var option = {
    title: {
      text: 'ECharts 数据统计'
    },
    tooltip: {},
    legend: {
      data: ['用户来源']
    },
    xAxis: {
      data: ["Android", "IOS", "PC", "Ohter"]
    },
    yAxis: {

    },
    series: [{
      name: '访问量',
      type: 'line',
      data: [500, 200, 360, 100]
    }]
  };
  chart.setOption(option);
  return chart;
 }

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});
var app=getApp();
 function initChart(canvas, width, height) {
  var chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  var option = {
    title: {
      text: 'ECharts 数据统计'
    },
    tooltip: {},
    legend: {
      data: ['用户来源']
    },
    xAxis: {
      data: ["Android", "IOS", "PC", "Ohter"]
    },
    yAxis: {

    },
    series: [{
      name: '访问量',
      type: 'line',
      data: [500, 200, 360, 100]
    }]
  };
  chart.setOption(option);
  return chart;
 }

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

8.时间选择器࿰