微信小程序

汇总：

　　1.官网；

　　2.新建页面；

　　3.页面顶部返回；

　　4.动态生成view；

　　5.三级联动（地区）；

　　6.for应用；

　　7.事件（修改样式和显示与否）；

　　8.if；

　　9.图片src添加前缀；

　　10.函数封装；

　　11.请求慢的优化；

　　12.分割与拼接；

　　13.模拟点击按钮事件；

　　14.navigateTo的bug；

　　15.下拉刷新；

　　16.上拉显示到下一页与选项卡bug；

　　17.字体设置；

　　18.上拉加载；

　　19.接口数据显示bug；

　　20.css动画执行；

　　21.找到触发事件的当前节点，并改变其内容；

　　22.多个表单提交（类型可能相同）；

　　23.侧滑功能；

　　24.图片组预览；

　　25.上传图片（多个）；

　　26.长按删除图片；

　　27.上滑与下滑；

　　28.滚动容器scroll-view；

　　29.js动画；

　　30.倒计时；

　　31.动态绑定事件（他人）；

　　32.弹性盒子；

　　33.checkbox自定义样式；

　　34.查看地图的经纬度；

　　35.转发功能；

　　36.view宽度随时改变，但是又要整体居中；

1.官网https://mp.weixin.qq.com/debug/wxadoc/dev/demo.html

2.每次新建页面，需要在app.json中添加绝对路径，并且对应的新页面json需要插入如下代码。（注：只要在app.json中的路径加入新增的页面路径，保存后会自动生成对应的文件）

{
    "navigationBarTitleText": "新页面"
}

3.页面顶部返回必须使用navigateBack方法，只需要在父页面中加入事件和事件处理即可：

//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../test/test'
})
},

4.动态生成view:点击就生成新的view。

（1）、wxml

<button bindtap="insert">增加按钮button>
<view wx:for="{
      {addview}}">
    <view class="a">
        <view class="ab">
            123
        view>
    view>
view>

（2）、js

Page({
  data:{
    addview: [],
  },
  insert: function() {
    var cb = this.data.addview;
    cb.push(this.data.addview.length);
    this.setData({
      addview: cb
    });
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

5.三级联动（地区）

（1）、wxml

<view class="add-address common-css">
    <view class="address-country common-css">
        国家：<text class="select-country">中国text>
    view>
    <picker bindchange="bindPickerChange" value="{
      {index}}" range="{
      {array}}">
        <view class="picker-box">
            省：<text class="select-country">{
     {array[index]}}text>
        view>
    picker>
    <picker bindchange="bindPickerChange2" value="{
      {index2}}" range="{
      {array2}}">
        <view class="picker-box">
            市：<text class="select-country">{
     {array2[index2]}}text>
        view>
    picker>
    <picker bindchange="bindPickerChange3" value="{
      {index3}}" range="{
      {array3}}">
        <view class="picker-box2">
            区/县：<text class="select-country">{
     {array3[index3]}}text>
        view>
    picker>
view>

（2）、wxss

.picker-box {
     
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 1rem;
    color: #222;
    border-bottom: 1px solid #eee;
}
.picker-box2 {
     
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 1rem;
    color: #222;
}
.add-addr-detail {
     
    width: 750rpx;
    height: 50px;
    padding: 0 25rpx;
}
.add-addr-input3 {
     
    width: 100%;
    height: 100%;
    line-height: 50px;
    font-size: 1rem;
}

（3）、js

Page({
  data:{
    array: ['美国', '中国', '巴西', '日本'],
    array2: ['美国2', '中国2', '巴西2', '日本2'],
    array3: ['美国3', '中国3', '巴西3', '日本3'],
    objectArray: [
      {
        id: 0,
        name: '美国'
      },
      {
        id: 1,
        name: '中国'
      },
      {
        id: 2,
        name: '巴西'
      },
      {
        id: 3,
        name: '日本'
      }
    ],
    index: 0,
    objectArray2: [
      {
        id: 0,
        name: '美国2'
      },
      {
        id: 1,
        name: '中国2'
      },
      {
        id: 2,
        name: '巴西2'
      },
      {
        id: 3,
        name: '日本2'
      }
    ],
    index2: 0,
    objectArray3: [
      {
        id: 0,
        name: '美国3'
      },
      {
        id: 1,
        name: '中国3'
      },
      {
        id: 2,
        name: '巴西3'
      },
      {
        id: 3,
        name: '日本3'
      }
    ],
    index3: 0,
  },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  bindPickerChange2: function(e) {
    console.log('picker2发送选择改变，携带值为', e.detail.value)
    this.setData({
      index2: e.detail.value
    })
  },
  bindPickerChange3: function(e) {
    console.log('picker3发送选择改变，携带值为', e.detail.value)
    this.setData({
      index3: e.detail.value
    })
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
   
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

6.for应用

（1）、wxml

<block wx:for="{
      {navArr}}" wx:key="keyone" wx:for-item="item" wx:for-index="idx">
         <view class="common-css header-nav {
      {navAcive[idx]}}" data-index="{
      {idx}}" data-id="{
      {item.parent_id}}" catchtap="navChange">{
     {item.name}}view>
