目录
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; /* 水平位移、垂直位移、模糊程度、阴影半径、颜色*/
