微信小程序 笔记

Posted 2020-10-16 5只猫

1.Input 输入控件 

<input type=\'digit\' placeholder=\'0.00\'></input>

如果要使用单纯的数字控件，使那么可以将type设置为digit类型。

其它type的有效值如下：

2.Picker 选择器

项目中有要选择时间，日期的需求，就用到了这个选择控件。

<picker mode="date" start="2013-09-01" end="2027-09-01" value=\'{{timeValue}}\' bindchange=\'DatePickerValueChanged\'>{{timeValue}}</picker>

从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器（selector），多列选择器（multiSelector），时间选择器（time），日期选择器（date），省市区选择器（region），默认是普通选择器（selector）。

3.Flex 布局

微信小程序中，布局用的比多的是Flex 布局，弹性布局。具体的这篇文章写的很好。

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

 

内容对齐(justify-content)：主轴上的对齐方式

align-items属性定义项目在交叉轴上如何对齐。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

 

4.数据绑定

微信小程序不能像js一样，通过getelementByid这类的方法去获取元素，改变元素的值，小程序的数据绑定则是在wxml页面里通过两个中括号将数据绑定到元素上。

例如

<text>{{curentDate}}</text>

　　

在这个页面的对应的js文件里

　　/**
   * 页面的初始数据
   */
  data: {
    //当前日期
    curentDate:\'2017-12\'

  },

创建一个相应相同名字的变量来存储数据。

当想改变值的时候，通过setData方法来改变值。

this.setData({

curentDate: \'2017-4-5\',

}); 

通过这个方法，会刷新wxml页面上绑定这个变量的值。

 

5.设置全局变量

在utils文件下，有一个app.js文件，

globalData: {
    userInfo: null,
    //每月预算
    monthlyBudget: \'1500.00\',
  }

在globalData里声明全局变量。

 

在其它页面里面，获取和设置全局变量

var budget=getApp().globalData.monthlyBudget;  //get

getApp().globalData.monthlyBudget=1000;        //set

 

6.Block 与 View

view标签是一个视觉容器，按照我自己的理解，可以理解为html当中的div

而block是块的意思，但是他最后不显示在wxml里面，只是作为写代码时的分块作用，常常和小程序的wx：for 循环一起使用。

 <block wx:for="{{resultValue}}">
    <text>{{item.Id}}</text>
    <text>{{item.Name}}</text>
    <text>{{item.Category}}</text>
  </block >

如果用了block，那么在最后页面渲染的时候，是没有block这个标签的。我个人还是喜欢用view。

 

7.wx：for 循环

因为小程序的数据都是通过数据绑定到页面上，，而wx:for 主要用于绑定一个数组类型的数据，很实用的一个功能

item代表当前项。

index 代表当前循环赋值项的索引。

 

8. 数据请求

小程序当中的数据请求地址是要https，以及不能有端口号，请求地址要在开发者设置里将每一个地址添加，否则会报错。

 

9.获取系统当前时间

var date=new Date();
var day = date.getDate();
var month=date.getMonth()+1;
var year=date.getFullYear();
this.setData({
      timeValue: year.toString()+\'-\'+month.toString()+\'-\'+day.toString(),
    });

这个和js一样，创建一个date对象.......

 

10.scroll-view 滚动视图

在网页当中，经常是写一个div，设置高度，然后overflow-x：auto或者overflow-y：auto 来实现固定高度的滚动。

在小程序当中，已经有一些相应的控件了。scroll view了。

 <scroll-view scroll-y="true">
 </scroll-view>

具体的官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html

 

11.实现左右滑动，上下滑动

在相应的视图上面绑定 bindtouchstart   触摸开始，bindtouchmove  触摸移动，bindtouchend  触摸结束

触摸开始：可以在这个事件里面  获取当前开始触摸滚动的起始位置。

触摸滚动： 可以在这个事件里面，获取当前位置的信息  该事件，你这一直触摸滚动的话一直触发

触摸结束 ： 故名思意，就是你手指放开的时候，触发。。、

 <view bindtouchstart=\'TouchStart\' bindtouchmove=\'TouchMove\' bindtouchend=\'TouchEnd\'>
 </view>

TouchStart:function(e){
      startPot=e.touches[0].pageX;
  },

  TouchMove:function(e)
  {
      var touchMove=e.touches[0].pageX;
      if (touchMove - startPot >= 35 )
      {
        this.setData({
          isClick: false,
          //当选择 支出或者输入时，清空一下选择
          selectedWay: \'\',
          num: null,
        });
      }
      else if (touchMove - startPot <= -35 ) {
        this.setData({
          isClick: true,
          //当选择 支出或者输入时，清空一下选择
          selectedWay: \'\',
          num: null,
        });
      }
      
  },


  TouchEnd:function(e){

  }