block>

（2）、js

data:{
    array_na: [
      {nam: 'USA', vale: '美国'},
      {nam: 'CHN', vale: '中国'},
      {nam: 'BRA', vale: '巴西'},
      {nam: 'JPN', vale: '日本'},
      {nam: 'ENG', vale: '英国'},
      {nam: 'TUR', vale: '法国'},
      ]
  },

7.事件：修改样式和显示与否

（1）、wxml：触发事件和需要改的样式

　　<view class="mainnav-li common-css">
        <text class="mainnav-li-text common-css" catchtap="nav_even1" style="color:{
      {nav1_color}};border-bottom: {
      {nav1_border}};">全部text>
    view>
    <view class="mainnav-li common-css">
        <text class="mainnav-li-text common-css" catchtap="nav_even2" style="color:{
      {nav2_color}};border-bottom: {
      {nav2_border}};">待付款text>
    view>

（2）、wxml：对应显示的内容

<view class="tab-box common-css" style="display:{
      {nav1_dispaly}};">
1
view>
<view class="tab-box common-css" style="display:{
      {nav2_dispaly}};">
2
view>

（3）、js：全局变量，样式改变对应的值

var color1 = '#888888';
var color2 = '#00a1e9';
var nav_border1 = 'none';
var nav_border2 = '1px solid #00a1e9';
var nav_none = 'none';
var nav_block = 'block';

（4）、js：事件

//事件处理函数
  nav_even1: function() {
    this.setData({
      nav1_color: color2,
      nav1_border: nav_border2,
      nav1_dispaly: nav_block,
      nav2_color: color1,
      nav2_border: nav_border1,
      nav2_dispaly: nav_none,
      nav3_color: color1,
      nav3_border: nav_border1,
      nav3_dispaly: nav_none,
      nav4_color: color1,
      nav4_border: nav_border1,
      nav4_dispaly: nav_none,
      nav5_color: color1,
      nav5_border: nav_border1,
      nav5_dispaly: nav_none,
    });
  },
  nav_even2: function() {
    this.setData({
      nav2_color: color2,
      nav2_border: nav_border2,
      nav2_dispaly: nav_block,
      nav1_color: color1,
      nav1_border: nav_border1,
      nav1_dispaly: nav_none,
      nav3_color: color1,
      nav3_border: nav_border1,
      nav3_dispaly: nav_none,
      nav4_color: color1,
      nav4_border: nav_border1,
      nav4_dispaly: nav_none,
      nav5_color: color1,
      nav5_border: nav_border1,
      nav5_dispaly: nav_none,
    });
  },

8.if（请求数据使用）

（1）wxml：根据不同条件给出不同radio样式。（item_name是for的数组名，.state是该数组对应的键，其实就是请求返回对应的变量名）

<view wx:if="{
      {item_name.state == 1}}"> <radio checked value="{
      {radio_name}}{
      {item_id}}"/> view>
<view wx:else> <radio  value="{
      {radio_name}}{
      {item_id}}"/> view>

9.图片src添加前缀（例http//:）

（1）、wxml：item_name.specimg是src的值

<image class="block-left-img common-css" src="{
      {http_host}}{
      {item_name.specimg}}" mode="{
      {img_mode}}">image>

（2）、js：http_host是前缀

var http_host = 'http://' + app.globalData.sys_config.http_host;

that.setData({
   http_host: http_host,
});

（3）、js：app实例化引用

var app = getApp();

10.函数封装：

（1）、定义函数

getList:function() {
      var that = this;
      app.ajax({
      url:'/index.php/user/Basics/myOrderList',
      data: ajax_data,
      success:function(msg) {
        var array_res = msg.list;
        if(array_res.length == 0){
          that.setData({
            tips4_dispaly: nav_block,
          });
        }else {
          that.setData({
            tips4_dispaly: nav_none,
            array_block4: array_res,
          });
        }
      }
    });
  },

（2）、调用该函数

this.getList();

11.请求慢的优化

（1）、ajax请求前加上：

wx.showLoading({
                title: '加载中',
                mask: true
 });

（2）、ajax请求成功后加上（即succeed的最后面）：

wx.hideLoading();

（3）、完整实例：

nav_ajax: function() {
    var that = this;
    wx.showLoading({
      title: '加载中',
    });
    app.ajax({
      url:'/index.php/user/Basics/myOrderList',
      data: that.data.tab_ajax,
      success:function(msg) {
        var array_res = msg.list;
       
        if(array_res.length == 0){
          that.setData({
            tips_dispaly: 'block',
          });   
        }else {
          that.setData({
            tips_dispaly: 'none',
            array_block: array_res,
          });
        }

        wx.hideLoading();
      }
    });
  },

