微信小程序学习日志

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

方法学习

• wx.showToast
• wx.showLoading
• wx.hideToast
• wx.hideLoading
• wx.showModal
• wx.showActionSheet

简单的提示

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里写

login

  //设置登陆点击事件
bindLoginTap:function(){
//随便干点啥
}

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

image.png

learn.wxml文件如下,弄了2个输入框，一个按钮

login

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文件里有如下的文本
{{logintip}}

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

  
    等待加载数据..
    
      
      
        {{itemData.index}}
        {{itemData.name}}
      
    
  

学习下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"+number}}

代码里动态修改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

        {{item.index}} {{index}}
        

{{item.name}}

把点击事件写到外层也是可以的，如下

 
        {{item.index}} {{index}}
        {{item.name}}
      

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’单引号，其他效果的话逻辑是一样的。

  
    
      {{item.name}}
    
  

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，只是看不到，但还占着位置

preview images
  preview images2

动态改变可以这样写，其中state是个数字，可以是0,1,2
注意，外边双引号，里边单引号

preview images
preview images2

当然了，你也可以使用不同的样式来处理

    stop record
  
//或者

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

结果

  choose image
  preview images
  
  {{states[state]}}
  
    stop record
    录音文件信息
    {{filesize}}
  
 
 
 text1
 text2
 text3
 

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测试

  
    text1
    text2
    text3
  

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文件中有如下的代码

下边的代码就引用了上边的模板，另外下边的代码里也在自身定义了2个简单的模板