微信小程序开发（技术篇）

技术篇，有些是我自己学的，有些是我们公司的全栈大神教的，还有些就是各种百度的。

会持续更新，每天写一点。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2017/11/17

1、表单控件需要用户填写信息，点击提交，当信息为空时，顶部跳出提示，侧边出现警告图标。

效果如下：

代码如下：

wxml

1、首先在顶部加入条件渲染的组件，用的样式是引入的weui的，渲染条件是showTopTips为true是显示，显示的内容是{{warn_text}}。

{{warn_text}}

2、在组件后插入需要条件渲染的警告图标，外面用套起来。样式同样是weui的，渲染条件是is_warn1为true。

（注意：姓名栏的警示图标的渲染条件是is_warn1，身份证栏的警示图标的渲染条件是is_warn2，每一栏都不同）

   

页面的js

3、在当前页面的js的data里加入参与页面渲染的数据，设置为false，初始状态，顶部的提示框是不显示的。

data: {

    showTopTips: false

}

4、编写提交按钮的函数以及顶部提示框的函数

//点击提交按钮调用的函数
formSubmit: function (e){
  var that = this
  var idInfo = console.log(e);  //格式化数据
  if(e.detail.value.true_name.length == 0){        //判断用户是否填了内容
    that.showTopTips('请输入您的真实姓名');    //如果没有填，则调用showTopTips函数，并传递参数“请输入您的真实姓名”
    that.setData({ is_warn1: true })                  //同时，设置is_warn1的值为true，使警告图标被渲染显示
    return false;                                               //返回false阻止代码往下执行
    } else {                                                        //如果用户填了内容
    that.setData({ is_warn1: false }) ;              //则设置is_warn1的值为false，使警告图标不被渲染显示
    var true_name = e.detail.value.true_name; } //同时申明变量true_name并赋值
  //原理同上
  if (e.detail.value.idcard.length == 0) {  
    that.showTopTips('请输入您的身份证号码');
    that.setData({ is_warn2: true })
    return false;
  } else if (e.detail.value.idcard.length != 15 && e.detail.value.idcard.length != 18){           //这里简单判断了下身份证位数，如果不是15位也不是18位，则输入不正确
    that.showTopTips('请输入正确的身份证号码');
    that.setData({ is_warn2: true })
    return false;
  } else  {
    that.setData({ is_warn2: false })
    var idcard = e.detail.value.idcard
  }
},

//showTopTips函数，参数msg，上面写了

  showTopTips: function (msg) {

    var that = this;

    console.log(msg);

    this.setData({

      showTopTips: true,             //当调用这个函数时，就把showTopTips渲染条件的值设置为true，使显示顶部的红色提示

      warn_text: msg

    });

    setTimeout(function () {       //设置了定时器，3秒后不显示顶部的红色提示框

      that.setData({

        showTopTips: false

      });

    }, 3000);

  }

====================================================================================================================================

2017/11/17

2、数据提交后存储并显示数据：比如用户填写了身份证号码，提交退出页面后，下次进能看到上次填的号码

效果如下：这是再次进入页面后显示的

使用wx.setStorageSync(KEY,DATA) API实现

wxml：

          //绑定了image的src为{{imagesrc2}}

页面js文件：

data: {

    imagesrc2:"images/background.jpg"               //先给图片一个路径，此为默认显示的图片，也可以为空

  }

  chooseImage2: function () {                              //可以随便写个button，绑上这个事件函数，这个函数写完后，如果用户选择了他手机系统相册的照片，

                                                                           //那个照片就是替换掉原来我们默认的照片，但是下次进入页面还是会显示我们默认的照片

    var that = this

    wx.chooseImage({                                            //用微信的选择图片API，调用系统相册和相机

      success: function (res) {                                //如果调用系统相册/相机成功

        var tempFilePaths =res.tempFilePaths        //申明一个变量，赋值为调用成功返回的结果里图片的临时路径

        wx.uploadFile({                                             //下面这个是上传图片到服务器的API

          url: '后端给的接口',

          filePath: tempFilePaths[0],

          name: 'photo2',

          success: function (res) {

            console.log(res)

            console.log("连接服务器成功！")

          },

          fail: function () {

            consolo.log("连接服务器失败！")

          }

        })

        wx.saveFile({                                                 //保存图片到微信上

          tempFilePath: tempFilePaths[0],                 //取数组的第一个

          success: function (res) {                              //保存成功是的回调函数

            var savedFilePath =res.savedFilePath       //申明一个变量并赋值

           that.setData({imagesrc2:savedFilePath}) //给数据赋值

          }

        })

      }

    })

  }

所以，当点击提交按钮时，我们需要把这个照片存起来

formSubmit: function (e){

  wx.setStorageSync('imagesrc2',that.data.imagesrc2);

}

最后在页面的onload生命周期函数里再把存起来的数据取出来用：

onLoad: function (options){

    varimagesrc2 = wx.getStorageSync('imagesrc2');

    this.setData({

      imagesrc2: imagesrc2

    })

}

====================================================================================================================================

2017/12/20

今天在做一个企业微官网的小程序，首页想要实现按需加载的视觉效果（滚动条拖动到哪，那儿的元素动态地出现在页面里）。

试了下scroll-view组件的bindScroll方法，设置了总高度了，但是不知道为什么监听不到scrollTop的值，有知道的，可以评论告诉我哦，非常感谢！

后来时用了页面的生命周期函数onPageScroll写的。

1、方法一

错误的思路：将渲染层需要实现按需加载动态出现的元素的id设置为变量，页面js文件中初始值为空。然后在onPageScroll函数里判断res.scrollTop的值是否大于某个数，后动态地改变id的值。

发现：虽然能成功赋值，但是渲染层里面的id值始终为空。

结果：失败

2、方法二

正确的思路：将渲染层需要实现按需加载动态出现的元素设置为条件渲染，直接判断scrollTop的值是否大于某个数，大于则动态显示，小于则不现实。

结果：成功

源代码如下：

wxml部分

   //这个200需要按照实际需求写

wxss部分

@keyframes slideInFromLeft {
  0% {left: -1000rpx;}
  100% {left: 0;}
}                             //图片从左往右滑入页面的动画

image {
  height: 370rpx;
  margin-bottom: 40rpx;
  width: 100%;
  position: relative;
  animation: slideInFromLeft 4s ease-in-out forwards;  //调用上面的动画
}

js部分

onPageScroll:function(res){
    console.log(res.scrollTop);  //后台打印出来看看滚动条距离顶部的高度
    this.setData({
      scrollTop: res.scrollTop
    })
｝