12.分割与拼接：msg是请求返回的内容，这里是把接口数组中的specsort与itemspec中的值进行“，”分割，再拼接成该接口数组对应下面的spec_str，此结果可以在“调试->AppData”中看到（在原接口数组下面，新增的属性spec_str）。

（1）、js

//分割与拼接开始
        var specData = msg.goods;
        for(var i = 0; i < specData.length; i++) {
            //重置，去除“，”来改变数据格式
            var specsort = (specData[i]['specsort']).split(',');
            var itemspec = (specData[i]['itemspec']).split(',');
            //存放新数组
            specData[i]['spec_str'] = '';
            for(var j = 0; j < specsort.length; j++) {
                specData[i]['spec_str'] += specsort[j] + ':' + itemspec[j] + ' ';
            }
        }
//分割与拼接结束

（2）、wxml引用：这里是for循环的引用，数组名wx:for="{ {array_block}}"，由于是在原数组下新增属性spec_str，所以可以直接用item_name.spec_str获取。

<view class="block-text2-details common-css">
    {
      {item_name.spec_str}}
view>

13.模拟点击按钮事件：

（1）、js按钮事件：

nav_even3: function() {
    this.setData({
      nav3_color: color2,
      nav3_border: nav_border2,
      nav3_dispaly: 'block',
    });
},

（2）、模拟点击触发该事件：

this.nav_even3();

14.navigateTo的bug：使用navigateTo才有返回，但来回超过5次之后，页面的事件会失效。解决办法：需要用的时候采用，而且页面多时需要和redirectTo配套使用，对应返回可以使用下面方法，也需配合使用（即看情况）

wx.navigateTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 1
})

 

15.下拉刷新：

（1）、json："enablePullDownRefresh": true

{
    "navigationBarTitleText": "订单确认",
    "enablePullDownRefresh": true
}

（2）、js：

onPullDownRefresh:function(){
   this.onLoad();
   wx.stopPullDownRefresh();// 页面停止刷新效果
},

16.上拉显示到下一页：设置next的值为true才能正常，当有选项卡切换时，每一个选项卡的事件中都要加：

this.data.next = true;

17.字体设置：和html一样，但是必须是小程序自带的字体才有效，比如黑体SimHei（已有引用外部字体api）

.orchid-font {
     
    font-size: 60rpx;
    font-family: 'SimHei';
}

18.上拉加载：如果有不同tab切换，就需要在每次切换时先清空总数组。

（1）定义函数：下面是3个选项卡的设置，每次点击后data的page+1，条件为true。

onReachBottom: function () {
    //上拉加载
    var that = this;
    switch(that.data.is_nav){
      case '1':
        if(!that.data.next1) return true;
        that.data.page += 1;
        that.page_ajax(true);
        break;
      case '2':
        if(!that.data.next2) return true;
        that.data.page2 += 1;
        that.nav2_ajax(true);
        break;
      case '3':
        if(!that.data.next3) return true;
        that.data.page3 += 1;
        that.nav3_ajax(true);
        break;
      default:
        break;
      
    }
    
  },

（2）调用的请求函数：next1是上拉刷新的条件，每个选项卡都要加而且值不一定相同，点击选项卡为true，当没有数据时为false。然后array_1累加存放接口数据的数组并赋值。

//封装顶部选项卡请求函数
  page_ajax: function() {
    this.data.next1 = true;//条件为true
    var that = this;
    wx.showLoading({
      title: '加载中',
    });
    app.ajax({
      url:'/index.php?m=ticket&c=Appticket&a=noUsedTicket',
      data:{
        page:that.data.page,//当前页码
      },
      success:function(msg) {
        if(msg.list && msg.list.length !=0){
          that.data.array_1 = (that.data.array_1).concat(msg.list);//累加数据
          var new_array = that.data.array_1;
          that.setData({
              nav1_array: new_array,
              sum1: msg.statistical.cnt1,
              sum2: msg.statistical.cnt2,
              sum3: msg.statistical.cnt3,
              is_nav: '1'//当前是第一个选项卡
          });
        }else{
          that.setData({
              tips1_dispaly: 'block',
              next1:false,//条件为false，不能再上拉
          });
        }
        
        wx.hideLoading();
      }
    });
  },

（3）初始化数据：page是当前第几页，is_nav是第几个选项卡，next是上拉刷新的条件，array_1是累加存放接口数据的数组。

data:{
      
    page: 1,
    page2: 1,
    page3: 1,
    is_nav: '1',
    next1:true,
    next2:true,
    next3:true,
    array_1: [],
    array_2: [],
    array_3: [],
  },

19.接口数据显示bug：调试器上显示，别人手机不显示---数据是模拟的，必须自己的手机才能看到数据。

20.css动画执行：根据数据绑定，将类名变为变量，再通过js赋值即可：

（1）wxml：class_name变量类名

<view class="{
      {class_name}} orchid-common-css">字体view>

（2）wxss动画

