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

小程序很容易上手，类似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.时间选择器（picker）---组件

在小程序的内部封装这个方法了

效果

wxml

<span>发布时间：</span>  
<picker mode="date" value="{{date}}" bindchange="bindDateChange">  <view class="nap_picker">  {{dates}}  </view>  
</picker>    

wxss

.nap_picker{border:1px solid #666666;height:50rpx;margin-bottom:10rpx;padding-left:10rpx;line-height:50rpx;
}

js

 data: {dates: '2016-11-08',},//点击日期组件确定事件  bindDateChange: function (e) {this.setData({dates: e.detail.value})}

9.手机键盘上的回车时间

bindconfirm事件

搜索的事件是什么 给bindcomfirm绑定什么事件

  <input placeholder='请输入要搜索的企业信息' value="{{searchValue}}" bindinput="searchValueInput" bindconfirm='search' auto-focus/><text class='homeDetail_text' bindtap="search">搜索</text> bindconfirm='search' auto-focus/><text class='homeDetail_text' bindtap="search">搜索</text>

这个上面还有一个点，自动聚焦auto-focus

10.锚点定位

通过scroll-view的方法实现楼层跳跃，但是也有弊端，不能内含canvas。

注意：高一定设置，否则不出来。

效果

wxml

<scroll-view class="content" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true">  <view wx:for="{{act_addList}}">  <view class="address_top" id="{{ 'inToView'+item.id}}">{{item.region}}</view>  <view wx:for="{{item.city}}">  <view class="address_bottom">{{item.name}}</view>  </view>  </view>  
</scroll-view>  <view class="orientation_region">  <view class="orientation">自动定位</view>  <block wx:for="{{orientationList}}" >  <view class="orientation_city" bindtap="scrollToViewFn" data-id="{{item.id}}">{{item.region}}</view>  </block>  
</view>

wxss

