零碎的小程序笔记

目录

template的简单使用
WXS的简单使用
npm的简单使用
倒计时js的实现
wx:for的使用
一些js方法记录
wxss记录

template的简单使用

创建一个page，在.wxml、.wxss中正常编写页面和样式代码，其中在.wxml中加入<template>标签如下：my_template.wxml

<template name="my-first-template">
  <view>{{myData}}</view>
</template>

在需要用到该模板的wxml页面，引入模板并使用

// 引用模板文件
<import src="../my_template/my_template.wxml" />
// 使用模板
<template is="my-first-template" data="{{myData}}"></template>

在对应的.wxss文件也要引入对应的模板样式文件

@import "../my_template/my_template.wxss";

WXS的简单使用

新建一个.wxs后缀的文件，编写代码，这里以一个截取字符串为案例

var subString = function(str, start, end) {
  if (str.length == 0 || str == undefined) return;
  if (start > end || str.length < end) return str;

  if (start != undefined && end != undefined) {
    return str.substring(start, end)
  }
  return str
}

// 暴露接口
module.exports.subString = subString;

在.wxml文件中使用wxs

<!-- 'tools'是在该页面使用wxs的名字，可以自定义 -->
<wxs src="../utils/substring.wxs" module="tools" />

<text>{{tools.subString("ABCDEFG")}}</text>

如果是将wxs的代码直接写在.wxml中，则要在wxs代码中就对其命名

<text>{{tools.subString("ABCDEFG")}}</text>

<wxs module="tools">
  var subString = function(str, start, end) {
    // ...
  }
  // 暴露接口
  module.exports.subString = subString;
</wxs>

npm的简单使用

以安装小程序的 MobX 绑定辅助库为例
在命令行中定位到小程序项目根目录按顺序执行以下命令

npm init -y
npm install --save mobx-miniprogram mobx-miniprogram-bindings

执行完成后根目录会生成node_modules文件夹，依赖的代码就在里面。
然后在微信开发者工具点击 工具 - 构建npm ，开发者工具会将依赖构建到miniprogram_npm文件夹，这样就可以使用相关的模块了。
使用git管理时可以不必上传miniprogram_npm和node_modules文件夹内的文件，只需在下载项目后执行npm install再构建npm即可。

倒计时js的实现

传入毫秒开始倒计时，如传入 10*1000 == 10000ms 即为10秒倒计时

// utils.js
const countDown = function(time) {
  let day = parseInt(time / 1000 / 60 / 60 / 60 / 24);
  let hour = parseInt(time / 1000 / 60 / 60 / 60 % 24);
  let minute = parseInt(time / 1000 / 60 % 60);
  let second = parseInt(time / 1000 % 60);

  var timeMap = {
    day: timeFormat(day),
    hour: timeFormat(hour),
    minute: timeFormat(minute),
    second: timeFormat(second)
  }

  return timeMap
}

// //小于10的格式化函数（2变成02）
function timeFormat(param) {
  return param < 10 ? '0' + param : param;
}

在页面js中的使用方法

  data: {
    totalTime: 10 * 1000, // 10秒倒计时
    timer: '', // 定时器
    hours: '',
    minute: '',
    second: ''
  },

countDown: function() {
    if (this.data.totalTime >= 0) {
      let map = utils.countDown(this.data.totalTime)
      this.setData({
        hour: map.hour,
        minute: map.minute,
        second: map.second
      })
      this.data.totalTime = this.data.totalTime - 1000
      this.data.timer = setTimeout(this.countDown, 1000);
    } else{
      // 时间到的处理
    }
  },
// 退出该页面时要取消定时器，否则还会继续倒计时
 onUnload: function() {
    clearTimeout(this.data.timer)
  },

wx:for的使用

<!-- 循环list数组，wx:for-item是对数组内对象重命名，不加默认为item-->
<!-- 循环list数组，wx:for-index是对数组内下标重命名，不加默认为index-->
<block wx:for="{{list}}" wx:for-item="newName" wx:for-index="newIndex">
  <text>{{newName.text}}</text>
  <text>{{list[newIndex].text}}</text>
</block>

一些js的方法记录

// 获取路径中的文件名
// eg. var str = 'a/b/c.jpg'
// basename(str)  返回 c.jpg
function basename(str) {
  var idx = str.lastIndexOf('/')
  idx = idx > -1 ? idx : str.lastIndexOf('\\')
  if (idx < 0) {
    return str
  }
  return str.substring(idx + 1);
}
// 返回路径中的文件名，不带后缀
// eg. var str = 'a/b/c.jpg'
// splitFileName(str)  返回c
function splitFileName(text) {
  var pattern = /\.{1}[a-z]{1,}$/;
  if (pattern.exec(text) !== null) {
    return (text.slice(0, pattern.exec(text).index));
  } else {
    return text;
  }
}

// string转map
var str = '{"name":"张三","age":"16"}'
var map = JSON.parse(str)
// 向数组增加元素
var myList = [1,3,5]
myList.push(7) // [1,3,5,7]  添加到数组末尾
myList.unshift(4) // [4,1,3,5,7]  添加到第0个位置
myList.splice(2,1) // [4,1,5,7]  删除数组下标第2个元素
// myList.splice(a,b)  从数组下标为a的元素开始(包括a)删除b个元素

wxss记录

  flex-grow: 0; /* 放大比例，0是不放大*/
  flex-shrink: 0; /* 缩小比例,0是不缩小 */
  box-shadow: 0rpx 0rpx 5rpx 5rpx #d3d3d3; /* 水平位移、垂直位移、模糊程度、阴影半径、颜色*/