.orchid-amation {
     
    width: 500rpx;
    height: 100rpx;
    background-color: #006600;
    -webkit-animation: foolishOut 1s ease;
    -moz-animation: foolishOut 1s ease;
    -ms-animation: foolishOut 1s ease;
    animation: foolishOut 1s ease;
}
@-webkit-keyframes foolishOut {
     
    0% {
        opacity:1;
        -webkit-transform-origin:50% 50%;
        -webkit-transform:scale(1,1) rotate(360deg);
    }
    20% {
     
        opacity:1;
        -webkit-transform-origin:0% 0%;
        -webkit-transform:scale(0.5,0.5) rotate(0deg);
    }
    40% {
     
        opacity:1;
        -webkit-transform-origin:100% 0%;
        -webkit-transform:scale(0.5,0.5) rotate(0deg);
    }
    60% {
     
        opacity:1;
        -webkit-transform-origin:0%;
        -webkit-transform:scale(0.5,0.5) rotate(0deg);
    }
    80% {
     
        opacity:1;
        -webkit-transform-origin:0% 100%;
        -webkit-transform:scale(0.5,0.5) rotate(0deg);
    }
    100% {
     
        opacity:0;
        -webkit-transform-origin:50% 50%;
        -webkit-transform:scale(0,0) rotate(0deg);
    }
}
            
@keyframes foolishOut {
     
    0% {
        opacity:1;
        transform-origin:50% 50%;
        transform:scale(1,1) rotate(360deg);
    }
    20% {
     
        opacity:1;
        transform-origin:0% 0%;
        transform:scale(0.5,0.5) rotate(0deg);
    }
    40% {
     
        opacity:1;
        transform-origin:100% 0%;
        transform:scale(0.5,0.5) rotate(0deg);
    }
    60% {
     
        opacity:1;
        transform-origin:0%;
        transform:scale(0.5,0.5) rotate(0deg);
    }
    80% {
     
        opacity:1;
        transform-origin:0% 100%;
        transform:scale(0.5,0.5) rotate(0deg);
    }
    100% {
     
        opacity:0;
        transform-origin:50% 50%;
        transform:scale(0,0) rotate(0deg);
    }
}

（3）js：控制类名

data:{
    class_name: 'orchid-amation',
  },

21.找到触发事件的当前节点，并改变其内容或相关子节点、父节点的内容：

（1） wxml中for循环加上id，例子中为‘key’

 <view class="coupon-list common-css" wx:for="{
      {list_array}}" wx:for-item="item_name" wx:for-index="key">

（2）wxml在触发事件中加上id，例子中为‘key’

<view class="list-right-btn common-css" data-key="{
      {key}}" bindtap="changeName">{
     {item_name.btn_name}}view>

（3）js中追加属性（需要改变的内容'btn_name'、'img_chose'）并给默认值。这里利用key值也是从0开始累加的特性，用for循环i=0来赋值，方便后面查找。

for(var i=0;i) {
            new_array[i]['btn_name'] = '选择优惠券';
            new_array[i]['img_chose'] = 'http://3n4w.oss-cn-shenzhen.aliyuncs.com/public/admin-resource/image/lb_zonzhan_img/b_18.png';
          }
          that.setData({
              list_array: new_array,
          });

（4）js事件触发时，通过事件对象e得到data-key的值，也就是需要改变内容的数组下标key，然后找到对应数组下标的对应内容并改变，chose_id是最新的触发事件id，每次触发后就是上一次的了，所以重新赋值。

//选择
  changeName: function(e) {
    var key = e.currentTarget.dataset.key;

    if(this.data.chose_id != '-1'){
      this.data.list_array[this.data.chose_id]['btn_name'] = '选择优惠券';
      this.data.list_array[this.data.chose_id]['img_chose'] = 'http://3n4w.oss-cn-shenzhen.aliyuncs.com/public/admin-resource/image/lb_zonzhan_img/b_18.png';
    }
    this.data.list_array[key]['btn_name'] = '已选择';
    this.data.list_array[key]['img_chose'] = 'http://3n4w.oss-cn-shenzhen.aliyuncs.com/public/admin-resource/image/lb_zonzhan_img/b_19.png';
    this.setData({
        chose_id: key,
        list_array: this.data.list_array,
    });
  },

22.多个表单提交（类型可能相同）：

（1）wxml：用form包裹表单和提交按钮，input表单提交对应的字段用name接收（下面对应的key_name）。

<form bindsubmit="formSubmit">
    <view wx:for="{
      {array_form}}" wx:for-item="item_name" wx:for-index="item_id">
        <view class="flol common-css" wx:if="{
      {item_name.type == '1'}}">
            <template is="nameInputBox" data="{
      {...item_name.info}}"/>
        view>
        <view class="flol common-css" wx:elif="{
      {item_name.type == '2'}}">
            <template is="phoneInputBox" data="{
      {...item_name.info}}"/>
        view>
        <view class="flol common-css" wx:elif="{
      {item_name.type == '3'}}">
            <template is="nothingInputBox" data="{
      {...item_name.info}}"/>
        view>
    view>

    <view class="page-btnbox common-css">
        <button class="page-btn common-css" formType="submit" style="background-color: {
      {sub_bgcolor}};color: {
      {sub_color}};">立即预约button>
    view>