page{ height: 100%;}  
.content{padding-bottom: 20rpx; box-sizing: border-box; height: 100%;}  
.location{width: 100%;}  
.location_top{height: 76rpx;line-height: 76rpx; background: #f4f4f4;color: #606660;font-size: 28rpx;padding: 0 20rpx;}  
.location_bottom{height: 140rpx;line-height: 140rpx;color: #d91f16;font-size: 28rpx;border-top: 2rpx #ebebeb solid; border-bottom: 2rpx #ebebeb solid;padding: 0 20rpx; align-items: center;display: -webkit-flex;}  
.address_top{height: 76rpx;line-height: 76rpx; background: #f4f4f4;color: #999999;font-size: 28rpx;padding: 0 20rpx;}  
.address_bottom{height: 88rpx;line-height: 88rpx; background: #fff;color: #000000;font-size: 32rpx;padding: 0 20rpx; border-bottom: 2rpx #ebebeb solid;margin-left: 20rpx;margin-right: 50rpx; }  
.location_img{width: 48rpx;height: 48rpx;position: absolute;right: 20rpx;top: 125rpx;}  
.add_city{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx solid #ebebeb; color: #000000;margin-right: 20rpx; }  
.add_citying{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx solid #09bb07; color: #09bb07;margin-right: 20rpx;}  
.orientation{white-space:normal;display: inline-block; width: 55rpx;height:58rpx; color: #999; text-align: center;}  
.orientation_region{ width: 55rpx;font-size: 20rpx;position: fixed;top: 220rpx; right: 0rpx;}  
.orientation_city{height: 50rpx; line-height: 50rpx;color: #000;text-align: center;}  

js

Page({/** * 页面的初始数据 */data: {orientationList: [{ id: "01", region: "东北" },{ id: "02", region: "华北" },{ id: "03", region: "华东" },{ id: "04", region: "华南" },{ id: "05", region: "华中" },{ id: "06", region: "西北" },{ id: "07", region: "西南" }],act_addList: [{id: "01", region: "东北地区",city: [{ id: "0101", name: "白山江源" },{ id: "0102", name: "白山市" },{ id: "0103", name: "宾县" },{ id: "0104", name: "大庆" },{ id: "0105", name: "测试1" },{ id: "0106", name: "测试2" },{ id: "0107", name: "测试3" },{ id: "0108", name: "测试4" },{ id: "0109", name: "测试5" },{ id: "0110", name: "测试6" },]},{id: "02", region: "华北地区",city: [{ id: "0201", name: "包头" },{ id: "0202", name: "保定" },{ id: "0206", name: "测试2" },{ id: "0207", name: "测试3" },{ id: "0208", name: "测试4" },{ id: "0209", name: "测试5" },{ id: "0210", name: "测试6" },]},{id: "03", region: "华东地区",city: [{ id: "0303", name: "开封市" },{ id: "3104", name: "安阳市" },]},{id: "04", region: "华南地区",city: [{ id: "0401", name: "黑龙江市" },{ id: "0407", name: "测试3" },{ id: "0508", name: "测试4" },{ id: "0609", name: "测试5" },{ id: "0710", name: "测试6" },{ id: "0711", name: "测试8" },{ id: "0712", name: "测试9" },{ id: "0713", name: "测试10" },{ id: "0714", name: "测试11" },]},{ id: "05", region: "华中地区", city: [{ id: "0501", name: "黑龙江市" }] },{id: "06", region: "西北地区",city: [{ id: "0603", name: "开封市" },{ id: "0604", name: "安阳市" },]},{id: "07", region: "西南地区",city: [{ id: "0703", name: "开封市" },{ id: "0704", name: "安阳市" },{ id: "0401", name: "黑龙江市" },{ id: "0407", name: "测试3" },{ id: "0508", name: "测试4" },{ id: "0609", name: "测试5" },{ id: "0710", name: "测试6" },{ id: "0711", name: "测试8" },{ id: "0712", name: "测试9" },{ id: "0713", name: "测试10" },{ id: "0714", name: "测试11" },{ id: "0401", name: "黑龙江市" },{ id: "0407", name: "测试3" },{ id: "0508", name: "测试4" },{ id: "0609", name: "测试5" },{ id: "0710", name: "测试6" },{ id: "0711", name: "测试8" },{ id: "0712", name: "测试9" },{ id: "0713", name: "测试10" },{ id: "0714", name: "测试11" },]},],toView: 'inToView01',},scrollToViewFn: function (e) {var _id = e.target.dataset.id;this.setData({toView: 'inToView' + _id})console.log(this.data.toView)},onLoad: function (options) {}})  

 

11.animation动画

官方文档

一篇很好的文章

动画更像是对一个对象进行操作，先创建出一个动画实体，通过一系列的效果和队列step()对实体进行控制。

在onReady中初始化animation对象

 this.animation = wx.createAnimation()

动画执行的步骤（指的是这步完成后再执行其他的，如不加的话动作会同时进行）

step()

动画完成需要将动画export(0导出

this.setData({ animation: this.animation.export() })

例子：

效果

wxml

<view class="container"><view class="page-body"><view class="page-section"><view class="animation-element-wrapper"><view class="animation-element" animation="{{animation}}"></view></view><scroll-view class="animation-buttons" scroll-y="true"><button class="animation-button" bindtap="rotate">旋转</button><button class="animation-button" bindtap="scale">缩放</button><button class="animation-button" bindtap="translate">移动</button><button class="animation-button" bindtap="skew">倾斜</button><button class="animation-button" bindtap="rotateAndScale">旋转并缩放</button><button class="animation-button" bindtap="rotateThenScale">旋转后缩放</button><button class="animation-button" bindtap="all">同时展示全部</button><button class="animation-button" bindtap="allInQueue">顺序展示全部</button><button class="animation-button animation-button-reset" bindtap="reset">还原</button></scroll-view></view></view>
</view>

wxss

.animation-element-wrapper {display: flex;width: 100%;padding-top: 150rpx;padding-bottom: 150rpx;justify-content: center;overflow: hidden;background-color: #ffffff;
}
.animation-element {width: 200rpx;height: 200rpx;background-color: #1AAD19;
}
.animation-buttons {padding: 30rpx 50rpx 10rpx;width: 100%;height: 600rpx;box-sizing: border-box;
}
.animation-button {float: left;line-height: 2;width: 300rpx;margin: 15rpx 12rpx;
}.animation-button-reset {width: 620rpx;
}

js

Page({onReady: function () {this.animation = wx.createAnimation()},rotate: function () {this.animation.rotate(Math.random() * 720 - 360).step()this.setData({ animation: this.animation.export() })},scale: function () {this.animation.scale(Math.random() * 2).step()this.setData({ animation: this.animation.export() })},translate: function () {this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()this.setData({ animation: this.animation.export() })},skew: function () {this.animation.skew(Math.random() * 90, Math.random() * 90).step()this.setData({ animation: this.animation.export() })},rotateAndScale: function () {this.animation.rotate(Math.random() * 720 - 360).scale(Math.random() * 2).step()this.setData({ animation: this.animation.export() })},rotateThenScale: function () {this.animation.rotate(Math.random() * 720 - 360).step().scale(Math.random() * 2).step()this.setData({ animation: this.animation.export() })},all: function () {this.animation.rotate(Math.random() * 720 - 360).scale(Math.random() * 2).translate(Math.random() * 100 - 50, Math.random() * 100 - 50).skew(Math.random() * 90, Math.random() * 90).step()this.setData({ animation: this.animation.export() })},allInQueue: function () {this.animation.rotate(Math.random() * 720 - 360).step().scale(Math.random() * 2).step().translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step().skew(Math.random() * 90, Math.random() * 90).step()this.setData({ animation: this.animation.export() })},reset: function () {this.animation.rotate(0, 0).scale(1).translate(0, 0).skew(0, 0).step({ duration: 0 })this.setData({ animation: this.animation.export() })}
})

 

12.跳转页面

 

通常用的两种方法

a.在wxml中使用的

<navigator url="../index/index">跳转到新页面</navigator>  
<navigator url="../index/index" open-type="redirect">在当前页打开</navigator>  
<navigator url="../index/index" open-type="switchTab">切换到首页Tab</navigator>   -----注意 跳转底部的页面

b.在js中绑定事件使用的

 wx.navigateTo({url: '../newsAddPage/newsAddPage',})wx.switchTab({url: '../homePage/homePage'})

举个js的例子(左跳到右边)： 

         

wxml

  <view class="suspenddialog {{ showsUspend ? 'on' : '' }}" bindtap='returnHomePage'><view class='dialog_layer'><image src='../../images/icon_API.png'></image><span>首页</span></view></view>

wxss

.suspenddialog{width:80rpx;height:80rpx;background:rgba(90,101,116,0.8);position:fixed;bottom:100rpx;right:0;border-radius: 50%;text-align: center;cursor: pointer;
}
.dialog_layer{display: inline-block;
}
.dialog_layer image{width: 35rpx;height: 35rpx;display: block;margin:0 auto;margin-top: 10rpx;
}
.dialog_layer span{font-size: 10px;color: #ffffff;display: block;
}

js

returnHomePage:function(event){wx.switchTab({url: '../homePage/homePage'})
}

13.js文件接收wxml页面的参数

wxml

<view bindtap='dd' data-id='2'>欢迎你~</view>

js

Page({data:{},dd:function(e){console.log(e);var id = e.currentTarget.dataset.id;}
})

将e打印出来，所有信息都会出来。

传参数根据data-xxx，接收的时候通过e接收xxx

14.wxs

相当于页面中的脚本语言

wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
wxs 函数不能作为组件的事件回调。
由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

15.常用js方法

concat()--->拼接在后面

var colors=["red","green","blue"];
var colors2=colors.concat("yellow",["black","brown"]);alert(colors);
alert(colors2);

如果concat有参数，则原+现；如果concat没有参数，则原；都不会改变原来的数组。

push()--->与concat相似

push 遇到数组参数时，把整个数组参数作为一个元素；而 concat 则是拆开数组参数，一个元素一个元素地加进去。  
push 直接改变当前数组；concat 不改变当前数组

slice()---->截取

var colors=["red","green","blue","yellow","purple"];
var colors2=colors.slice(1);
var colors3=colors.slice(1,4);alert(colors2);  //green,blue,yellow,purple
alert(colors3);  //green,blue,yellow

如果有一个参数，则从参数项--最后项； 如果有两个参数，则从参数项---结束项（不包含结束项）

splice()---->插入、删除、替换

splice(0,2)会删除数组中的前两项。第一个参数：开始的位置；第二个参数：删除的个数。---删除

splice(2,0,"red","green")插入red和green。 第一个参数：开始位置；第二个参数：删除0个；第三个参数：插入的参数。---插入

splice(2,1,"red","green")第1的位置替换成red和green。第一个参数：开始位置；第二个参数：删除数；第三个参数：替换的参数。---替换

substring(begin,end)

substring(x,y)截取字符。第一个参数：开始的位置；第二个参数：结束的位置。---删除

16.下拉刷新、上拉加载

这两个方法是小程序自带的。

onPullDownRefresh（下拉刷新）

使用前，需要设置，不设置默认为false

"enablePullDownRefresh": true

onPullDownRefresh:function(){console.log('下拉刷新'),this.setData({bgcolor:'pink'})},

onReachBottom（上拉加载）

使用的必要条件 大于屏幕（出现滚动条），否则不会触发事件

onReachBottom:function(){console.log('上拉加载');this.setData({bgcolor: 'yellow'})}

17.引用

import（将文件引入）

例：<import src=''/>

注：作用域（只能引用此文件的内容，不能隔着使用。例A引B，B引C，A不能用C中内容）

include（整个文件引入）

除了<template/><was/>之外，多用于底部，顶部较多的使用的部分。

18.表单组件

picker（上面讲过）

rich-text（富文本）

progress（进度条）

slider（滑动选择器）------多用于轮播图

switch（开关选择器）

19.自定义组件component

创建组件--调用组件

效果

创建组件

先新建一个modal页面作为组件

modal.json（是否作为组件）

{"component": true
}

modal.wxml

<view hidden='{{modalHidden}}'><view class='mask_layer' bindtap='modal_click_Hidden' /><view class='modal_box'><view class="title">提示</view><view class='content'><text class='modalMsg'>{{modalMsg}}</text></view><view class='btn'><view bindtap='modal_click_Hidden' class='cancel'>取消</view><view bindtap='Sure' class='Sure'>确定</view></view></view>
</view>

modal.wxss

.mask_layer {width: 100%;height: 100%;position: fixed;z-index: 1000;background: #000;opacity: 0.5;overflow: hidden;
}
.modal_box {width: 76%;overflow: hidden;position: fixed;top: 50%;left: 0;z-index: 1001;background: #fafafa;margin: -150px 12% 0 12%;border-radius: 3px;
}
.title {padding: 15px;text-align: center;background-color: gazure;
}
.content {overflow-y: scroll; /*超出父盒子高度可滚动*/
}
.btn {width: 100%;margin-top: 65rpx;display: flex;flex-direction: row;align-items: center;justify-content: space-between;box-sizing: border-box;background-color: white;
}
.cancel {width: 100%;padding: 10px;text-align: center;color: red;
} 
.Sure {width: 100%;padding: 10px;background-color: gainsboro;text-align: center;
}
.modalMsg {text-align: center;margin-top: 45rpx;display: block;
}

modal.js

Component({properties: {modalHidden: {type: Boolean,value: true}, //这里定义了modalHidden属性，属性值可以在组件使用时指定.写法为modal-hiddenmodalMsg: {type: String,value: ' ',}},data: {// 这里是一些组件内部数据text: "text",},methods: {// 这里放置自定义方法modal_click_Hidden: function () {this.setData({modalHidden: true,})},// 确定Sure: function () {console.log(this.data.text)}}
})

-------组件创建成功-------

调用组件，在example页面中调用组件

example.json

"usingComponents": {"modal": "../modal/modal"}

example.wxml

<!-- 调用modal组件 -->
<modal modal-hidden="{{is_modal_Hidden}}" modal-msg="{{is_modal_Msg}}"/>

example.js

Page({data: {is_modal_Hidden: false,is_modal_Msg: '我是一个自定义组件'}
})

注：

在app.json里注意先放调用的页面，否则先调用组件了。

 

20.分包

 

小程序中一个文件最大可用2M,如果文件太大的话，就需要手动进行分包(先使用哪个模块就先加载哪个模块)，最大8M

 

*********************正在更新*********想起什么记什么了*******************