1、新建一个页面demo13
2、打开demo13.wxml 文件，删除里面原来的内容，写入以下代码：
<button>默认按钮</button>
保存，左侧小程序页面显示“默认按钮”
3、打开demo13.wxml 文件，代码中加入type属性，如下：
<button type="primary">primary 按钮</button><button type="warn">warn 按钮</button>
保存后，页面中出现绿色按钮（primary），红色按钮（warn）。
4、打开demo13.wxml 文件，代码中加入plain属性，如下：
<button type="warn" plain>plain 按钮</button>保存后，可看到plain按钮是无背景色的。
5、打开demo13.wxml 文件，type属性下，代码中再加入loading属性，如下：
<button type="primary" loading>loading 按钮</button>。
<button bindtap="powerDrawer" type="primary" size="mini" style="width: 55%" data-statu="open">中奖记录</button>
<!-- 中间名单d窗 -->
<view class="drawer_div">
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
<view animation="{{animationPrize}}" class="drawer_box" wx:if="{{showModalStatus}}">
<view class="drawer_title">
中奖记录
<image src="../img/x@2x.png" bindtap="powerDrawer" data-statu="close"></image>
</view>
<view class="drawer_content">
<view class="top grid">
<text>
名称：啦啦啦啦啦啦啦啦
</text>
<text>
时间：2020-02-20
</text>
</view>
<view class="top grid">
<text>
名称：啦啦啦啦啦啦啦啦
</text>
<text>
时间：2020-02-20
</text>
</view>
</view>
</view>
</view>
.drawer_screen {
width: 100%
height: 100%
position: fixed
top: 0
left: 0
z-index: 1000
background: #000
opacity: 0.5
overflow: hidden
}
/*content*/
.drawer_box {
width: 650rpx
overflow: hidden
position: fixed
top: 50%
left: 0
z-index: 1001
background: #FAFAFA
margin: -150px 50rpx 0 50rpx
border-radius: 3px
}
.drawer_title{
padding:30rpx 20rpx
font-size: 36rpx
text-align: center
position: relative
}
.drawer_title image{
display: inline-block
width: 30rpx
height: 30rpx
position: absolute
right: 9px
top: 10px
}
.drawer_content {
height: 210px
overflow-y: scroll /*超出父盒子高度可滚动*/
padding: 0 20rpx
}
.top{
display: flex
justify-content: space-between
border-bottom: 1px dashed #ccc
}
.top text{
display: inline-block
height: 60rpx
line-height: 20rpx
}
data: {
animationPrize: {},
}
powerDrawer: function (e) {
// console.log(e)
let currentStatu = e.currentTarget.dataset.statu
this.util(currentStatu)
},
util: function (currentStatu) {
/* 动画部分 */
// 第1步：创建动画实例
var animation = wx.createAnimation({
duration: 200, //动画时长
timingFunction: "linear", //线性
delay: 0 //0则不延迟
})
// 第2步：这个动画实例赋给当前的动画实例
this.animation = animation
// 第3步：执行第一组动画
animation.opacity(0).rotateX(-100).step()
// 第4步：导出动画对象赋给数据对象储存
this.setData({
animationPrize: animation.export()
})
// 第5步：设置定时器到指定时候后，执行第二组动画
setTimeout(function () {
// 执行第二组动画
animation.opacity(1).rotateX(0).step()
// 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象
this.setData({
animationPrize: animation
})
//关闭
if (currentStatu == "close") {
this.setData({
showModalStatus: false
})
}
}.bind(this), 200)
// 显示
if (currentStatu == "open") {
this.setData({
showModalStatus: true
})
}
},
在小程序中，不允许直接d出用户授权的选择框，所以需要开发人员在界面上来设置提示信息，诱导用户点击，然后完成用户数据的录入和存取。在开发的过程中，某些请求是依托用户登录之后获取到的openId才能继续执行的，所以在页面上，某些数据渲染之前需要判断用户是否登陆，如若没有登录，怎样设计更好的交互来让用户登录。
使用小程序时，首先会进入到app.js这个文件中，这个文件里包含了俩个方法，一个是wx.login()，另一个是wx.getSetting()，wx.login()的目的是为了在用户登陆之后获取到一个对应的 code 值，然后通过这个值去自己的后台换取一个openId；wx.getSetting()第一是为了判断用户的授权范围，另一个是获取对应权限内的信息，比如说，用户授权小程序可以使用自己的基本信息，就可以在这个方法中获取到用户的头像、微信名、微信设置的城市这些字段，这就是一些需要掌握的基本流程，具体怎么实现登录呢？
在小程序中，官方给出了一种解决方案-button按钮：
在这个按钮中，有几个属性：
● type ：按钮的类型，可以设置为primary，背景色为绿色
● wx:if ：显示条件，内容分别为hasUserInfo和canIUse俩个字段，同时为真即可显示（俩个字段均需要在data中初始化赋值）
● open-type ：按钮的功能类型，getUserInfo是为了获取基本信息（也可以设置为其他→getPhoneNumber：获取用户手机号）
● bindgetuserinfo ：绑定的点击事件。在js中写对应的逻辑
在用户点击按钮之后，会出现一个d窗，确定用户是否授权 ：
当用户点击允许之后，进入我们绑定的getUserInfo函数中：
在执行逻辑中，首先通过wx.login()方法获取到用户对应的openId，方便后续的 *** 作，然后再通过wx.getUserInfo()来获取到用户的基本信息，发送请求，将基本信息入库存储，或者展示到页面上，就完成了登录流程。
1.在登陆中可能会涉及到多个页面登陆成功之后的状态同步，可以通过 app.gloableData 来实现，在全局对象中设置一个字段，然后不论在哪个页面实现了登录，都可以通过全局对象来完成更新。
2.在 获取用户信息 的时候，有时候需要获取的是 中文类型 的数据，可以在 wx.getSetting() 的请求体中加一个 lang:'zh_CN'。 这样获取到的数据就是中文格式的了
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）