微信小程序常用代码块 —— 特别专题

Tips:这里整合微信小程序中常用的代码块

当前代码适用于 2.7.7版本的调试基本库

一、常见小功能
1.1 获取当前 10 位数字的时间戳
  var timestamps = Date.parse(new Date());
  var timestamp = parseInt(timestamps / 1000);
1.2 页面跳转自动刷新

将方法体放进 onShow() 中调用即可

二、wxss样式
1. 和顶部,左边,右边有间距
margin-top: xxrpx; /*外边距*/
padding-top: xrpx;/*内边距*/

margin-left: xx;
margin-right: xx;

/*如果是一列元素,把他变成横向的,可以使用如下*/
padding-top:20rpx;
2. 一顺着排列的元素,禁止换行
white-space:nowrap;
/* display 样式也要进行更换*/
display: inline-block;

/*flex 布局 允许换行*/
flex-wrap: warp;
3. 文字布局
/*文字位置*/
text-align: center; /* left,right*/

/*如果一行文字溢出,就要使多出去的文字变成省略号*/
  text-overflow: ellipsis;
  overflow: hidden;
4. 垂直布局

常常和两者一起使用

display:flex;
justify-content:flex-start;

align-items: center;
5. 设置内变距
padding : 1px solid #e4e4e4
/*设置上下左右内边距*/
padding : 30rpx 30rpx;
6.设置行高
line-heigth: 50rpx;
7.设置分割线
  border-bottom: 1px solid #e4e4e4;
8. 居中布局的一种方式
margin: 0 auto;
9. 垂直居中
三、微信官方 API

3.1 普通接口

3.1.1 修改当前界面的标题
 wx.setNavigationBarTitle({
      title: "",
    })
3.1.2 加载响应,。。。

手把手带你学习微信小程序 —— (微信小程序常用代码块)_数据

    wx.showLoading({
      title: '正在发表中。。。。',
    })


// 一般某个任务执行完之后,就要把加载隐藏
 wx.hideLoading();
3.1.3 界面跳转
//跳转到某一个页面
    wx.navigateTo({
      url: '',
    })
//回到上一页
   wx.navigateBack({});
3.1.4 自动跳转到页面的首行(在onShow中执行)
    wx.pageScrollTo({
      scrollTop: 0,
    })
3.1.5 自定义组件,数据渲染出现问题
observer(newVal, oldVal, changedPath) {
// 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange'
// 通常 newVal 就是新设置的数据, oldVal 是旧数据
}
3.1.6 延时函数

延时 1000 ms,即1s

     setTimeout(()=>{
        //方法体
      },1000);
3.1.7 某一任务执行成功,即显示相对应的文字

手把手带你学习微信小程序 —— (微信小程序常用代码块)_延时函数_02

    wx.showToast({
            title: '发送成功',
          });

3.2 云开发接口

3.2.1 操作云函数数据库

在 index.js 中的 Page 之前加入全局变量

const db = wx.cloud.database();
Page({

 nonono : function()
{
	db.collection("云函数你创建集合的名称").bulabula
	//这里就是对云数据库的集合相关操作了
	},
})
3.2.2 完成微信授权的功能

在 app.js 中写好相对应的 授权功能函数,
eg:

//获取用户授权
  loadUserInfo:function(){
    const that = this;
    wx.getSetting({
      success: res =>{
        const isUserInfo = res.authSetting['scope.userInfo'];
        if(isUserInfo){
          wx.getUserInfo({
            success:res => {
              console.log(res);
              const userInfo = res.userInfo;
              that.globalData.userInfo = userInfo;
            }
          })
        }
      }
    })
  },

然后回到 index.js 中,还是和上面一样,在Page 前面

// 获取 app.js 中手机的相关信息
const app = getApp();

//然后后面就可以直接通过 app 调用 app.js中写下的方法,这是一个获取个人姓名的接口实现
const author = app.globalData.userInfo;
四、wx:key 解决方案

wx:key 是为了提高循环效率而出现了,给它的值,只要是循环元素中的唯一的标识符就可以了

1. 字符串类型的循环
wx:key="{{this}}"
五、常用代码块梳理

5.1 获取手机的设备信息

同步获取手机信息
在 index.js 下实现

  onLoad: function (options) {
    this.initImageSize()
  },
    initImageSize:function(){
      const windowWidth =  wx.getSystemInfoSync().windowWidth;//获取手机的宽度
      console.log(windowWidth)
    },

5.2 延时函数

延时 0.8 秒,以毫秒为单位

     setTimeout(function(){
          
          },800)
六、特殊组件的实现

6.1 在当前界面实现一个按钮组件

先看图
手把手带你学习微信小程序 —— (微信小程序常用代码块)_微信_03
index.wxml

  <!-- 发布按钮布局-->

  <view class="write-weibo-btn" hover-class="none" hover-stop-propagation="false">
      <view>+</view>
  </view>

index.wxss

.write-weibo-btn{
    position:fixed;
    right:50rpx;
    bottom:100rpx;
    width:100rpx;
    height:100rpx;
    background:#74c1e0;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:100rpx;
    color:#fff;
    box-shadow: 0 0 5px #rgba(0,0,0,0,5);
}

.write-weibo-btn view{
    margin-top:-16rpx;
}