2018-04-13
普通页面跳
例子：
wxml页面
听力
js页面方法
hearing: function () {
wx.navigateTo({
rl: '../hearing/hearing' url后面可以传递参数 ？参数名 = 参数值
})
}
js页面数组的生成 arr : [键 值 ，也可以直接写值]
监听页面加载函数
onLoad：function（options）{
实例化某对象
var id = opitons.id
控制台输出
console.log(id)
获取别的页面传递过来的参数
this.setData({
id:options.id
})
}
用户点击view 传值给控制台进行判断
wxml 页面
{{item}}
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)
动态改变微信小程序的题目 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页面：
{{item}}
dindtap 绑定value方法 style行内样式background当wArr的值==用户点击的数值的时候view标签变色black
whidth 使用别的页面传递过来的数值进行动态的改变标签大小。字体颜色color跟背景色类似,判断正确时进行改变颜色
2018-4-20
动态的修改标签的颜色：
当通过if判断判断条件正确时可以同个三木运算方法进行改变：
wxml页面
{{item}}
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 站位符样式
28+
.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方法
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的方法中
如果该电视剧没有缓存则默认播放第一级,此方法需要写在获取电视基本信息的方法中
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,
//指定视频是否自动播放
})
}