2018-04-13
默认标题
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "麦乐有品",
"navigationBarTextStyle": "black"
},
普通页面跳
例子：
wxml页面
<view bindtap="hearing" class='hearing'>
<text>听力</text>
</view>
js页面方法
hearing: function () {
wx.navigateTo({
rl: '../hearing/hearing' url后面可以传递参数 ？参数名 = 参数值
})
}
js页面数组的生成 arr : [键 值 ，也可以直接写值]
监听页面加载函数
声明关联数组
let product = [{
'product_id': product_id,
'count': count
}];
onLoad：function（options）{
获取别的页面传递过来的参数
var id = opitons.id
控制台输出
console.log(id)
数据赋值给页面
this.setData({
id:options.id
})
}
用户点击view 传值给控制台进行判断
wxml 页面
<view wx:for="{{arr}}" wx:for-item="item">
<view data-value="{{item}}" bindtap="value" class='text' >{{item}}</view>
</view>
for循环数组arr，循环一次的值wx:for-item="item" 把值的名字设成item随便
在循环中的标签中设置data-XX="XXX"，设置点击函数或其他函数（这里设置bindtap='value'）
js文件中的函数如下：
value: function (event) {
这里获取的值应该是value的值而不是item，因为data-value="{{item}}"已经将循环出来的值item赋值给value了
var value = event.currentTarget.dataset.value;
console.log(value);
}
判断：1.必须按照顺序第几次是几必须是几
第一步生成一个变量nowValue = 1
因为第一个输入的数字必须是1所以可以以此来进行判断
1.1在获取传值的方法中获取newValue的值
var nowValue = this.data.nowValue
进行判断：
if (value === nowValue) { //value是用户点击传进来的值如果=1,则value+1
nowValue++;
this.setData({ //然后吧nowValue在重新赋值给它自己这样nowValue就变成了
//2在重复上一步进行判断，如
nowValue: nowValue //果用户传进来的值不是2,这个判断语句肯定无法继续运行，直到
//nowValue的值跟这个数组的最大数相同时跳出循环结束计时
});
2018-4-18
数组的生成：在onLoad方法中使用for循环
var arr = []
for(var i = 0;i <= max ; i++){
arr.push(i)
}
数组的随机打乱
方法一 低效率. function random(arr)
{
var i = arr.length; //获取数组arr的长度并且赋值给i
while (i) {
var j = Math.floor(Math.random() * i--); //Math.floor小数一律舍去，仅保留整数 通过Math.random()
[arr[j], arr[i]] = [arr[i], arr[j]]; // 产生的小数*数组的长度 取整，然后数值进行换位
}
return arr
}
random(arr)
方法二 高效率. array.sort(function (a, b) {
console.log(Math.random(), a, b, array);
return Math.random() > .5 ? -1 : 1;
});
动态改变微信小程序的题目 tabbar
var that = this;
that.setData({
mername: options.Title+'x'+Title //options为页面路由过程中传递的参数
})
wx.setNavigationBarTitle ({
title: that.data.mername //页面标题为路由参数
})
将别的页面传过来的出数字赋值给一个变量 例：
var width = parseInt(options.width);
获取当前时间戳 ：
var timestamp = Date.parse(new Date());
timestamp = timestamp; //当前时间戳
var n = timestamp;
var date = new Date(n);
var Y = date.getFullYear(); //年
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1); //月
var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); //日
var h = date.getHours(); //时
var m = date.getMinutes(); //分
var s = date.getSeconds(); //秒
console.log("当前时间" + ":" + m + "分" + s + '秒');
对象进行赋值 ：
data{
wArr ： {}
}
if (value === nowValue) { // 当value === nowValue时
this.data.wArr[nowValue] = true; //将nowValue赋值给对象wArr 给对象赋值和给数组赋值不同的作用，
nowValue++; //对象可以不用给距下标进行选取，比如判断改变某标签的背景颜色，可
//以指哪打哪，而数组因为下标的原因如果if判断是正确的，将会从第一个开始变色，对象就可以解决这个问题
var obj = {};
obj['wArr'] = this.data.wArr;
obj['nowValue'] = nowValue;
this.setData(obj);
}
wxml页面：
<view data-value="{{item}}" bindtap="value" class='view' style="background:{{wArr[item]? 'black' : ''}};width:
{{widths}}%;height:{{heights}}px;color:{{wArr[item]? 'white' : ''}}" >{{item}}</view>
<view bindtap='modalcnt'></view>
data-value进行赋值，在js页面使用value传递过去的值，获取方法
value: function (event) {
var value = event.currentTarget.dataset.value;
}
dindtap 绑定value方法 style行内样式background当wArr的值==用户点击的数值的时候view标签变色black
whidth 使用别的页面传递过来的数值进行动态的改变标签大小。字体颜色color跟背景色类似,判断正确时进行改变颜色
2018-4-20
动态的修改标签的颜色：
当通过if判断判断条件正确时可以同个三木运算方法进行改变：
wxml页面
<view data-value="{{item}}" bindtap="value" class='view' style="background:{{wArr[item]? '#165a2d' : ''}}
;width:{{widths}}%;height:{{heights}}%;color:{{wArr[item]? 'white' : ''}};
box-shadow: {{wArr[item]? '0 0 ,0 -5px #03350c inset' : ''}} ; " >{{item}}
</view>
js页面通过帮定的value方法进行判断动态的改变标签的一些属性个和样式判断方法跟18号笔记相似，当用户点击的传的值 === 我们需要的值的时候进行改变
if (value === nowValue) { 当value === nowValue时
this.data.wArr[nowValue] = true; 将nowValue赋值给对象wArr 给对象赋值和给数组赋值不同的作用，
nowValue++;
var obj = {};
obj['wArr'] = this.data.wArr;
obj['nowValue'] = nowValue;
this.setData(obj);
}
点击播放音效因为项目的原因都是基于上面的if判断进行改变的样式属性和播放一些音效：
const innerAudioContext = wx.createInnerAudioContext()
innerAudioContext.autoplay = true
innerAudioContext.src = 'http://ws.
innerAudioContext.onPlay(() => { onPlay 音乐播放事件
console.log('开始播放')
})
innerAudioContext.onError((res) => { onError 音乐播放错误事件
console.log(res.errMsg)
console.log(res.errCode)
})
动态的改变小程序的页面标题：
需要使用到上一级页面跳转带来的参数
wx.redirectTo
({
url: '../gd/gd?id=16&height=23&width=23&Title=4',
})
这次改变页面标题用到了传过来的Title值
var title = parseInt(options.Title);
var that = this; //必写，在后面的方法中不能使用this
that.setData({
mername: options.Title+'x'+Title //options为页面路由过程中传递的参数 4 x 4
})
wx.setNavigationBarTitle({
title: that.data.mername //页面标题为路由参数
})
2018-4-22
验证手机号合法的方式
//判断是否是手机号码的方法
function IsTel(s){
if(s!=null) {
var length = s.length;
if(length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1})|)+\d{8})$/.test(s) )
{
return true;
}else{
return false;
}
}
}
2018-4-27
跳转到上一级页面并且执行onLoad方法
confirm: function () {
var pages = getCurrentPages();// 当前页面
var beforePage = pages[pages.length - 2];// 前一个页面
wx.navigateBack({
success: function () {
beforePage.onLoad(); // 执行前一个页面的onLoad方法
}
})
}
2018-5-16
重新加载页面
可以把你需要的参数方法全部封装到一个函数中重新加载时调用即可例：
start: function (max) {
var myDate = new Date();
var m = myDate.getMinutes(); //获取当前分钟数(0-59)
var s = myDate.getSeconds(); //获取当前秒数(0-59)
var ms = myDate.getMilliseconds(); //获取当前毫秒数(0-999)
var arr = [];
for (var i = 1; i <= max; i++) {
arr.push(i);
}
function random(arr) {
var i = arr.length; //获取数组arr的长度并且赋值给i
while (i) {
var j = Math.floor(Math.random() * i--); //Math.floor 一律舍去，仅保留整数 通过Math.ran
[arr[j], arr[i]] = [arr[i], arr[j]]; // dom()产生的小数*数组的长度 取整，然后数值进行换位
}
return arr
}
random(arr)
this.setData({
array: arr,
stm: m,
sts: s,
mss: ms,
wArr: {},
nowValue: 1,
});
}
index: function (options) {
var max = this.data.max;
this.start(max);
}
2018-5-22
input 站位符样式
<view>28+
<input placeholder-class="phcolor" class="input-text" name="username" placeholder="测试placeholder" />
</view>
.phcolor{
color: #18acff;
}
2018-5-24
data-*取值 target和currentTarget的区别
e.target是返回触发事件的对象 e.currentTarget返回的是绑定事件的对象。
通常情况下target和currentTarget是一致的，我们只要使用target即可，但有一种情况必须区分这两者的关系，那就是在父子嵌套的关系中，父元素绑定了事件，单击了子元素（根据事件流，在不阻止事件流的前提下他会传递至父元素，导致父元素的事件处理函数执行），这时候currentTarget指向的是父元素，因为他是绑定事件的对象，而target指向了子元素，因为他是触发事件的那个具体对象 。
第一种情况，点击的是子元素而事件是写在父元素中，所以也就没有返回想要的那个target，点击子元素想要获取data-*必须要使用e.currentTarget事件才能获取想要的值。
第二种情况中，可能恰巧触发这个事件的就是含有data-name的这个text标签，所以也就返回了想看到的那个target
2018-5-28
客户端数据缓存
在confing页面声明缓存的前缀
例：storage_key_history: 'history',
在进入电视或电影时写缓存方法写在获取完电影和电视信息的方法中最合适书写方式
首先声明书写缓存的对象
var obj = {};
声明缓存中需要写入的值
obj['m' + id] = {
type: 'm',
id: res.data.id,
title: res.data.title,
cover: res.data.cover,
views: res.data.views,
time: new Date()
};
```然后使用小程序自带的api：
wx.setStorage进行书写
使用wx.getStorage进行读取缓存
wx.getStorage({
//缓存缓存
key: config.storage_key_history,
success: function (res) {
// 读到时候进行写操作
wx.setStorage({
key: config.storage_key_history,
data: { ...obj, ...res.data },
})
},
//首次观看，没有读到时进行书写操作
fail: function () {
// write 写操作
wx.setStorage({
key: config.storage_key_history,
data: obj,
})
}
})
实时记录视频播放进度需要使用video组件的bindtimeupdate方法
<video bindtimeupdate='videoTimeUpdate' ></video>
videoTimeUpdate: function (e) {
myVideoProgress = e.detail;
myVideoProgress['current'] = this.data.current;
myVideoProgress['currentId'] = this.data.currentId;
myVideoProgress['url'] = this.data.url;
}
使用realTimeRecord方法进行实时记录
realTimeRecord: function () {
var id = this.data.id;
var key = 'progress_v_' + id;
wx.setStorage({
key: key,
data: myVideoProgress,
})
}
分别在onHide页面隐藏 ，onUnload页面卸载方法中引入realTimeRecord方法使用户在隐藏页面跟推出页面时记录播放进度
加入某个电影或电视剧已经有缓存了需要在进入该视频页面是读取视频的实时记录
getRealTimeRecord: function () {
var id = this.data.id;
var key = 'progress_v_' + id;
return wx.getStorageSync(key)
}
将该方法引入到onload的方法中
如果该电视剧没有缓存则默认播放第一级,此方法需要写在获取电视基本信息的方法中
js页面数组的生成 arr : [键 值 ，也可以直接写值]
监听页面加载函数
onLoad：function（options）{
实例化某对象
var id = opitons.id
控制台输出
console.log(id)
获取别的页面传递过来的参数
this.setData({
id:options.id
})
function initData(that) {
var id = that.data.id;
var title = that.data.title;
var cover = that.data.cover;
//集数
app.request({
url: '/xlTvSubs/' + id,
method: 'GET',
success: function (res) {
if (res.statusCode !== 200) {
return;
}
var datas = res.data;
that.setData({
tvSubs: datas
})
// 在哪到基本信息之后缓存判断，没有则点击第一集
var cacheSub = that.getRealTimeRecord();
if (!cacheSub) {
var first = datas[0];
var e = {
target:
{
dataset: {
id: first.id,
url: first.url,
current: 1
}
}
};
//播放第一集
that.playCurrent(e);
}
}
})
}
播放当前集数的方法
playCurrent: function (e) {
//播放视频需要的参数
var url = e.target.dataset.url;
var currentId = e.target.dataset.id;
var current = e.target.dataset.current;
this.setData({
url: url,
current: current,
currentId: currentId,
//指定视频初始播放位置
currentTime: 0,
autoPlay: true,
//指定视频是否自动播放
})
}
2018-8-8
将获取到的时间戳转换成Y-m-s样式
res.data.data.map(function(cv) {
cv['created_time'] = util.formatTime(new Date(cv['created_time'] * 1000))
return cv;
});
var xlzyIntegral = res.data;
for (var i in xlzyIntegral) {
xlzyIntegral[i].created_time = util.formatDate(new Date(xlzyIntegral[i].created_time));
}
that.setData({
xlzyIntegral: xlzyIntegral
})
2018-10-27
将时间转化成时间戳
$data = Date.parse(new Date(需要转换的时间例：2018-10-25)) / 1000;
2018-12-02
循环根据条件删除数组中的元素
$arr2 = array(1,3, 5,7,8);
foreach ($arr2 as $key=>$value)
{ if ($value === 3)
unset($arr2[$key]);
}
2019-1-28
获取对象长度
var titles = res.data.data.titles;
var length = Object.keys(titles).length;
2019-2-16
回调函数
2019-3-3
微信小程序 弹窗时页面禁止滚动
在弹出的标签中写入catchtouchmove='true'事件
<view wx:if='{{searchMask}}' class='mask-view' catchtouchmove='true'></view>
2019-4-12
快速生成数组的方法
Array.from({ length: 15 }) 生成一个长度为15的数组；
map 对数组进行过滤
修改数组的值
(v, k) => { return '第' + (k + 1) + '颗' }
完整的:生成一个长度为15的数组，数组的值等与数组的k
let array = Array.from({length: 15 }).map((v, k) => { return k })
2019-4-18
随机数的生成
Math.random()
生成0~1（不包括1包括0）的随机小数
Math.random() * 5 限制取值范围0~5（不包括5）的随机数
Math.floor(x)对一个数进行下取整。
Math.round(x)四舍五入取整。
完整句子
Math.floor(Math.random()*50) 生成0～50（不包含50的向下取整的随机数）。
Math.round(Math.random()*50) 生成0～50（不包含50的四舍五入的随机数）。
2019-5-08
判断对象是否为空
es6语法
var a = {};
if(Object.keys(a).length==0){
console.log('空对象')
}else{
console.log('非空对象')
}
2019-5-22
分页加载获取当前页起始值的公式
起->(nowPage -1 ) * pageSize +1;
尾->nowPage * pageSize;
双层分页加载事例
/**
* 上一页点击事件
*/
previous: function() {
var nowPage = this.data.nowPage;
nowPage = Math.floor((nowPage - 1) / 10) - 1;
nowPage = nowPage * 10 + 1;
this.setData({
nowPage,
experiment: [],
})
getExperiment(this)
}
2019-5-31
小程序 小数转换成整数
向下取整
parseInt(11.2) = 11;
2019.7.17
小程序判断某值是否在某数组中
indexOf(searchvalue,fromindex);两个参数，方法可返回某个指定的字符串值在数组中首次出现的位置。
- searchvalue 必需。规定需检索的字符串值。
- fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
列:
// 从缓存中取值
var usageCount = wx.getStorageSync(config.cache_frequency_request + data.module);
// 判断该问题在缓存中的下标
var subscript = usageCount.indexOf(data.id);
// 小于0则说明没有请求加减积分
if (subscript < 0) {
console.log('====>不在该数组中')
}else {
console.log('====>在该数组中')
}
2020-4-29
判断数组中是否存在某值不存在则添加
if (settlementId.indexOf(值) == -1) {
settlementId.push(值);
}
删除数组中的某个元素
arr.pop(); //删除数组最后一个值，返回删除的元素，数组为空返回undefined；改变原数组
arr.shift(); //删除数组第一个值，返回删除的元素，数组为空返回undefined；改变原数组
arr.splice(index, 1); //删除指定元素（一般与indexOf一起用），index为索引，1----删除一个
2020-12-23
微信小程序中需要用到数组的操作，push和concat二者功能很相像，但有两点区别。
分页是可以使用
先看如下例子：
注意concat的写法 不能直接 arr.concat(arr);这样赋不上值， 需要arr = arr.concat(arr);
<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">var arr = [];
arr.push(1);
arr.push(2);
arr.push([3, 4])
arr.push(5, 6);
arr = arr.concat(7);
arr = arr.concat([8, 9]);
arr = arr.concat(10, 11); for(var i in arr){
console.log(i+"-----"+arr[i]);
}</pre>
打印结果如下：
index.js [sm]:180 0-----1
index.js [sm]:180 1-----2
index.js [sm]:180 2-----3,4
index.js [sm]:180 3-----5
index.js [sm]:180 4-----6
index.js [sm]:180 5-----7
index.js [sm]:180 6-----8
index.js [sm]:180 7-----9
index.js [sm]:180 8-----10
index.js [sm]:180 9-----11
**区别：**
push 遇到数组参数时，把整个数组参数作为一个元素；而 concat 则是拆开数组参数，一个元素一个元素地加进去。
push 直接改变当前数组；concat 不改变当前数组。
2021-2-25
下拉刷新需要再页面.json文件中配置
{
"enablePullDownRefresh": true，
"backgroundTextStyle": "dark" // 三个点样式
}
// 结束下拉刷新
wx.stopPullDownRefresh()
2021-2-27
对上一个页面的数据进行赋值
let pages = getCurrentPages(),// 当前页面
// 对上一个页面数据进行赋值
beforePage = pages[pages.length - 2]; // 获取上一个页面
beforePage .setData({
tab_cur: 3
})
wx.navigateBack({
delta: 1,
success: function () {
beforePage.accountData(); // 执行前一个页面的accountData方法
}
})