form>

<input class="inputbox-text common-css" name="{
      {key_name}}" bindblur="nameChange" type="text"/>

 

（2）js提交：自动是key_name:输入的值

//表单
  formSubmit:function(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value);
    this.data.sub_data = e.detail.value;
  },

（3）、注意：对应需要初始化的表单，可以采用如下格式：value字段可以初始化数据（即给server_val赋值），name可以通过form提交获取输入的内容。（下面实例没有提交按钮button，测试时要加上）

<form bindsubmit="formSubmit">
    <input class="common-css page-tr-input" name="server_input" value="{
      {server_val}}" placeholder="例如：WIFI  ,停车位"/>
form>

 

23.侧滑功能：

（1）、wxml

<view class="btn common-css" bindtap="model_show">显示view>
<view class="model common-css" style="left: {
      {model_left}};">
    <view class="model-close common-css" bindtap="model_close">关闭view>
view>

（2）、wxss

.btn {
     
    width: 750rpx;
    height: 80rpx;
    text-align: center;
    color: #fff;
    line-height: 80rpx;
    background-color: #006600;
}
.model {
     
    position: absolute;
    top: 0;
    z-index: 9;
    width: 750rpx;
    height: 100%;
    transition: left .5s;
    -webkit-transition: left .5s;
    background-color: #eee;
}
.model-close {
     
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 15px;
}

（3）、js

Page({
  data:{
    model_left: '100%',
  },
  //侧滑
  model_show:function(){
    this.setData({
      model_left:'0'
    });
  },
  model_close:function(){
    this.setData({
      model_left:'100%'
    });
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

24.图片组预览

（1）、 wxml

<view class="common-css comment-imgbox" wx:for="{
      {img_array}}" wx:for-item="img_list" wx:for-index="imgList_id">
        <image class="common-css comment-img" data-src="{
      {img_list.img_url}}" catchtap="tapimages" src="http://{
      {host}}{
      {img_list.img_url}}" mode="aspectFit">image>
    view>

（2）、js

tapimages: function(e) {
    console.log(e)
    var that = this;
    var http_host = that.data.host;
    wx.previewImage({
            current: "http://3n4w.oss-cn-shenzhen.aliyuncs.com/" + http_host + e.currentTarget.dataset.src, // 当前显示图片的http链接
            urls: ["http://3n4w.oss-cn-shenzhen.aliyuncs.com/" + http_host + e.currentTarget.dataset.src], // 需要预览的图片http链接列表
    });
},

25.上传图片（多个）

（1）、wxml：建立数组渲染，每次添加或删除都重新渲染数组。

<view class="common-css publish-uplogobox">
        <block wx:for="{
      {array_store}}" wx:for-item="store_list" wx:for-index="store_id">
              <image class="common-css upimgshow" data-index="{
      {store_id}}" catchlongpress="deleteStoreEven" src="{
      {store_list}}" mode="aspectFit">image>
        block>
        <view class="common-css publish-upimgBtn" catchtap="chooseImgStore">view>
view>

（2）、js

data:{
    array_store: []
  },

chooseImgStore:function(e){
    var that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        that.data.array_store.push(res.tempFilePaths);
        that.setData({
          array_store: that.data.array_store,
        });
      }
    });
  },

（3）、实际工作中需要使用app.js方法请求oss得到图片路径

//单个图片处理
app.sysUpload(res.tempFilePaths[0], null, function (url) {
     if (!url) return;
     that.setData({
            logo_imgs: res.tempFilePaths[0],//显示需要的图片路径
            logo_post: url,//上传需要的图片路径
     });
});

 

//图片数组处理
app.sysUpload(res.tempFilePaths[0], 0, function (url) {
       console.log(url);
       if (!url) return;
       that.data.store_imgs.push(res.tempFilePaths);//显示需要的图片
       that.data.store_post.push(url);//上传需要的图片
       that.setData({
             store_imgs: that.data.store_imgs,
       });
 });

26.长按删除图片（catchlongpress事件只有在手机上才能测试）：实际使用时用点击事件兼容好一些。

（1）、wxml与25是同一个例子

      for="{
     {array_store}}" wx:for-item="store_list" wx:for-index="store_id">
            
      
      

（2）、js

deleteStoreEven:function(e){
    var that = this;
    wx.showModal({
      title: '提示',
      content: '确定要删除该图片吗？',
      success: function(res) {
        if (res.confirm) {
          console.log('用户点击确定');
          that.data.array_store.splice(e.currentTarget.dataset.index,1);
          that.setData({
            array_store: that.data.array_store,
          });
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    });
  },

27.上滑与下滑：利用translateY而不是top是因为效果好些

（1）、wxml

<view class="page">

view>
<view class="page-connent" catchtouchstart="stratEven" catchtouchmove="moveEven" style="-webkit-transform: translateY({
      {topVal}}px);transform: translateY({
      {topVal}}px);">

