微信小程序学习日志

作者: 有点健忘 | 来源:发表于2018-08-09 17:37 被阅读188次

每天的学习记录，可能有的地方写的不对，因为刚学，以后发现错的话会回来改掉
整体流程 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',
          })
        }
      }
    })

image.png

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'
             }) 
          }
        })

效果图如下

image.png

大致瞅下demo的代码

首先看下目录结构

image.png

从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(){
//随便干点啥
}

仿照已有的两个页面写一个简单页面

image.png

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"
    }
  ]
}

}

image.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;
}

image.png

然后看着不爽，想把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;
}

结果如下图，只有最后一个可以做到完全居中，第二个只能做到水平居中。
目前就这样，等以后知道咋弄再来修改代码。。。

image.png

template 模板

https://developers.weixin.qq.com/miniprogram/en/dev/framework/view/wxml/template.html?search-key=template

image.png
上图的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>
一般都这样弄个文件夹把模板文件写到里边，如下图

image.png

引用外部模板的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样式

image.png

微信这文档太简单了。完事看下他提供的demo，里边样式一堆都看不懂。
这种中间带个空格的也没看到介绍。等我研究下。好像多个样式就是用空格的。
<view class="flex-item bc_green">1</view>

下划线和删除线

image.png

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

image.png

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

image.png

<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

image.png

progress

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>

image.png

  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默认的就是这个

image.png

<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'

image.png

<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'

image.png

<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'

image.png

<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'

image.png

<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

image.png

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

image.png

<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 切换按钮学习

image.png

<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

image.png

如果只是简单地播放，不过多操作，给个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>

image.png

问题

今天看到别人获取点击事件的参数的时候是这样写的
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 效果

image.png

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}

效果图

image.png

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>

image.png

display:inline

发现最后一个777不见了

image.png

display:inline-block

777出来了

image.png

display:block

感觉这个就是默认的效果，也就是一行显示一个

image.png

----------------------------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了，所以到下个页面解析就挂了。

image.png

这种转换字符串的方法不行，那咋办了？

1~ 弄个全局变量，在app的globalData里添加一个字段，把数据传进去，下个页面再取

2~ 使用缓存

https://developers.weixin.qq.com/miniprogram/dev/api/data.html#wxremovestoragesynckey

image.png

比如跳转前把数据存起来

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;
  
}

看效果图，首先左右两边一边一个，完事剩下的平分多余的空间

image.png

space-around


  justify-content: space-around;

看效果图，就是大家平分所有的多余空间，换句话说，大家左右两边的margin是一样的。

image.png

flex-start flex-end center

这个3个，左边，右边，中间就没啥说的了

image.png

垂直方向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;
}

image.png

align-items: center;

image.png

我们上边这些图，都是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;
}

image.png

多行的时候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;
}

image.png

上边都是容器的介绍，下边介绍项目的属相

测试了下咋都没效果。。再说
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)

居左居右显示

要实现下图的效果，取消收藏的文字在右边居中，其他部分在左边

image.png

样式只会简单的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在它的下边。

image.png

----------------这几天有事，都没学小程序了，今天抽空继续学一点----------

今天学习下position，主要是前几天，也就是上边学的悬浮，看到有position=fixed，想了解下所有的position

position

http://www.w3school.com.cn/cssref/pr_class_position.asp
看完终于知道咋写android里的相对布局或者帧布局之类的，就是想要一个控件在另一个控件的上边，如下这种banner，图片上边有文字

image.png

  <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)
}

image.png

position:relative 相对自己原本位置的

css里的相对位置，和android是不太一样的，这个玩意好像是相对自己原本的位置来说的。

image.png

原本就是默认的显示在左侧的，现在往右边移动了50px;
left 正的，往右边移动，负的，往左边移动。相对于view原本左边的位置
right，正的，往左边移动，负的，往右边移动，相对于view原本右边的位置

.test{
  position: relative;
  left: 50px;
  background: #00ff00;
  width: 100px;
}

弄了个图，黑框就是view原本的位置，然后中间4个箭头方向的用正的，往外4个箭头方向的就是负的。

image.png

position:fixed 相对应该说是整个页面的吧

同样通过 "left", "top", "right" 以及 "bottom" 来对位置进行处理，可以显示在上边，下边，左边，右边。

position:sticky

粘性定位，该定位基于用户滚动的位置。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
效果图

image.png

测试代码如下,需要注意，需要设置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加上即可。

image.png

第二种写法,只演示上下垂直，左右一个道理
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的设置。下图这样子，不是我们要的效果。

image.png

如果要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垂直滚动，必须设置固定高度。

image.png

<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是无效的。
今天敲代码的时候，咋弄都没有效果，弄的我好迷糊，如下图圈中的部分，我开始写的时候单词是对的，可它没有那个颜色的提示框，这时候颜色应该是不识别的，可也不报错，我就说咋一直没效果。希望不要和我一样。。

image.png

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返回的是删除的第一个元素

image.png

微信小程序学习日志

方法学习

toast 和android的toast一样，这里默认1500ms自动消失，也可以调用hiden消失

loading 显示一个loading，需要手动调用hidden消失

modal确认对话款

actionsheet 列表选择器

大致瞅下demo的代码

页面跳转

设置点击事件

仿照已有的两个页面写一个简单页面

本来计划

先学这个

{{ }} 这样的表达式

this的使用

页面下json数据的设置

app.json的

image 以及循环添加控件

checkbox

动态改变数组里的数据

数组列表设置点击事件

单选设置

控件的隐藏和显示

选择本地图片

图片预览

录音

display

结果

display：block

gravity设置

--------------------------------------20180808学习----------------------------------------

测试

template 模板

引用外部模板的2步

for循环给模板传多条数据咋办

模块

运算符

参数

尺寸单位

全局样式与局部样式

-------------------20180809---------------------------------

wxss样式

scroll-view标签

写在最后，小程序的文档就是个坑货

swiper 就是我们常说的banner图

movable-view 可移动的

icon

progress

checkbox checkbox-group

form表单

-------------------------20180810----------------------

picker选择器

1-普通选择器，就一列mode = selector默认的就是这个

2~多列选择器 mode='multiSelector'

3~时间选择mode='time'

4~日期选择 mode='date'

5~区域的选择mode='region'

picker-view

slider学习 就是android的seekbar

switch 切换按钮学习

video

本地地址，wx有提供选择视频的方法，

网络地址

map

自定义组件

-------------------------------------20180813----------------

过完周末，今天来测试下，弄个水平的滚动条

刚测试碰到的问题

问题

style 和class同时存在，哪个生效？

hover-class

先学点样式

border

display:inline-flex

display:inline

display:inline-block

display:block

----------------------------20180814-----------------------

单位rem

页面数据传递

1~ 弄个全局变量，在app的globalData里添加一个字段，把数据传进去，下个页面再取

slider学习就是android的seekbar