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

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

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

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

2017/11/17

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

效果如下：

代码如下：

wxml

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

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

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

</view>

页面的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 class="id-bgimg1" mode="aspectFit" src="{{imagesrc2}}"></image> //绑定了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部分

<image wx:if="{{scrollTop>200}}" src="images/imgurl4.jpg"></image>   //这个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
    })
｝

来源：CSDN

作者：AubreyLing

链接：https://blog.csdn.net/einafetsslly/article/details/78557818

标签

微信小程序开发

微信开发

scrolltop