view>

（2）、wxss

.page {
     
  float: left;
  width: 750rpx;
  height: 300px;
  background-color: #00ff00;
}
.page-connent {
     
  float: left;
  width: 750rpx;
  height: 800rpx;
  -webkit-transition:.5s all ease;
  transition:.5s all ease;
  background-color: #cc00ff;
}

（3）、js

data: {
            topVal: 0,
      },
      stratEven: function (e) {
            this.setData({
                  stratValX: e.touches[0].clientX,
                  stratValY: e.touches[0].clientY,
            });
      },
      moveEven: function (e) {
            var x = parseFloat(e.touches[0].clientX) - parseFloat(this.data.stratValX);
            var y = parseFloat(e.touches[0].clientY) - parseFloat(this.data.stratValY);
            var distance_val;
            if (Math.abs(y) < 6) {
                  return;
            }
            if (Math.abs(y) > Math.abs(x) && y > 0 && e.touches[0].clientY <= 500) {
                  //console.log('下滑'+Math.abs(y));
                  distance_val = 0;
            } else if (Math.abs(y) > Math.abs(x) && y < 0 && e.touches[0].clientY <= 500) {
                  //console.log('上滑'+Math.abs(y));
                  distance_val = -300;
            }
            this.setData({
                  stratValX: e.touches[0].clientX,
                  stratValY: e.touches[0].clientY,
                  topVal: distance_val,
            });
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
            let that = this;

      },

 

27-2.上滑效果优化体验（内含复制功能）

（1）、wxml

<view class="page" style="-webkit-transform: translateY({
      {baseVal}}px);transform: translateY({
      {baseVal}}px);">
    {
      {datatext}}<view class="copy" bindtap="tapName">复制view>
    <input class="input" type="text"/>
view>
<view class="page-connent {
      {baseClass}}" catchtouchstart="stratEven" catchtouchmove="moveEven" catchtouchend="moveEnd" style="-webkit-transform: translateY({
      {topVal}}px);transform: translateY({
      {topVal}}px);">
view>

（2）、wxss

.page {
     
  float: left;
  width: 750rpx;
  height: 300px;
  -webkit-transition:.5s all ease;
  transition:.5s all ease;
  background-color: #e0dce4;
  box-shadow: 2px 2px 1px #c5c0cc inset;
}
.page-base {
     
  -webkit-box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
}
.page-connent {
     
  position: relative;
  float: left;
  width: 750rpx;
  height: 800rpx;
  -webkit-transition:.5s all ease;
  transition:.5s all ease;
  background-color: #f5f5f5;
}
.copy {
     
  width: 100rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  background-color: #f5f5f5;
}
.input {
     
  margin-top: 20rpx;
  width: 750rpx;
  height: 60rpx;
  background-color: #f5f5f5;
}

（3）、js

Page({
  data: {
        topVal: 0,
        baseVal: 0,
        baseClass: '',
        datatext: '复制结果'
  },
  stratEven:function(e){
        this.setData({
            stratValX: e.touches[0].clientX,
            stratValY: e.touches[0].clientY,
        });
    },
    moveEven:function(e){
        var x = parseFloat(e.touches[0].clientX) - parseFloat(this.data.stratValX);
        var y = parseFloat(e.touches[0].clientY) - parseFloat(this.data.stratValY);
        var distance_val,left_val1,left_val2;
        if(Math.abs(y) > Math.abs(x) && y > 0){
            //console.log('下滑'+Math.abs(y));
            distance_val = 0;
        }else if(Math.abs(y) > Math.abs(x) && y < 0){
            //console.log('上滑'+Math.abs(y));
            distance_val = -300;
        }
        this.setData({
            stratValX: e.touches[0].clientX,
            stratValY: e.touches[0].clientY,
            topVal: distance_val,
            baseVal: distance_val/10,
            baseClass: 'page-base',
        });
    },
    moveEnd:function(){
        this.setData({
                baseClass: '',
            });
    },
    onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    
  },
    tapName:function(e){
        var that = this;
        wx.setClipboardData({
            data: that.data.datatext,
            success: function(res) {
                wx.vibrateShort({
                    complete: function(res) {
                        wx.showToast({
                            title: '复制成功',
                            icon: 'success',
                            duration: 2000
                        });
                    }
                });
                console.log(res);
            }
        });
    }
})

28.滚动容器scroll-view（可以模拟页面内上拉加载，只要监听事件bindscrolltolower）

（1）横着的

<scroll-view class="scroll-box" scroll-x="true" bindscroll="scroll" scroll-left="0">
    <view class="scroll-case case-1">view>
    <view class="scroll-case case-2">view>
    <view class="scroll-case case-3">view>
scroll-view>

.scroll-box {
     
    white-space:nowrap;
    width: 750rpx;
    height: 300rpx;
}

