登录授权问题
<button bindgetuserinfo="huoquxinxi" open-type="getUserInfo">获取用户信息</button>(open-type="getUserInfo"首次登录未授权的时候)
huoquxinxi(res){
if(res.detail.rawData){
this.setData({
//把所有的信息赋值到我们在data中声明的userinfo中 这是首次登录未授权的情况下
userInfo : res.detail.userInfo
})
}
},
onLoad :function (options){
// wx.getUserInfo这是在授权完成的情况下第二次登陆 直接用我们微信的API拿到我们想要的信息
wx.getUserInfo({
success:(res) => {
this.setData({
userInfo : res.userInfo
})
},
fail: (error) => {
console.log(error)
}
})
}
超出隐藏
/* 单行超出三件套 当是text时需要把他转换成块级元素 display:block*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* 多行超出隐藏 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* 设置对其模式 */
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
ajax封装
创建一个request.js
export default (url,data={},method='GET') => {
return new Promise((resolve,reject) => {
wx.request({
url:'http://localhost:3000' + url,
data,
method,
//判断是否要用cookie来进行登录后的操作
//header:{
// cookie:wx.getStorageSync('cookies')?wx.getStorageSync('cookies').find(item => item.indexOf('***) !== -1 : '')
//},
success: (res) => {
console.log('请求成功' ,res);
//判断是否登录获取cookie
//if(data.isLogin){
// wx.setStorage({
// key:'cookies',
// data:res.cookies
// })
//}
resolve(res.data);
},
fail :(err) => {
console.log('请求失败' ,res);
reject(err);
}
})
})
}
import 上面这个js
onload: async function(options){
let result = await request ('/banner',{type:2});
consle.log('结果数据' ,result)
}
指定wx:for的item
<view wx:for='commList' wx:for-item='zidingyiItem'>
<view>{{zidingyiItem.name}}</view>
</view>
实现input框的双向绑定
<view>
//两种方式id 和自定义data-type(可以传多个值data-什么都可以)都行 但是前提是他们的名字要和我们后面data中声明的变量是一样的
//bindinput和change事件的区别是 前者这要改变就出发 后者是改变完成后失去焦点才出发
账号: <input type="text" style="border:1px solid black" id='account' data-type="account" bindinput="zhanghao"></input>
</view>
zhanghao(e){
console.log(e)
//第一种方式
// var type = e.currentTarget.id
// this.setData({
// [type]:e.detail.value
// })
//第二种方式
var type1 = e.currentTarget.dataset.type
this.setData({
[type1]:e.detail.value
})
},
存储用户信息
//存
wx.setStorageSync('userinfo',res.data.xinxi)
//取
wx.getStorageSync('userinfo')
视频播放暂停
//poster 代表我们的视频第一帧就是相当于用图片 代表视频
<video bindplay='handlePlay' poster=''></video>
handlePlay(e){
let vid = e.currentTarget.id;
this.vid != vid && this.videoContext && this.videoContext.stop();
this.vid = vid;
this.videoContext = wx.createVideoContext(vid)
}
可视高度
height:calc(100vh - 其他固定的高度)
场景值
用来判断用户是从什么地方进入小程序的(具体的场景值 https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html)
onLaunch: function (options) {
let that = this
console.log(options)
//中间省略其他代码
if(options.scene == 1089){
wx.showToast({
title: options.scene.toString(),
})
//这里写入相关业务代码
}
}
冷启动
冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况,此时小程序需要重新加载启动。
// 获取小程序更新机制兼容
if (wx.canIUse('getUpdateManager')) {
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
// 请求完新版本信息的回调
if (res.hasUpdate) {
updateManager.onUpdateReady(function () {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好,是否重启应用?',
success: function (res) {
if (res.confirm) {
// 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate()
}
}
})
})
updateManager.onUpdateFailed(function () {
// 新的版本下载失败
wx.showModal({
title: '已经有新版本了哟~',
content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~',
})
})
}
})
} else {
// 如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示
wx.showModal({
title: '提示',
content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
})
}
Compents
1.父向子传递信息
父组件中 <select tabs="{{tabs}}"></select> 在父组件的js中下的data tabs:[1,2,3,4,5,6,7,8,9]
子组件中 在子组件的js下
properties: {
tabs:{
type:Array,
value:[]
}
},
然后在子组件的wxml下 写{{tabs}}
2.子向父传递信息
在子组件中 <view><button bindtap="dianjiwo">点我啊</button></view> 来设置一个点击事件
子组件的js中
dianjiwo(){
console.log('点我啊')
//通过this.triggerEvent来传递参数 increment是我们的自定义事件 父组件用来触发
this.triggerEvent("increment",{index:0})
}
父组件中
<select bind:increment='hand' ></select>
父组件的js中
hand(e){
console.log('我是父亲我被触发了')
console.log(e.detail.index)
}