每天的学习记录，可能有的地方写的不对，因为刚学，以后发现错的话会回来改掉
整体流程 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
基础组件 https://developers.weixin.qq.com/miniprogram/dev/component/button.html
样式可以到这里学http://www.w3school.com.cn/css/index.asp
http://www.runoob.com/cssref/pr-pos-clip.html
数据的操作
https://www.hishop.com.cn/xiaocx/show_36805.html
方法学习
简单的提示
toast 和android的toast一样，这里默认1500ms自动消失，也可以调用hiden消失
默认的icon是success也就是一个对号，设置为none就只显示文字了。
wx.showToast({
title: 'login success',
icon:'none'
duration:1000
})
loading 显示一个loading，需要手动调用hidden消失
wx.showLoading({
title: '加载中',
})
setTimeout(function(){
wx.hideLoading()
},2000)
modal确认对话款
wx.showModal({
title: 'title',
content: 'content',
success: res => {
if (res.confirm) {
wx.showToast({
title: 'click ok',
})
}else if(res.cancel){
wx.showToast({
title: 'click cancel',
})
}
}
})
actionsheet 列表选择器
代码,如果列表数据要动态的，那这里引用一个变量即可，你去修改变量这里自然也就变了。
wx.showActionSheet({
itemList: ['老大', '老二', '老三'],
itemColor:"blue",
success:function(res){
wx.showToast({
title: ''+res.tapIndex,
icon:'none'
})
},
fail:function(res){
wx.showToast({
title: 'cancel',
icon:'loading'
})
}
})
效果图如下
大致瞅下demo的代码
首先看下目录结构
从android开发者的角度来分析
每一个js文件就相当于一个activity，当然了不太准，里边需要一个Page的东西的。
每一个js如果是一个页面的话，那么就需要注册才能用，android是在manifest.xml里注册，那么小程序是在哪里？
在app.json里，如下图,pages标签下的都是。另外window属性应该是设置的页面默认的属性，当然了是设置标题的主要
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/learn/learn"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "icanseno",
"navigationBarTextStyle":"black"
}
}
app.js 看起来很像我们的application。
.wxml 文件，感觉就像我们android里的布局文件
.wxss文件，很像是样式文件，对控件的属性进行设置。比如设置宽高，位置，边距等等
.json文件，很像我们manifest下每个activity下的配置文件，比如 label，theme那些。
页面跳转
url 后边跟着跳转页面的路径，2个点自然是上一级了
wx.navigateTo({
url: '../learn/learn',
})
设置点击事件
bindtap 就是设置点击事件的，后边起个名字。class就是一个样式的名字，样式在wxss里写
<button bindtap='bindLoginTap' class='button-login'>login</button>
//设置登陆点击事件
bindLoginTap:function(){
//随便干点啥
}
仿照已有的两个页面写一个简单页面
learn.wxml文件如下,弄了2个输入框，一个按钮
<view class='container'>
<view class='login-edit'>
<input class='input-phone'></input>
<input class='input-password'></input>
<button bindtap='bindLoginTap' class='button-login'>login</button>
</view>
</view>
learn.wxss文件如下
还没学规则，就仿着写，看他用的点加class名字，我也这样写。
不过这里碰到问题了，不知道距离这种单位咋区分的，我看demo里是rpx，可px又啥啥，
.login-edit{
display: flex;
flex-direction:column;
margin: 40rpx;
}
.input-phone{
background: red;
height: 50rpx;
}
.input-password{
background: blue;
height: 60rpx;
margin-top: 20px;//这里20px看上去和60rpx差不多，不知道单位咋算的，先放着
}
.button-login{
margin-top: 50px;
padding-left: 100px;
padding-right: 100px;
}
本来计划
https://developers.weixin.qq.com/miniprogram/dev/api/ui.html#wxsettopbartextobject
本来打算先学这些方法的，不过想想界面咋弄都还不会，还是先去学咋画界面吧
先学这个
https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#JSON-%E9%85%8D%E7%BD%AE
{{ }} 这样的表达式
这个和占位符差不多，里边有个变量，这个变量改变以后这里对应的值也就发生变化了，如果学过databinding的话估计好理解一些。
如下
//wxml文件里有如下的文本
<text class='login-text'>{{logintip}}</text>
//js里，初始化的时候赋值为login
/**
* 页面的初始数据
*/
data: {
logintip:'login'
},
//比如点击登录按钮我们改变这个字段，可以看到我们修改了logintip的值以后，文本显示的内容自动就修改了
//处理登陆点击事件
bindLoginTap:function(){
this.setData({
logintip:'点击登录了'
})
},
this的使用
上边的this没啥问题，可以找到setData方法，可如果我们再套一层，如下
onPullDownRefresh: function () {
this.setData({
logintip: '登录'
})
setTimeout(function(){
//在这里用this.setData就不行了，这个this已经不是我们要的那个this拉
},2222)
},
有两种方法，
第一种，用个临时变量保存下这个this
onPullDownRefresh: function () {
var temp=this;//赋值给一个临时变量
setTimeout(function(){
temp.setData({
logintip: '登录'
})
wx.stopPullDownRefresh()
},2222)
},
第二种,就像lamda表达式吧
onPullDownRefresh: function(){
//这里修改下，function（参数）改成参数=》这种，因为没有参数，所以用any代替
setTimeout(any=>{
this.setData({
logintip: '登录'
})
wx.stopPullDownRefresh()
},2222)
},
页面下json数据的设置
好像不支持双斜杠注释，编译的时候会一直提示挂了。。
{
"navigationBarTitleText": "第一个练习界面",//导航栏标题文字内容
"navigationBarBackgroundColor": "#ff0000",//导航栏标题颜色，仅支持 black/white
"navigationBarTextStyle": "white",//导航栏背景颜色
"enablePullDownRefresh": true,//是否开启下拉刷新
"backgroundColor": "#ffffff",//窗口的背景色
"backgroundTextStyle": "dark",//下拉 loading 的样式，仅支持 dark/light
"onReachBottomDistance":20,//页面上拉触底事件触发时距页面底部距离，单位为px
"disableScroll":true //设置为 true 则页面整体不能上下滚动；只在 page.json 中有效
}
//最后两个属性没有提示，比较坑，还得手动写。 另外上边是目前所有的页面的配置属性了，单独页面只能配置window属性用来覆盖app.json下的window属性
app.json的
完整的如下,tabbar不是必须的，还有坑。
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/learn/learn",
"pages/justtest/test"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "icanseno",
"navigationBarTextStyle":"black"
},
"networkTimeout": {
"request": 20000,
"connectSocket": 20000,
"uploadFile": 20000,
"downloadFile": 20000
},
"debug": true
,
"tabBar": {
"color": "#000000",
"selectedColor":"#ff0000",
"backgroundColor":"#ffffff",
"borderStyle":"black",
"position":"bottom",
"list": [
{
"pagePath": "pages/index/index",
"text": "test",
"iconPath": "res/all.png",
"selectedIconPath": "res/all_select.png"
},
{
"pagePath": "pages/learn/learn",
"text": "first",
"iconPath": "res/set.png",
"selectedIconPath": "res/set_select.png"
}
]
}
}
我看这里有个tabbar，我也加上了，完事发现这东西也不显示啊。而且咋显示啊，然后就想到了，小程序的第一个页面是在哪里设置的？
就是pages列表下的第一个，谁放到第一个谁就是启动页。
那么问题来了tabbar咋办？tabbar要显示成启动页，那么它的list下的第一个pagepath就必须和pages列表下的第一个一样。
而且发现，tabbar里的这些页面，无法在通过其他地方进入了。比如上边的，我把learn也放到了tabbar，
其他地方我有个按钮点击也跳到learn页面，如下，结果没反应，刚学，也不知道对不对，先这样吧
wx.navigateTo({
url: '../learn/learn',
})
image 以及循环添加控件
https://developers.weixin.qq.com/miniprogram/dev/component/image.html
默认数组的当前项的下标变量名为 index，数组当前项的变量名默认为 item
如果想改名字，可以这样写wx:for-item="itemData" wx:for-index="i"
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html
<view>
<text wx:if="{{isWaiting}}">等待加载数据..</text>
<block wx:else>
<image mode='aspectFit' style='width:100px; height:100px;background-color: #ff0000;' src='../../res/all.png'></image>
<view wx:for="{{array}}" wx:for-item="itemData" wx:for-index="i">
<view>{{itemData.index}}</view>
<button>{{itemData.name}}</button>
</view>
</block>
</view>
学习下wx:if wx:else 的用法
{{}}占位符，在标签里边一般得加个双引号的。
wx:for= 后边跟个数组，wx:for-item= 后边给循环的数据起个别名，后边用到
{{itemData.index}}就是根据上边的item的名字来获取数据的
我们在js的data数据里添加如下的数组
array:[{
index:0,
name:'大哥'
},
{
index: 1,
name: '二哥'
},
{
index: 2,
name: '三哥'
}
]
wx: 这玩意也不提示，用起来不爽
checkbox
默认是选中状态，"{{false}}" 这种有效，直接弄个单引号false是无效的。
<checkbox checked="{{false}}">{{"checkbox"+number}}</checkbox>
<button type="{{ck?'warn':'default'}}"
代码里动态修改ck的值，可以改变button的type。
动态改变数组里的数据
从这里看到的https://blog.csdn.net/JaRiS_jade/article/details/79269233
data: {
array:[{
index:0,
name:'大哥',
check:false
},
{
index: 1,
name: '二哥',
check: false
}
]
}
点击按钮修改
双引号括起来代表变量，0是数组索引，这里修改的是第一个。
btnclick0: function (res) {
this.setData({
"array[0].check" : true
})
}
第二种写法,用一个变量保存，不过使用的时候变量要加个中括号代表是变量
btnclick0: function (res) {
var hello = "array[0].check"
this.setData({
[hello]:true
})
}
数组列表设置点击事件
注意data-any (any任意类型) 方法，我们这里注入了一个id等于数据的index索引。
下边弄了2个 data-id 和 data-check
<view bindtap="arrayclick" wx:for="{{array}}" wx:key="index" >
<view>{{item.index}} {{index}}</view>
<button type="{{item.check?'warn':'default'}}" data-id="{{index}}" data-check="{{item.check}}" bindtap='itemclick'>{{item.name}}</button>
</view>
把点击事件写到外层也是可以的，如下
<view wx:for="{{array}}" wx:key="index" data-id="{{index}}" data-check="{{item.check}}" bindtap='itemclick'>
<view>{{item.index}} {{index}}</view>
<button type="{{item.check?'warn':'default'}}" >{{item.name}}</button>
</view>
js里这样写
//res.currentTarget.dataset保存所有的data-的数据
itemclick:function(res){
var id=res.currentTarget.dataset.id
var ck = res.currentTarget.dataset.check
var temp = "array[" + id + "].check"
// var state=this.data.array[id].check
// console.log("change============="+!state)
this.setData({
[temp]:!ck
})
}
单选设置
原理就是在js里定义一个clickindex的变量保存当前选中的item的index，完事代码如下
我这里比较简单，就修改type， 按钮默认就是灰色的，warn是红色的，注意 ‘warn’单引号，其他效果的话逻辑是一样的。
<view class="single_choice_views">
<view bindtap="singleclick" wx:for="{{array2}}" wx:key="index" data-id="{{index}}">
<button type="{{item.index==clickindex?'warn':'default'}}">{{item.name}}</button>
</view>
</view>
js代码
data: {
clickindex:0,
//省略其他 ，点击按钮以后修改clickindex为点击的按钮的index即可。
singleclick:function(res){
var id=res.currentTarget.dataset.id
this.setData({
clickindex:id
})
}
控件的隐藏和显示
第一种，设置他的display属性为none，这种的结果就相当于gone，不占位置
第二种，设置visibility=hidden，这种相当于invisible，只是看不到，但还占着位置
<button style='visibility:hidden'>preview images</button>
<button style='display:none'>preview images2</button>
动态改变可以这样写，其中state是个数字，可以是0,1,2
注意，外边双引号，里边单引号
<button style="visibility:{{state==0?'visible':'hidden'}}">preview images</button>
<button style="display:{{state==0?'none':'flex'}}">preview images2</button>
当然了，你也可以使用不同的样式来处理
<view class="view_stop_hidden{{state!=0?'view_stop_show':''}}">
<button bindtap='tapstoprecord' >stop record</button>
</view>
//或者
<view class="{{state==0?'view_stop_hidden':'view_stop_show'}}"></view>
wxss文件里
.view_stop_hidden{
display: none;
}
.view_stop_show{
display: flex;
}
说一下自己的理解，感觉wxss里的属性都可以写到wxml了，添加到style属性里即可
比如
style='display:none;visibility:visible;width:100wpx;height:100wpx'
选择本地图片
https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html#wxchooseimageobject
返回一个文件集合
res.tempFilePaths 里边是文件路径的数组
res.tempFiles 返回的是一个File数组， path是路径，size是文件大小，
wx.chooseImage({
count: 1, //默认9张
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function(res) {
console.log("file===========" + res.tempFilePaths + "===" + res.tempFilePaths.length+"==="+
res.tempFiles[0].path + "====" + res.tempFiles[0].size)
},
})
图片预览
urls里传一堆网络图片地址，current传你默认要显示哪一张的图片地址，不传的话默认就是显示urls里的第一张图，图片可左右滑动
wx.previewImage({
urls: ['https://xxx', 'https://xxx'
],
current: '', // 当前显示图片的http链接
})
录音
简单测试下，2个按钮，
第一个按钮点击开始后，可暂停，可继续。
操作没问题，台式机没麦克风，返回错误了，没法测试，等换手机测试再看一下
operateRecorder:fail DevicesNotFoundError
tapstartrecord: function() {
var recorderManager=wx.getRecorderManager()
if(this.data.state==0){
recorderManager.onStart(() => {
console.log('recorder start')
})
recorderManager.onPause(() => {
console.log('recorder pause')
})
recorderManager.onStop((res) => {
console.log('recorder stop', res)
const { tempFilePath } = res
})
recorderManager.onFrameRecorded((res) => {
const { frameBuffer } = res
console.log('frameBuffer.byteLength', frameBuffer.byteLength)
var fs=frameBuffer.byteLength/1024
var show=fs+"K"
if(fs/1024>0){
show=fs/1024+"M"
}
this.setData({
filesize:show
})
})
recorderManager.onError((res)=>{
console.log("onError=================" + res.errMsg)
})
const options = {
duration: 60000,
sampleRate: 44100,
numberOfChannels: 1,
encodeBitRate: 192000,
format: 'mp3',
frameSize: 50
}
recorderManager.start(options)
this.setData({
state:1
})
}else if(this.data.state==1){
recorderManager.pause
this.setData({
state:2
})
}else {
recorderManager.resume
this.setData({
state: 1
})
}
},
tapstoprecord: function() {
if(this.data.state==0){
return
}
var recorderManager = wx.getRecorderManager()
recorderManager.stop
this.setData({
state: 0
})
}
display
看到这个属性就顺道学习下
https://blog.csdn.net/u013673799/article/details/70157294
.root_view{
display: flex;
flex-direction: column;
height: 100%;
background-color: #b99a9ab7
}
flex-direction 默认是row也就是水平的，column是垂直的，还有2种带reverse的，就和android里的rtl一样，从右边或者下边开始排列。
flex-wrap 3种可选
nowrap（不换行，默认值）
wrap（换行）
wrap-reverse（与wrap的效果相反）
.view_text{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
display：block
block表示[块内]容器模式，总是使用新行开始显示，小程序的3个视图容器（view，srcoll-view，swiper）默认值均为display:block
结果
<view class='root_view'>
<button bindtap='tapchooseimage'>choose image</button>
<button bindtap='tappreviewimage' >preview images</button>
<button bindtap='tapstartrecord'>{{states[state]}}</button>
<view class="view_stop_hidden{{state!=0?'view_stop_show':''}}">
<button bindtap='tapstoprecord' >stop record</button>
<view>录音文件信息</view>
<text>{{filesize}}</text>
</view>
<view class='view_text'>
<rich-text class='view_text1'>text1</rich-text>
<rich-text class='view_text2'>text2</rich-text>
<rich-text class='view_text3'>text3</rich-text>
</view>
</view>
wxss
.root_view{
display: flex;
flex-direction: column;
height: 100%;
background-color: #b99a9ab7
}
.view_stop_hidden{
display: none;
}
.view_stop_show{
display: block;
}
.view_text1{
background: #ff0000;
width: 100rpx;
height: 50px;
}
flex ，column的情况下，发现上边3个按钮是居中显示的，而且宽度都是wrap的。
可下边那个隐藏按钮显示出来的 时候宽度是match_parent的。
分析一下应该是display=block的原因
display：block
这种情况下，子控件如果设置固定宽度，那就显示固定宽度，如果没有设置宽度，那么默认和屏幕宽度一样，另外子view每行就一个，
感觉block一设置，子view的有的属性咋就无效了。待研究。。。。。。。。。。。。。
gravity设置
align-items: center; justify-items: center;
align和justify的到底是水平还是垂直方向起作用，感觉是和view的flex-direction有关系的，
不知道哪里不对，感觉除了center其他都没效果。。。。。。。。。。
--------------------------------------20180808学习----------------------------------------
测试
.view_text{
display: flex;
height: 200px;
flex-direction: column;
align-items: center;//使得水平方向居中
justify-content: center;//使得垂直方向居中
background: #d6a0a0;
}
然后看着不爽，想把text文字居中，可咋看都不居中啊。搜了好几个帖子都没效果，最后看到百度一个帖子
text是行内元素 不能用text-align,你把text标签改成view 或者把text设置display:block.
补充下 因为行内元素长度随内容变化，所以他不能让你在一行的中间，因为他的长度就是文字长度。
先看下wxml文件,最早都是text，先把最后一个改成view测试
<view class='view_text'>
<rich-text class='view_text1'>text1</rich-text>
<text class='view_text2'>text2</text>
<view class='view_text3'>text3</view>
</view>
wxss代码
.view_text2{
display: block;
background: #00ff00;
text-align: center;
width: 150rpx;
height: 50px;
}
.view_text3{
display: flex;
flex-direction: column;
background: #2600ff;
align-items: center;
justify-content: center;
width: 150rpx;
height: 50px;
}
结果如下图，只有最后一个可以做到完全居中，第二个只能做到水平居中。
目前就这样，等以后知道咋弄再来修改代码。。。
template 模板
上图的wxml文件中有如下的代码
<!--右侧有箭头 -->
<template name="list">
<view class="tui-youjiantou">
<navigator url="{{item.url}}">
<block>
<text>{{item.title}}</text>
</block>
</navigator>
</view>
</template>
下边的代码就引用了上边的模板，另外下边的代码里也在自身定义了2个简单的模板
<import src="../../template/simpletp" />
<template name='test1'>
<view>header test</view>
</template>
<template name='test2'>
<view>{{item}}</view>
</template>
<scroll-view style="height:100%;" scroll-y="true">
<view>
<template is='test1' /> just test
<view wx:for="{{['a','b','c','d']}}">
<template is="test2" data="{{item}}" />
</view>
</view>
<template wx:for="{{days}}" is="list" data="{{item}}"></template>
</scroll-view>
简单的就是 template标签后边跟个name，里边要写啥看自己需求了。
这个可以写在当前正在用的wxml文件里，也可以写在单独的wxml文件了，别处调用。
还是建议写到单独的wxml文件里，因为模板肯定是多出调用才叫模板啊。找的时候也方便找。
<template name='test1'>
<view>header test</view>
</template>
一般都这样弄个文件夹把模板文件写到里边，如下图
引用外部模板的2步
其他地方使用的时候需要import导入，后边src跟路径
<import src="../../template/simpletp" /> 此代码放在需要模板的wxml文件里。
另外，如果模板有样式的话，那么在引用模板的wxss文件里也需要添加引用
@import "../../template/simpletp.wxss";
使用的时候也简单，如下template标签，后边 is跟上模板的name。如果要传递数据 用data
模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 <wxs /> 模块。
<template is="test2" data="{{item}}" />
for循环的话有2种写法都可以,可以直接在模板上for循环，也可以在外层for循环
<view wx:for="{{['a','b','c','d']}}">
<template is="test2" data="{{item}}" />
</view>
<template wx:for="{{days}}" is="list" data="{{item}}"/>
for循环给模板传多条数据咋办
我们除了item要传过去，index也要传过去咋办？
data里边是可以写key：value的键值对的，多个数据逗号隔开，如下，我们把index和item都传过去了。如果你想加其他的也没问题，再加上一个key：value即可。
<template name='test2'>
<view>{{content}}&&{{index}}</view>
</template>
<view wx:for="{{['a','b','c','d']}}">
<template is="test2" data="{{content:item,index:index}}" />
</view>
以前没注意，今天测试才发现，模板里变量的名字，需要和使用模板的地方传的数据的名字一样。
如下举例,2个xxx的地方名字要一样的。
<template name='test2'>
<view>{{xxx}}</view>
</template>
//使用
<template data="{{xxx}}"></template>
模块
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/01wxs-module.html
每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块
方便测试，同级目录下新加个文件test3.wxs
var a="i come from a test wxs file"
var b="bbbb"
var change=function(b){
return b+"...changed"
}
//只有exports的东西其他地方才可以使用,比如上边的变量b，外界是找不到的
exports: 通过该属性，可以对外共享本模块的私有变量与函数。
module.exports={
aaaa:a, //可以改名字
change:change
}
module.exports.message='message.............'
如何使用
<wxs src="test3.wxs" module="mtools"/> //src指向文件路径， module 起个名字，下边用到
{{mtools.aaaa}}
<view>{{mtools.change(mtools.message)}}</view>
也可以直接添加wxs标签，就写在wxml文件里
{{mlocal.hello}}
{{mlocal.getsize("yes")}}
<wxs module="mlocal">
var hello = "hello world"
var getsize = function(char) {
return char.length
}
module.exports = {
hello: hello,
getsize: getsize,
}
</wxs>
一个wxs文件可以引用另一个的，如下使用require方法，参数传相对路径即可
var a="i come from a test wxs file"
var tt=require("other.wxs")
console.log("==============1111"+tt.hello)
module.exports={
aaaa:a,
}
运算符
基础运算符，自增，自减，亦或，位运算，比较，等值
这几个不知道啥，
var a = 10, b = 20;
// delete 运算
console.log(true === delete a.fake);
// void 运算
console.log(undefined === void a);
// typeof 运算
console.log("number" === typeof a);
参数
如下，方法定义的时候function后边是没有写参数的，可使用的时候可以传N个参数。
var a = function(){
console.log(3 === arguments.length);
console.log(100 === arguments[0]);
console.log(200 === arguments[1]);
console.log(300 === arguments[2]);
};
a(100,200,300);
//这样也行
var change=function(b){
return b+"...changed"
}
change("aaa",3,4)//只有第一个有用
尺寸单位
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
样式导入
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
全局样式与局部样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
-------------------20180809---------------------------------
wxss样式
微信这文档太简单了。完事看下他提供的demo，里边样式一堆都看不懂。
这种中间带个空格的也没看到介绍。等我研究下。好像多个样式就是用空格的。
<view class="flex-item bc_green">1</view>
下划线和删除线
text-decoration: underline;
text-decoration:line-through;
scroll-view标签
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
测试代码如下
<view>
<scroll-view scroll-y style='height:200px;' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-with-animation="{{true}}"
scroll-into-view="{{toview}}" scroll-top="{{scrollTop}}">
垂直滚动，高度200
<view id="text1" style="height:150px; background:#ff0000; color:#ffffff;">text1</view>
<view id="text2" style='height:150px; background:#0000ff; color:#ffffff;'>text2</view>
</scroll-view>
<button bindtap='gotext1' style='margin-top:30px'>go text1</button>
<button bindtap='gobottom'>go bottom</button>
<button bindtap='gotop'>go top</button>
<button bindtap='scroll20'>scrollTop 10</button>
</view>
效果图如下，圈圈里的就是scroll-view
scroll-into-view 后边跟一个view的id，滚动到哪个view就设置哪个；
scroll-y 表示垂直方向移动，对应的scroll-x 水平的
scroll-with-animation 滚动的时候是否带动画
scroll-top 滚动到某个位置，
bindscrolltoupper 监听往上滚动，或者往左滚动
bindscrolltolower 监听往下滚动，或者往右滚动
bindscroll 监听滚动
写在最后，小程序的文档就是个坑货
写的简单，也不全。结果想写个水平的scrollview咋都不行，只好百度 https://www.cnblogs.com/Anne3/p/7053643.html
找到别人写的样式才可以。
<scroll-view scroll-x style="width: 100%;white-space: nowrap;">
<button bindtap='gotext1' class="btn_width" >go text1</button>
<button bindtap='gobottom' class="btn_width">go bottom</button>
<button bindtap='gotop' class="btn_width">go top</button>
<button bindtap='scroll20' class="btn_width">scrollTop 10</button>
</scroll-view>
//样式
.btn_width{
width: 100px;
display: inline-block;
}
主要的两点，scrollview需要white-space: nowrap;属性，要不控件多了自动换行了，没法滚，
子控件需要 display: inline-block;
swiper 就是我们常说的banner图
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
<swiper indicator-dots="{{true}}" indicator-color='#ff0000' indicator-active-color='#0000ff' autoplay="{{true}}" current='0' interval='5000' vertical="{{false}}" previous-margin='5px' next-margin='5px' display-multiple-items='1' bindchange='swiperchange'>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150" />
</swiper-item>
</block>
</swiper>
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
swiperchange:function(event){
//source===autoplay or touch
console.log("swiper change======"+event.detail.current+"==============="+event.detail.source)
}
movable-view 可移动的
https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html
<movable-area style="width:100%;" scale-area>
<movable-view direction="all" inertia out-of-bounds scale="{{true}}">
movable view
<view style="width:200px;height:300px;background:#ff0000;color:#ffffff;">place holder</view>
</movable-view>
</movable-area>
icon
progress
<progress percent='30' show-info stroke-width="12" color="#215980" active style='width:100%'/>
checkbox checkbox-group
文档又是个坑，效果图是垂直的，可又不告诉你咋垂直，又得百度搜
https://blog.csdn.net/wangshop_11/article/details/54236745
lable包裹的话用style='display:flex'
下边这个checkbox标签里没有设置值，相反在前边弄了个值，因为默认的checkbox文字在右边的，这里是左边的效果
<view>
<checkbox-group bindchange="checkboxChange">
<label style='display:flex;padding-left:10px' wx:for="{{items}}" wx:key="name">
{{item.value}}
<checkbox style="margin-left:10px" value="{{item.value}}" color='#215980' checked="{{item.checked}}"></checkbox>
</label>
</checkbox-group>
</view>
view包裹的话用style="flex-direction:column;
<checkbox-group bindchange="checkboxChange">
<view style="flex-direction:column;" wx:for="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}">{{item.value}}</checkbox>
</view>
</checkbox-group>
form表单
<form bindsubmit="formSubmit" bindreset="formReset">
<switch name="switch"/>
<slider name="slider" show-value ></slider>
<input name="desc" placeholder='input some thing'></input>
checkbox
<checkbox-group name="cg-country">
<checkbox value="TA" >thai</checkbox>
<checkbox value="CN" >china</checkbox>
<view>
radio
</view>
</checkbox-group>
<radio-group name="radio-group">
<label><radio value="radio1"/>radio1</label>
<label><radio value="radio2"/>radio2</label>
</radio-group>
<view class="btn-area">
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
点击按钮结果：{{show}}
</form>
formSubmit: function (e) {
console.log('form发生了submit事件，携带数据为：', e.detail.value)
this.setData({
show: JSON.stringify(e.detail.value)
})
},
formReset: function () {
console.log('form发生了reset事件')
this.setData({
show: 'reset.........'
})
},
-------------------------20180810----------------------
picker选择器
1-普通选择器，就一列mode = selector默认的就是这个
<view>普通选择器，结果是：{{array[index]}}</view>
<picker range="{{array}}" value="{{index}}" bindchange='bindPickerChange'>click </picker>
<view>普通选择器2，结果是：{{array[index]}}</view>
<picker range="{{objectArray}}" range-key='name' value="{{index}}" bindchange='bindPickerChange'>click </picker>
range 后边跟一个数组，如果数组里是对象的话，那么需要range-key来指定列表显示哪个字段
value是要显示哪个的index
bindchange 事件返回的也是index
如下js
array: ['美国', '中国', '巴西', '日本'],
objectArray: [
{
id: 0,
name: '美国'
},
{
id: 1,
name: '中国'
},
{
id: 2,
name: '巴西'
},
{
id: 3,
name: '日本'
}
],
index: 0,
bindPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
2~多列选择器 mode='multiSelector'
<view>多列选择，结果：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view>
<picker mode='multiSelector' bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">click </picker>
value 是个数组保存每列的下角标 multiIndex: [0, 0, 0]；
bindchange==value 改变时触发 change 事件，event.detail = {value: value}
bindcolumnchange==某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标
js,上边wxml里用的是multiArray，如果用objectMultiArray，那么就需要指定range-key=‘name’
multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
objectMultiArray: [
[
{
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}
], [
{
id: 0,
name: '扁性动物'
},
{
id: 1,
name: '线形动物'
},
{
id: 2,
name: '环节动物'
},
{
id: 3,
name: '软体动物'
},
{
id: 3,
name: '节肢动物'
}
], [
{
id: 0,
name: '猪肉绦虫'
},
{
id: 1,
name: '吸血虫'
}
]
],
multiIndex: [0, 0, 0],
这个时候数据是不完整的，如果切换脊椎动物，那么数据哪来？看下边
不过这个列子好像有问题，这样写，就算点取消那么数据也发生变化了。
bindMultiPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
},
bindMultiPickerColumnChange: function (e) {
console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
}
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
case 1:
switch (data.multiIndex[0]) {
case 0:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[2] = ['蛔虫'];
break;
case 2:
data.multiArray[2] = ['蚂蚁', '蚂蟥'];
break;
case 3:
data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
break;
case 4:
data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
break;
}
break;
case 1:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
case 1:
data.multiArray[2] = ['青蛙', '娃娃鱼'];
break;
case 2:
data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
break;
}
break;
}
data.multiIndex[2] = 0;
console.log(data.multiIndex);
break;
}
this.setData(data);
},
3~时间选择mode='time'
<view>时间选择，结果：{{time}}</view>
<picker mode='time' value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">click </picker>
value 就是一个具体的时间，格式"hh:mm"
start ，end分别限制时间的范围
bindchange的方法里，返回的就是具体的时间
bindTimeChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
time: e.detail.value //携带值为 21:01
})
},
4~日期选择 mode='date'
<view>日期选择，结果：{{date}}</view>
<picker mode='date' value="{{date}}" start='2015-02-12' end='2018-12-12' bindchange="bindDateChange" >click </picker>
value就是选中的日期 格式就是"YYYY-MM-DD"
bindechange 方法返回的也是具体的日期 ，如2016-09-01
年月日是可选的，如果你只要年，增加属性fields="year",如果只要年月，那么增加属性fields="month" ，
默认值是fileds='day' 也就是3个都显示。
ps:测试了一下，wx提供的这东西，对于day并没有做处理，它显示的都是31天，不过比如3月可以选31，你切换到4月，然后选择31，它就自动滚回1号了。模拟器的效果，手机上没测试不清楚。
5~区域的选择mode='region'
<view>地址选择，结果：{{region[0]}}，{{region[1]}}，{{region[2]}}</view>
<picker mode='region' value="{{region}}" custom-item="{{customItem}}" bindchange="bindRegionChange">click </picker>
value 就是一个数组 比如，["海南省", "海口市", "秀英区"]
这个好像微信默认自带的，不能设置数据的，只能设置默认的选中，
custom-item 就是个string，可为每一列的顶部添加一个自定义的项，比如这个列子就是都加了个 “全部”。
bindchange 事件的结果 ==value 改变时触发 change 事件，event.detail = {value: value, code: code, postcode: postcode}，其中字段code是统计用区划代码，postcode是邮政编码
看下返回的结果
bindRegionChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value+"===="+e.detail.code+"==="+e.detail.postcode)
this.setData({
region: e.detail.value
})
},
log如下
广西壮族自治区,柳州市,城中区====450000,450200,450202===545001
picker-view
picker是个弹框，而这个是嵌入页面的，也就是说是直接显示在页面的控件
用法，picker-view就是个容器，里边每一个picker-view-column就是一列，有几列就弄几个picker-view-column
<view>
picker-view 学习
<view>{{year}}年{{month}}月{{day}}日</view>
<picker-view indicator-style='height: 52px;' style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
<picker-view-column>
<view wx:for="{{years}}" style='line-height:52px;padding-left:15px;'>{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" style='line-height:52px;'>{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" style='line-height:52px;'>{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
value :数组，就是默认选中哪个，存储的是每列的索引，从0开始，比如上边有3个，【0,0,0】就是默认选中第一个都
indicator-style ：设置选择器中间选中框的样式
indicator-class：设置选择器中间选中框的类名，和上边一样，这个指向一个class样式，上边是直接写而已
mask-style ：设置蒙层的样式
mask-class ： 设置蒙层的类名
上边几个需要进一步学习，得研究下style都能设置啥。
js code
const years = []
const months = []
const days = []
const date = new Date()
for (let i = 1990; i <= date.getFullYear(); i++) {
years.push(i)
}
for (let i = 1; i <= 12; i++) {
months.push(i)
}
for (let i = 1; i <= 31; i++) {
days.push(i)
}
Page({
/**
* 页面的初始数据
*/
data: {
year:0,
month:0,
day:0,
value:[5,5,5],
years:years,
months:months,
days:days,
},
bindChange:function(res){
var arr=res.detail.value
this.setData({
year:years[arr[0]],
month:months[arr[1]],
day:days[arr[2]]
})
},
slider学习 就是android的seekbar
<view>slider学习</view>
默认的啥也不写的
<slider></slider>
step改为2，默认值为20，修改背景，选中颜色，修改滑块颜色，显示进度
<slider min='0' max='100' step='2' value='20' backgroundColor='#888888' activeColor='#0000ff' block-size='12' block-color='#00ffff' show-value></slider>
step改为2，默认值为20，最小100，最大200，显示进度
<slider min='100' max='200' step='2' value='20' show-value bindchange='sliderchange'></slider>
</view>
blocksize 12到28，默认是28的，看起来好大。
activeColor Color #1aad19 已选择的颜色
backgroundColor Color #e9e9e9 背景条的颜色
show-value Boolean false 是否显示当前 value
其他属性看名字就知道了，不做介绍了。
switch 切换按钮学习
<switch>开关</switch>
<switch checked type='checkbox' color="#0000ff" bindchange='switchchange'>...</switch>
比较简单的，默认的也就能改下颜色，type默认就是switch，如果改成checkbox，那就真成checbox了。
video
https://developers.weixin.qq.com/miniprogram/dev/component/video.html
如果只是简单地播放，不过多操作，给个src 就行，本地地址，网络地址都可以，
本地地址，wx有提供选择视频的方法，
<view class="section tc">
<video src="{{src}}" ></video>
<view class="btn-area">
<button bindtap="bindButtonTap">获取视频</button>
</view>
</view>
选择视频，api以后再仔细看
bindButtonTap: function () {
var that = this
wx.chooseVideo({
sourceType: ['album', 'camera'],
maxDuration: 60,
camera: ['front', 'back'],
success: function (res) {
that.setData({
src: res.tempFilePath
})
}
})
},
网络地址
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
<view class="btn-area">
<input bindblur="bindInputBlur"/>
<button bindtap="bindSendDanmu">发送弹幕</button>
</view>
看下弹幕
danmuList: [
{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}]
onReady: function () {
this.videoContext = wx.createVideoContext('myVideo')
},
//发送弹幕
bindSendDanmu: function () {
this.videoContext.sendDanmu({
text: this.inputValue,//这个就是个input的值，这里不考虑了
color: getRandomColor()
})
},
测试了一下，弹幕的time应该是秒，表示第几秒出现。
在sendDanmu方法里，添加了time貌似没效果，都是立马就出现了。重播的时候弹幕也是在相应的时间出现的，看来内部会自动添加时间的。
map
https://developers.weixin.qq.com/miniprogram/dev/component/map.html#map
属性太多，用的时候再仔细看吧，先放过。
wx提供的基本组件算是大概看完了，下边学习别的
自定义组件
看了一下，晕乎乎的。改天再找找有没有别人写的，看官方的估计够呛。
之后再研究下api，瞅了下不少了，一个个试下效果。今天就先这样拉。
-------------------------------------20180813----------------
过完周末，今天来测试下，弄个水平的滚动条
代码如下，结果了，上边那个显示的是垂直方向的，见了鬼了,
两个的区别就是上边的用的for循环来弄的，其他style都一样的，可下边的是正常的，水平方向滚动的，上边那个死活都是垂直的
<view>
<scroll-view scroll-x style="width: 100%;white-space: nowrap;" wx:for="{{array}}" wx:key='text'>
<button class='btn_width'>{{item.text}}</button>
</scroll-view>
<scroll-view scroll-x style="width: 100%;white-space: nowrap;">
<button bindtap='gotext1' class="btn_width" >go text1</button>
<button bindtap='gobottom' class="btn_width">go bottom</button>
<button bindtap='gotop' class="btn_width">go top</button>
<button bindtap='scroll20' class="btn_width">scrollTop 10</button>
</scroll-view>
</view>
为啥for循环构建的就不行了，我把for删了，然后button复制了几个，它是可以的，那现在问题就是出现在for循环上了？
突发灵感，想着外边套个block，没想到真的可以
<scroll-view scroll-x style="width: 100%;white-space: nowrap;" >
<block wx:for="{{array}}" wx:key='text'>
<view style="display:inline-block;width:100px;height:150px;margin-left:10px;background:#888">{{item.text}}</view>
</block>
</scroll-view>
学这玩意感觉还得懂style，style不熟，写起来真费劲，想水平他就死活是垂直的。
刚测试碰到的问题
也没看到文档说movable-area一个页面只能有一个，我弄了2个，结果第二个盖到第一个上边去了。
如下代码,首先movable-view的宽度需要根据子view的个数来算出来。
下边两种选一种，两个都写上去就发现后边那个盖在前边那个上边了！！然后我继续写才发现，不是2个movable-view的问题，是movable-view后边跟啥view都盖在它上边。
开始我还以为只能靠margin来解决了，后来来灵感了，我把;height:220rpx加上，发现没问题，不会盖住了
正确的代码是这样的<movable-area style="width:auto;height:220rpx">，需要把高度写上的。而且这个宽度必须是auto的，你如果写的固定的，那怕写个10000px，那么内容也滚不出屏幕的。
<movable-area style="width:auto">
<movable-view style='height:220rpx;width:1120rpx' direction="horizontal" inertia out-of-bounds>
<view style='width:160rpx;height:220rpx;display:inline-block;background-color:#000;float:left'></view>
<view style='width:160rpx;height:220rpx;display:inline-block;background-color:#111;float:left'></view>
<view style='width:160rpx;height:220rpx;display:inline-block;background-color:#222;float:left'></view>
<view style='width:160rpx;height:220rpx;display:inline-block;background-color:#333;float:left'></view>
<view style='width:160rpx;height:220rpx;display:inline-block;background-color:#444;float:left'></view>
<view style='width:160rpx;height:220rpx;display:inline-block;background-color:#555;float:left'></view>
<view style='width:160rpx;height:220rpx;display:inline-block;background-color:#666;float:left'></view>
</movable-view>
</movable-area>
<movable-area style="width:auto;">
<movable-view style='height:220rpx;width:1280rpx;' direction="horizontal" inertia out-of-bounds>
<block wx:for="{{array}}" wx:key='text'>
<button style='width:160rpx;height:220rpx;display:inline-block;background-color:#888;float:left'>{{item.text}}</button>
</block>
</movable-view>
</movable-area>
问题
今天看到别人获取点击事件的参数的时候是这样写的
event.target.dataset.id
我只知道有下边这种
event.currentTarget.dataset.id
我打印了下2个结果是一样的，谁知道这两个有啥区别？
style 和class同时存在，哪个生效？
测试了一下，如果两者里边的属性不一样的话，好像都生效了，如果有一样的属性的话，那么style的级别高点。
hover-class
不知道这东西干啥的，今天搜了下，说是设置点击效果的，貌似还只支持view，button，navigator.
感觉就是根据触摸来动态修改背景颜色的。 如果你class或者style里也设置了background，那么这玩意就无效了。
<view hover-class='green'>测试hover class</view>
.green{
background: green
}
先学点样式
不学样式感觉展示点东西都费劲，都只能默认的从上到下。
https://www.cnblogs.com/liujun1128/p/7767123.html
copy点代码
微信小程序的布局css样式
width: fit-content;
font-size:20px; /设置文字字号/
color:red; /设置文字颜色/
font-weight:bold; /设置字体加粗/
border:1px solid red;/添加边框样式（粗细为1px， 颜色为红色的实线）/
font-family:"宋体"; /设置字体为宋体/
font-style:italic; /文字排版--斜体/
text-decoration:underline; /文字排版--下划线/
text-decoration:line-through;/文字排版--删除线/
text-indent:2em; /段落排版--缩进/
line-height:1.5em; /段落排版--行间距（行高）/
letter-spacing:50px; /段落排版--中文字间距/
word-spacing:50px; /字母间距/
text-align:center; right ; left ; /段落排版--对齐/
display:inline-flex; /将对象作为内联块级弹性伸缩盒显示/
display:block; /设置为块状元素/
display:inline; /设置为内联元素/
display:inline-block; /设置为内联块状元素/
word-break:keep-all; /* 不换行 /
white-space:nowrap; / 不换行 /
vertical-align:middle; /把此元素放置在父元素的中部。*/
border-style（边框样式）常见样式有： （border-color,border-width） 边框相关设置
dashed（虚线）| dotted（点线）| solid（实线）。
border-bottom border-top border-right border-left 上下左右线单独设置
box-sizing: border-box; //当使用padding的时候不影响大小
padding-top padding-right padding-bottom padding-left
margin-top margin-right margin-bottom margin-left (margin:10px 10px 10px 10px; top、right、bottom、left)
下边是代码，看下效果
<view hover-class='green' class='text-test'>测试hover class 顺道测试点样式之类的</view>
.text-test{
width: fit-content;
font-size:20px; /*设置文字字号*/
color:red; /*设置文字颜色*/
font-weight:bold; /*设置字体加粗*/
border:1px dashed red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
font-family:"宋体"; /*设置字体为宋体*/
font-style:italic; /*文字排版--斜体*/
text-decoration:underline; /*文字排版--下划线*/
text-indent:2em; /*段落排版--缩进*/
line-height:1.5em; /*段落排版--行间距（行高）*/
letter-spacing:1px; /*段落排版--中文字间距*/
word-spacing:30px; /*字母间距*/
text-align:right; /*段落排版--对齐 center right ; left ;*/
}
text-align:center;的作用，一个left，一个center 效果
border:1px dashed red;/添加边框样式（粗细为1px， 颜色为红色的实线）/
中间的dashed 可以修改dashed（虚线）| dotted（点线）| solid（实线）
也可以单独的设置,级别比border高，会覆盖上边border的设置
border-color: #0000ff;
border-width: 3px;
border-radius: 10px;
border-radius: 50%; 试了一下，貌似取的是宽高的50%，直接成了椭圆了
border-style：这个是边框的样式，上边的虚线，实线，点线都算。
border
搜了下样式，效果是这样的
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove} //凹槽，压线
p.ridge {border-style: ridge}//脊线
p.inset {border-style: inset}
p.outset {border-style: outset}
效果图
letter-spacing:1px; 这个是文字之间的距离，比如‘测试’这两个字的之间的间隔
word-spacing:30px; 单词之间的距离了吧，单词和单词之间，单词和汉字之间的距离。
display:inline-flex
<view wx:for="{{array}}" wx:key="text" class='row_show'>
<text style="width:200rpx" class="tab-text-margin {{tabIndex==index?'tab-text-selected':''}}" catchtap='tapClick' data-id="{{index}}">{{item.text}}</text>
</view>
display:inline
发现最后一个777不见了
display:inline-block
777出来了
display:block
感觉这个就是默认的效果，也就是一行显示一个
----------------------------20180814-----------------------
单位rem
看别人代码，发现用的这个单位，不知道啥玩意，查一下
https://www.cnblogs.com/wxcbg/p/5908967.html
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
突然发现不会样式，想弄一个布局出来都不会，比如android里的相对布局，帧布局，小程序咋实现的啊，我想让一个view在另一个view的下边，不会。
先不学这个了。先把api简单看一遍，然后找个demo去研究，之后再仔细学样式吧
页面数据传递
传递数据都是弄成基本类型，完事传过去
比如下边的ci是个字符串，或者数字等，可以直接写。
如果是个对象，或者数组，那么里用JSON.stringify转化为字符串。
就和网络请求传参数一样？key=value&key2=value2
wx.navigateTo({
url: '../day09-2/day09-2?index=' + ci + '&trees=' + JSON.stringify(对象或者数组都行),
})
接收的页面在onLoad里就能拿到
onLoad: function (options) {
that=this;
var trees=JSON.parse(options.trees)
var index=options.index
}
使用的时候发现坑啦。传数据的时候有时候就出问题了。齐了怪了，后来把数据打印了一下，才发现
如下图，我传了一个对象过去，而这个对象字符串里是有 & 这个字符的，结果被小程序从这里分开了，后边的数据当成另外的key value了，所以到下个页面解析就挂了。
这种转换字符串的方法不行，那咋办了？
1~ 弄个全局变量，在app的globalData里添加一个字段，把数据传进去，下个页面再取
2~ 使用缓存
https://developers.weixin.qq.com/miniprogram/dev/api/data.html#wxremovestoragesynckey
比如跳转前把数据存起来
wx.setStorageSync("tree", 对象或者数组都行)
跳转后的页面这样取
var trees=wx.getStorageSync("tree")
删除数据
wx.removeStorage({
key: 'tree',
success: function(res) {},
})
3~从页面a跳转到页面b，那么页面b咋获取或者修改页面a的数据？
页面a有如下数据
data: {
colors:[
"#4DCCF6", "#FF9999", "#999933", "#009999", "#FF9900", "#009999"
],
}
下边是页面b的代码
var pages=getCurrentPages()
var prePage=pages[pages.length-2]
var colors=prePage.data.colors //获取
console.log("test============"+JSON.stringify(colors))
prePage.setData({
//修改
})
可以看到，通过getCurrentPages（）可以获取到当前所有的页面，根据索引可以获取到上个页面，拿到page以后，想干啥都行啦。
使用cookie登陆
小程序咋用cookie，百度了好多帖子，都在讲一些没用的，看完了，都不知道咋下手，还好找到下边这帖子，简单粗暴，获取cookie，使用cookie，完事。
https://blog.csdn.net/DylanCat/article/details/78186427
情况说明
我们这的测试接口，cookie是在登陆返回的
我们知道wx.request的success方法的参数是有3个
data >>>>Object/String/ArrayBuffer>>>> 开发者服务器返回的数据
statusCode>>>>Number >>>>开发者服务器返回的 HTTP 状态码
header>>我们的cookie就在header里，如下所示,就是header的内容
{
"Server":"Apache-Coyote/1.1",
"Set-Cookie":"JSESSIONID=E765E28A5187699FCC2ABB363A53FDA5; Path=/; HttpOnly,loginUserName=111111111111; Expires=Sat, 15-Sep-2018 08:38:24 GMT; Path=/,loginUserPassword=xxxxx; Expires=Sat, 15-Sep-2018 08:38:24 GMT; Path=/,token_pass=4d140275ca869afde23c48d577d47065; Expires=Sat, 15-Sep-2018 08:38:24 GMT; Path=/",
"Content-Type":"application/json;charset=UTF-8",
"Date":"Thu, 16 Aug 2018 08:38:24 GMT",
"X-Cache":"MISS from SD-Endian5.magellangps.com",
"X-Cache-Lookup":"MISS from SD-Endian5.magellangps.com:8080",
"Transfer-Encoding":"chunked",
"Via":"1.1 SD-Endian5.magellangps.com (squid/3.4.14)",
"Connection":"keep-alive"
}
请求成功以后把cookie保存 "cookieKey" 保存的key，名字自己起。
wx.request({
url:'https://.............',
method:'POST',
success: function (res) {
wx.setStorageSync("cookieKey", res.header["Set-Cookie"])
}
})
然后在需要cookie的接口上使用
var header = {
'content-type': 'application/x-www-form-urlencoded',
'cookie': wx.getStorageSync("cookieKey")//读取cookie
};
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
header:header ,
success: function(res) {
console.log(res.data)
}
})
字符串的一些操作
上边的cookie要拿到里边的过期时间，不知道咋弄，只好按照java的代码来操作
发现split方法可用，trim方法可用，
另外搜了下，这里还有别的用法可以看看
https://blog.csdn.net/qq_23833037/article/details/79294190
if(header!=null){
var arr=header.split(';')
for(var i=0;i<arr.length;i++){
var kv=arr[i].trim()
console.log("kv=========="+kv)
if (kv.startsWith("Expires")){
var value=kv.substring(8)
console.log("value==========" + value)
if(Date.now()<Date.parse(value)){
return
}
}
}
}
时间的操作
Date.now() 返回当前时间 ms 13位
Date.parse("Sat, 15-Sep-2018 08:38:24 GMT") 解析后返回的也是13位的ms
另外我们utils下默认有个时间格式化的，可以参考
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(':')
上边return的东西简单说下，[year, month, day] 造了个数组，没啥说的，后边跟个map方法，这学过rx或者kotlin的应该知道吧，这就是对原始数据的一个转换，转换完还是个数组，不过成了字符串数组了。
然后 数组.join 方法，上边字符串操作的那个外部文章有讲到 ，就是把数组里的东西用join后边的字符连接起来
，比如【a,b,c】.join('/') 结果就是 a/b/c
new Date().toLocaleTimeString()
new Date().toLocaleDateString()
new Date().toLocaleString())
上边3个方法返回的结果如下：
下午5:35:22=======2018/8/16========2018/8/16 下午5:35:22
flex 继续研究
https://www.jianshu.com/p/2212146c0f57
http://www.runoob.com/w3cnote/flex-grammar.html
研究下justify-content
space-between
.item-rect{
width: 100rpx;
height: 100rpx;
color: #00f;
background: #888;
}
.layout{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
justify-content: space-between;
height: 400rpx;
border: 1px solid red;
}
看效果图，首先左右两边一边一个，完事剩下的平分多余的空间
space-around
justify-content: space-around;
看效果图，就是大家平分所有的多余空间，换句话说，大家左右两边的margin是一样的。
flex-start flex-end center
这个3个，左边，右边，中间就没啥说的了
垂直方向align-items: flex-start;
效果就是上图
垂直方向align-items: flex-end;
.item-rect{
width: 100rpx;
height: 100rpx;
color: #00f;
background: #888;
}
.layout{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
justify-content: space-around;
height: 400rpx;
border: 1px solid red;
align-items: flex-end;
}
align-items: center;
我们上边这些图，都是2行，也就是有2个主轴线的，这个时候align-content才起作用
align-content: center;
.item-rect{
width: 100rpx;
height: 100rpx;
color: #00f;
background: #888;
}
.layout{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
justify-content: space-around;
height: 400rpx;
border: 1px solid red;
align-items: center;
align-content: center;
}
多行的时候align-content生效
单行的话align-items生效
如下,看图，flex-start生效中
.layout{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
justify-content: center;
height: 400rpx;
border: 1px solid red;
align-items: flex-end;
align-content: flex-start;
}
上边都是容器的介绍，下边介绍项目的属相
测试了下咋都没效果。。再说
https://www.w3cschool.cn/weixinapp/route.html
使用flex布局的容器，子元素的float、clear和vertical-align属性将不起作用。
display属性
http://www.w3school.com.cn/cssref/pr_class_display.asp
数组添加数据
lists.concat(lists)
居左居右显示
要实现下图的效果，取消收藏的文字在右边居中，其他部分在左边
样式只会简单的flex，也没有android的相对布局，帧布局，约束布局等，弄个稍微复杂点的布局还挺费劲
我的思路，左边为一部分，右边为一部分，完事外层容器flex-direction=row 默认的水平显示
justify-contents=space-between 刚好左右一边一个，垂直方向就是align-items=center
完整的如下2个
.item-style{
border-width: 1px;
border-color: rgb(226, 219, 219);
border-style: solid;
margin-top: 20rpx;
margin-left: 1rpx;
margin-right: 2rpx;
font-size: 13px;
padding: 10rpx;
}
.item-h{
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
align-items: center;
}
不过弄完会发现右边的文字有时候会换行，所以设置了下边属性,nowrap禁止换行
.cancelLove{
display: block;
color: rgb(216, 191, 191);
white-space: nowrap;
padding: 10rpx;
}
节点信息获取
要写个悬浮条，需要知道顶部控件的高度。所以来研究下如何获取控件的信息
https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html#wxcreateselectorquery
wx.createSelectorQuery().select('#topview').boundingClientRect(function (res){
console.log("width/height==="+res.width+"="+res.height+"==="+res.bottom+"=="+res.top)
that.setData({
top:res.height
})
}).exec();
onPageScroll:function(event){
var top = event.scrollTop//监听滚动的距离
// console.log("scroll=================="+top)
var fix=top>this.data.top
if(fix!=this.data.fiexed){
this.setData({
fiexed:fix
})
}
},
wx.createSelectorQuery()
返回一个SelectorQuery对象实例。可以在这个实例上使用select等方法选择节点，并使用boundingClientRect等方法选择需要查询的信息。
示例代码：
Page({
queryMultipleNodes: function(){
var query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
res[0].top // #the-id节点的上边界坐标
res[1].scrollTop // 显示区域的竖直滚动位置
})
}
})
selectorQuery.select(selector)
在当前页面下选择第一个匹配选择器selector的节点，返回一个NodesRef对象实例，可以用于获取节点信息。
selector类似于CSS的选择器，但仅支持下列语法。
ID选择器：#the-id
class选择器（可以连续指定多个）：.a-class.another-class
子元素选择器：.the-parent > .the-child
后代选择器：.the-ancestor .the-descendant
跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
多选择器的并集：#a-node, .some-other-nodes
selectorQuery.selectViewport()
选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息，返回一个NodesRef对象实例。
要让一个节点悬浮在顶部的方法如下图
position: fixed; 可以悬浮，可悬浮的时候位置是距离顶部有 一定距离的，所以需要top=0来处理，还得加上z-order的属性，不能在一个层级上了，层级得高点，弄个比1大的就行，这样能保证滚动的时候其他view在它的下边。
----------------这几天有事，都没学小程序了，今天抽空继续学一点----------
今天学习下position，主要是前几天，也就是上边学的悬浮，看到有position=fixed，想了解下所有的position
position
http://www.w3school.com.cn/cssref/pr_class_position.asp
看完终于知道咋写android里的相对布局或者帧布局之类的，就是想要一个控件在另一个控件的上边，如下这种banner，图片上边有文字
<swiper indicator-dots indicator-active-color='#0000ff' autoplay>
<block wx:for="{{banners}}" wx:key='id'>
<swiper-item>
<view>
<image class='banner-image' mode='widthFix' src="{{item.imagePath}}"></image>
<text class='banner-text'>{{item.title}}11</text>
</view>
</swiper-item>
</block>
</swiper>
以前不会写，就写了个banner-image的样式【文字不显示，不知道跑哪去了】，今天把banner-text的加上，终于可以显示文字拉~~~~~~~~
z-index
图层的顺序，默认都是0，也就是同一级别的，现在text的改为1，自然就跑到图片上边去了，或者你把image的改成-1，也可以。
position：abusolute 在父元素内部
绝对布局，感觉就是android里的相对布局，完事通过left,rigth,top,bottom来确定位置。
这个left,top 需要2个来确定位置，也就是4个顶点，你写一个好像没效果。
如果view的高度没有设置，而你top=0，bottom=0.那么view会拉伸的和父元素一样高。
比如你top=0，bottom=0，而view自身高度设置了，那么bottom是无效的，优先top。
.banner-image{
width: 100%;
}
.banner-text{
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
z-index: 1;
background: #444400;
color: #fff;
font-size: 13px;
}
abusolute还有个额外的属性clip,后边跟一个rect (top, right, bottom, left) 裁剪区域，这个区域里的东西是可见的,裁剪区域rect的值，是对view本身的左上顶点开始算的。看下效果图就知道了
.test{
position: absolute;
top: 40px;
background: #00ff00;
width: 100px;
height: 40px;
clip: rect(0px,50px,40px,0px)
}
position:relative 相对自己原本位置的
css里的相对位置，和android是不太一样的，这个玩意好像是相对自己原本的位置来说的。
原本就是默认的显示在左侧的，现在往右边移动了50px;
left 正的，往右边移动，负的，往左边移动。相对于view原本左边的位置
right，正的，往左边移动，负的，往右边移动，相对于view原本右边的位置
.test{
position: relative;
left: 50px;
background: #00ff00;
width: 100px;
}
弄了个图，黑框就是view原本的位置，然后中间4个箭头方向的用正的，往外4个箭头方向的就是负的。
position:fixed 相对应该说是整个页面的吧
同样通过 "left", "top", "right" 以及 "bottom" 来对位置进行处理，可以显示在上边，下边，左边，右边。
position:sticky
粘性定位，该定位基于用户滚动的位置。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
效果图
测试代码如下,需要注意，需要设置left，top之类的属性，因为相当于fixed的时候你得确定它到底该显示在屏幕的哪个边上。
刚测试了下，继续网上滚，还能时不时的看到这个view蹦出来，不知道z-index是不是出问题拉。
.test{
position: sticky;
left: 0px;
top: 0px;
background: #00ff00;
width: 100px;
height: 80px;
}
如何居中显示？
https://blog.csdn.net/hs12341234/article/details/47148653
下边的是居右，垂直方向居中。
.love-style{
width: 20px;
height: 20px;
position: absolute;
right: 10px;
bottom: 0px;
top: 0px;
margin: auto;
}
居中，需要注意margin：auto是必须的，要不无效额。如果左右也要居中，那把left：0加上即可。
第二种写法,只演示上下垂直，左右一个道理
top:50%,使得元素的top在父容器的中心，完事通过transform，移动-50%,往上移动，这样元素中心就在父容器中心拉。
.love-style{
width: 20px;
height: 20px;
right: 10px;
position: absolute;
bottom: 10px;
top: 50%;
transform: translate(0,-50%);
/* transform: translateY(-50%); 这样写也可以*/
}
第三种，和上边差不多，不过把transform改成
margin-top: -10px; 即可，也是相当于往上移动了自身的一半
日常问题
<view>
<view class='root' wx:for="{{dirs}}" wx:key="dir" bindtap="navigation" data-dir="{{item.dir}}">
<button>{{item.dir}}</button>
</view>
<text class=' line_after'>juest test.......1</text>
<text class='line_bottom'>juest test.......2</text>
</view>
如上wxml文件，跟view啥也没样式也没有,完事root样式里设置了display，结果发现后边2 个text的效果跟随了root的设置。下图这样子，不是我们要的效果。
如果要text换一行，不和上边的button挤在一起，那么就如下代码里，打开注释的地方，给text添加一个display即可。
.line_after{
text-decoration:line-through;
/* display: flex; */
}
.line_bottom{
text-decoration: underline;
}
.root{
display: inline-flex;
flex-wrap: wrap;
flex-direction: row;
padding: 5px;
}
button{
margin: 5px;
}
垂直方向有2个scroll-view
scroll-view垂直滚动，必须设置固定高度。
<scroll-view class="left-view" scroll-y scroll-with-animation scroll-into-view="{{current}}" style="height:{{vheight}}px;">
使用style="height:{{vheight}}px;" ，然后在代码里获取屏幕的可用高度，代码需要注意加上px，要不没效果
wx.getSystemInfo({
success: function(res) {
that.setData({
vheight: res.windowHeight,
})
console.log("=========="+res.screenHeight+"=="+res.statusBarHeight+"=="+res.windowHeight)
},
})
具体看这里
https://developers.weixin.qq.com/miniprogram/dev/api/systeminfo.html#wxgetsysteminfoobject
| 参数 | 说明 | 最低版本 |
|---|---|---|
| brand | 手机品牌 | 1.5.0 |
| model | 手机型号 | |
| pixelRatio | 设备像素比 | |
| screenWidth | 屏幕宽度 | 1.1.0 |
| screenHeight | 屏幕高度 | 1.1.0 |
| windowWidth | 可使用窗口宽度 | |
| windowHeight | 可使用窗口高度 | |
| statusBarHeight | 状态栏的高度 | 1.9.0 |
| language | 微信设置的语言 | |
| version | 微信版本号 | |
| system | 操作系统版本 | |
| platform | 客户端平台 | |
| fontSizeSetting | 用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准，单位：px | 1.5.0 |
| SDKVersion | 客户端基础库版本 |
单位的换算
https://www.cnblogs.com/helena000/p/5989077.html
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。
规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px
设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34px
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6s 1rpx = 0.552px 1px = 1.81rpx
微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx =37.5rpx;
vw、vh适配
vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。
小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw
小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh
日常问题
view a里包含另外一个view b，然后给a弄了个border，然后view b的position是abusolute，left=0，这时候会发现border左边的线不见了。。其实是被view b给盖住了，让b的left不为0即可
hover-class
指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
支持 hover-class 属性的组件有三个：view、button、navigator
这个在button的情况下，很容易是无效的。
当button的type不是deault ，plain为 true的时候，设置hover-class是无效的。
今天敲代码的时候，咋弄都没有效果，弄的我好迷糊，如下图圈中的部分，我开始写的时候单词是对的，可它没有那个颜色的提示框，这时候颜色应该是不识别的，可也不报错，我就说咋一直没效果。希望不要和我一样。。
worker学习
这文档看完，实例看完，感觉和没看差不多。
https://developers.weixin.qq.com/miniprogram/dev/api/createWorker.html
首先app.json里添加workers的支持 "workers":"worker", 指定一个目录
然后就写一个worker的js文件
如下test.js ,延迟4秒后告诉ui，我干完活了。
setTimeout(any=>{
worker.postMessage({
msg: '工作结束',
})
},4444)
page页面的代码
//以我现在测试的结果，感觉wx.createWorker方法运行以后就会立马执行test.js里的代码了，我刚开始把这弄到page外边全局变量的，test.js也没有延迟，然后就发现，我下边的onMessage啥也接收不到。
不知道worker创建完，我要给它传参数咋传？百度没找到，文档没看懂。 demo我试了，我发现打印的日志也就和我这里的差不多，其他也都没打印。
我现在的理解
我感觉workers的js代码里只能postMessage,而page里的代码只能onMessage接收消息。
var worker = wx.createWorker('worker/request/test.js')
console.log("click====="+event.currentTarget.dataset.str)
worker.onMessage(function (res) {
console.log("onMessage========",res)
})
以后弄明白了再来修改这个。
动画 wx.createAnimation(OBJECT)
scale_anim:wx.createAnimation({
duration: 4000,
timingFunction: '"linear"',
delay: 0,
transformOrigin: '"50% 50% 0"',
})
wxml里设置动画事件
<view class='anim_parent'>
<image src='../../res/love_red.png' style='width:100rpx;height:100rpx' animation="{{scale_anim}}"></image>
</view>
.anim_parent{
padding: 100rpx;
}
js代码里实现动画属性,下边是一个按钮的点击事件
start_anim:function(){
var anima = wx.createAnimation({
duration: 3000,
timingFunction: 'linear'
})
anima.scale(2).step()
this.setData({
scale_anim: anima
})
},
timingFunction 有效值：
值 说明
linear 动画从头到尾的速度是相同的
ease 动画以低速开始，然后加快，在结束前变慢
ease-in 动画以低速开始
ease-in-out 动画以低速开始和结束
ease-out 动画以低速结束
step-start 动画第一帧就跳至结束状态直到结束
step-end 动画一直保持开始状态，最后一帧跳到结束状态
通过var animation = wx.createAnimation（{}）创建完动画以后，就可以进行各种设置了。
平移，旋转，拉伸，倾斜。
https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html#wxcreateanimationobject
组合动画，按照step分组，分组后一个一个执行的
anima.scale(2).step().rotate(100).step() //这个是先放大，在旋转
anima.scale(2).rotate(100).step()//这个中间step去了，所以大家是一组动画，放大和旋转同时进行
好像也没有android里的动画结束后可以复位的功能，结束后啥样就啥样了。
比如点击一个按钮，图片从100拉伸为200，然后再点击一个按钮，进行旋转180度，你会发现，它一边旋转一边缩小。
数组操作
teachers:['jerry','phantom']
长度 tearchers. length=2
console.log("=========="+this.data.teachers+"===="+this.data.teachers.join("+")+"===="+this.data.teachers.indexOf('phantom')+"==="+this.data.teachers.push("doph"))
var change=this.data.teachers.splice(1,2);
console.log("=======" + change.valueOf() + "===" + this.data.teachers)
//==========jerry,phantom====jerry+phantom====1===3
//=======phantom,doph===jerry
indexOf() 返回括号里的内容在数组里的索引
join() :首先数组默认打印出来的是逗号拼接起来的内容。使用join方法，就会用括号里的东西替换掉逗号
push：往数组最后添加内容，可以添加多个，返回新的数组长度
unshift():网数组开头添加内容，可以一次添加多个，返回新的数组长度。
splice :从数组中取出以起始位置开始的位数的内容，并写入增添内容，可用来删除内容与替换，看下上边打印的结果，因为我们push了一个“doph”,所以数组应该是长度为3的['jerry','phantom','doph']
splice方法以后，看下打印的结果，change是从位置1开始取了2个，那么结果就是phantom,doph，同时也看到，原始的数组只剩下了 一个jerry了。
splice（start,count,inserts[]）第三个参数其实是个数组，就是说我们把原始数组的start开始count个数的元素拿走，完事在这里添加一些inserts的内容，填多少个你随意，也可以不填。
比如
var temp = ['jerry', 'phantom', 'doph']
var replace = temp.splice(1, 2, 'insert')
console.log("========" + temp + "==========" + replace)
结果========jerry,insert==========phantom,doph
shift() 拿走数组的第一个元素，返回值就是拿出来的这个元素
pop() 拿走数组的最后一个元素，返回值就是拿出来的这个元素
splice其实也是删除数据的方法，比如要删除 index=10的数据，就是 tearchers.splice(10,1)
修改数据的话就是用索引了 tearchers[10]='xxx'
concat 数组合并
2个数组合并，没啥说的，前边的添加后边的
var temp = ['jerry', 'phantom', 'doph']
var temp2 = ['jerry2', 'phantom2', 'doph2']
var change=temp.concat(temp2)
修改数据以后，要使ui生效，需要setData
如果只是单独的修改了数组里的某条数据，比如index=1 的 teachers:['jerry','phantom'] phantom改成abc
有两种写法
this.setData({
'tearchers[1]':'abc'
})
//或者中间加个变量
this.setData({
var change=tearchers[1]
[change]:'abc'
})
看下图，还有个slice的方法，和splice差不多，不过这个slice返回的是删除的第一个元素