.scroll-case {
     
    display: inline-block;
    width: 50%;
    height: 300rpx;
}

.case-1 {
     
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: #1aad19;
}

.case-2 {
     
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: #2782d7;
}

.case-3 {
     
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: #f1f1f1;
}

 

（2）竖着的

<scroll-view class="scroll-box" scroll-y="true" bindscroll="scroll" scroll-top="0">
    <view class="scroll-case case-1">view>
    <view class="scroll-case case-2">view>
    <view class="scroll-case case-3">view>
scroll-view>

.scroll-box {
     
    width: 180rpx;
    height: 300rpx;
}

.scroll-case {
     
    float: left;
    display: inline-block;
    width: 180rpx;
    height: 300rpx;
}

.case-1 {
     
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: #1aad19;
}

.case-2 {
     
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: #2782d7;
}

.case-3 {
     
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: #f1f1f1;
}

 

29.js动画：animation（2个不同动画分别执行）

（1）、wxml

<view class="section" animation="{
      {animationData1}}">

view>
<button bindtap="onShow1">动画1开始button>
<view class="section" animation="{
      {animationData2}}">

view>
<button bindtap="onShow2">动画2开始button>

（2）、wxss

.section {
     
  width: 750rpx;
  height: 200rpx;
  background-color: #123def;
}

（3）、js

Page({
  data: {
    animationData1: {},
    animationData2: {}
  },
  //动画1
  onShow1: function(){
    var animation = wx.createAnimation({
      duration: 1000,
        timingFunction: 'ease',
    })

    this.animation = animation

    animation.scale(.5,.5).rotate(45).step()

    this.setData({
      animationData1:animation.export()
    })
  },
  //动画2
  onShow2: function(){
    var animation = wx.createAnimation({
      duration: 1000,
        timingFunction: 'ease',
    })

    this.animation = animation

    animation.scale(.5,.5).step()

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

30.倒计时

（1）、wxml

<view class="common-css pay-ok" catchtap="gopay">去支付{
     {count_down}}view>

（2）、js：hastime的时间格式：2017-01-02 08:22:01

data:{
    count_down: '',
  },

onLoad:function(options){
      // 页面初始化 options为页面跳转所带来的参数
      var that = this;
      app.init(function(){
          that.page_ajax();
      });
  },

page_ajax:function(){
      var that = this;
      wx.showLoading({
        title: '加载中'
      });
      app.ajax({
          url:'/index.php?m=food&c=take&a=orderInfo',
          data:{
              id: 11
          },
          success:function(msg) {
              that.setData({
                    hastime: msg.order.addtime,
              });
              that.countDown();
              wx.hideLoading();
          }
      });
  },

countDown:function(){
      var that = this;
      if(that.data.hastime && that.data.hastime.length > 0){//需要倒计时
          var time1 = (that.data.hastime.split(' '))[0].split('-');
          var time2 = (that.data.hastime.split(' '))[1].split(':');
          var ordertime = new Date(time1[0],time1[1],time1[2],time2[0],time2[1],time2[2],0);//倒计时的毫秒值
          that.data.settime = setInterval(function(){
                var nowtime = new Date();
                var time_= parseFloat(nowtime.getTime()) - parseFloat(ordertime.getTime())-15*60*1000;//剩余时间、单位ms
                var time_have = Math.abs(time_)/1000;
                var timeM = parseInt(Math.abs(time_have)/60%60);//分钟
                var timeS = parseInt(Math.abs(time_have)%60);//秒钟
                console.log(nowtime);
                var count_down_ = '';
                if(timeM > 0){
                    count_down_ = '（还剩' + timeM + '分' + timeS + '秒）';
                }else if(timeS > 0) {
                    count_down_ = '（还剩' + timeS + '秒）';
                }else {//时间结束
                    clearInterval(that.data.settime);
                    //强制刷新
                    that.page_ajax();
                }
                that.setData({//渲染页面
                    count_down: count_down_,
                });
          },1000);
      }
  },

31.动态绑定事件（他人）

//js动态给前台绑定事件  
  
var myList = ["items1","items2","items3"]  
  
  
pageObject = {  
data:{  
        actionSheetItems:myList  
     }  
}  
  
  
for(var i = 0;i < myList.length;++i){  
    (function(itemName){  
         pageObject[itemName] = function(e){  
              //事件主体  
         }  
    })(myList[i])  
}  
  
Page(pageObject)  
  
  
//wxml  
>  
    <action-sheet hidden="false">  
        <block wx:for-items="{
      {actionSheetItems}}">  
            <action-sheet-item bindtap="{
      {item}}">{
     {item}}action-sheet-item>  
        block>  
        <action-sheet-cancel class="cancel">取消action-sheet-cancel>  
    action-sheet>  
block>  

32.弹性盒子

（1）、wxml

<view style="flex-direction:row;">
        <view class="demo-text-1" style="flex-direction:column;">
                <view class="demo-text-1-1">1view>
                <view class="demo-text-1-2">2view>
        view>
        <view class="demo-text-2">3view>
        <view class="demo-text-3">4view>
view>

（2）、wxss

view {
     
  display:flex;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.demo-text-1,
.demo-text-2,
.demo-text-3 {
     
  width: 250rpx;
  height: 300rpx;
}
.demo-text-1-1,
.demo-text-1-2 {
     
  width: 100%;
  height: 50%;
}
.demo-text-2{
     
  background-color: #2782D7;
}
.demo-text-3{
     
  background-color: #F1F1F1;
}
.demo-text-1-1 {
     
  background-color: #1AAD19;
}
.demo-text-1-2 {
     
  background-color: lightcoral;
}

33.checkbox自定义样式

（1）、单个checkbox

<checkbox-group bindchange="checkboxChange">
            <label class="common-css checkbox-bg" style="background: url({
      {checkbox_bg}}) no-repeat;background-size: 40rpx 40rpx; ">
                <checkbox class="common-css checkbox-input" value="1" />
            label>
            <view class="common-css checkbox-lable">输入不参与优惠金额（如酒水、套餐）view>
checkbox-group>

.checkbox-bg,
.checkbox-input {
     
    position: absolute;
    left: 25rpx;
    top: 50rpx;
    z-index: 5;
    width: 44rpx;
    height: 44rpx;
}
.checkbox-input {
     
    visibility: hidden;
}
.checkbox-lable {
     
    float: left;
    width: 100%;
    height: 140rpx;
    padding-left: 88rpx;
    line-height: 140rpx;
    font-size: 26rpx;
    color: #787878;
}

var chenck_ok = 'http://3n4w.oss-cn-shenzhen.aliyuncs.com/public/client-resource/images/lb_img/a_9.png';
var chenck_no = 'http://3n4w.oss-cn-shenzhen.aliyuncs.com/public/client-resource/images/lb_img/a_8.png';
data:{
      checkbox_bg: chenck_no,
},
checkboxChange: function (e) {
      var that = this;
      console.log(e.detail.value);
      if (e.detail.value.length == 0) {
          that.data.checkbox_bg = chenck_no;
      } else {
          that.data.checkbox_bg = chenck_ok;
      }
      that.setData({
          checkbox_bg: that.data.checkbox_bg,
          is_check: e.detail.value.length
      });
 },

34.查看地图的经纬度必须是数值型（如浮点类型），否则手机上无法打开，当然要授权。（注：部分手机不支持在一个小程序内获取2次地址，比如我的，此时需要在第1次时将结果存储到app.js的超全局变量中，方便以后获取）

35.转发功能

　　（1）wxml中定义转发按钮

<button class="common-css page-btn" open-type="share">邀请好友来猜button>

　　（2）js中定义事件处理

/**
     * 用户点击右上角分享
     */
    onShareAppMessage: function (res) {
        var that = this;

        if (res.from === 'button') {
            // 来自页面内转发按钮
            //console.log(res.target)
        }
        return {
            title: '帮我猜猜这是谁',
            path: '/pages/homePage/homePage?id=1232',
            success: function (res) {
                // 转发成功
                if (res.shareTickets) {
     //将转发内容至单个用户时，是无法获取到shareTicket
                    // 获取转发详细信息
                    console.log('转发成功，群');
                }else{
                    console.log('转发成功，个人');
                }
            },
            fail: function (res) {
                // 转发失败
            }
        }
    }

 （3）注意：如果要得到是发送给群或者个人，必须加：wx.showShareMenu

/**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        wx.showShareMenu({
            withShareTicket: true
        });
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        wx.showShareMenu({
            withShareTicket: true
        });
    },

 　　（4）如果要隐藏右上角分享，但是使用页面里按钮的分享功能

/**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
            wx.hideShareMenu();
            wx.updateShareMenu({
                  withShareTicket: true,
            });
      },

 

36.view宽度随时改变，但是又要整体居中（例子中的connent-answer）。

（1）、wxml

<view class="common-css connent-answer">
                <image class="common-css answer-refresh" mode="{
      {img_mode}}" src="{
      {refresh_src}}" catchtap="refreshEven">image>
                <block wx:for="{
      {array_answer}}" wx:for-item="list" wx:for-index="list_id">
                    <view class="common-css answer-case {
      {answer_err}}" data-index="{
      {list_id}}" catchtap="clearcaseEven">{
     {list.val}}view>
                block>
            view>

（2）、wxss

.connent-answer {
     
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 160rpx;
    max-width: 600rpx;
    height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.answer-case {
     
    position: relative;
    float: left;
    margin-right: 20rpx;
    width: 70rpx;
    height: 70rpx;
    background-color: #8478ff;
    border-radius: 8rpx;
    text-align: center;
    line-height: 70rpx;
    font-size: 36rpx;
    color: #fff;
    -webkit-box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
}
.connent-answer .answer-case:last-child {
     
    margin-right: 0;
}

 

转载于:https://www.cnblogs.com/taoqiboy/p/6999944.html