一,项目展示
我开发的是一个教育平台(小程序版本),之前也是本人开发的一个vue+mintUI的移动端项目,现在用前面三章讲得那些基本框架就ok了,现在开看一下项目吧。
大致就是这样,前面还有一个登陆页。
二,细节
1.登录
之前的默认登录在未来微信官方会弃用,而替换成必须通过button按钮才能登录的形式。
<button open-type="getUserInfo" @getuserinfo="getUserInfo" @tap="getUserInfo1">
<img src="../../../static/images/wechart1.png" class="icon_wechart"/>
{{name}}
</button>
// 点击事件
getUserInfo1 () {
// 判断小程序的API,回调,参数,组件等是否在当前版本可用。 为false 提醒用户升级微信版本
if (wx.canIUse('button.open-type.getUserInfo')) {
// 用户版本可用
} else {
wx.showToast({
title: '请更新微信版本',
duration: 2000
})
}
},
getUserInfo (e) {
console.log(e);
if (e.mp.detail.rawData) {
// 用户按了允许授权按钮
this.userInfo = e.mp.detail.userInfo;
wx.setStorageSync('userInfo', this.userInfo);
this.login();
wx.switchTab({
url: '../info/main'
})
} else {
// 用户按了拒绝按钮
console.log('用户按了拒绝按钮')
}
},
这样微信登录成功后去做你想要做的,如跳转。。等
2.select多选
小程序并不支持,而select单选可以用picker来代替,多选就只能用checkbox-group来替换了。
<checkbox-group @change="checkboxChange">
<label class="weui-cell weui-check__label" v-for="item in majorOptions" :key="index">
<checkbox class="weui-check" :value="item.value" :checked="item.checked" />
<div class="weui-cell__hd weui-check__hd_in-checkbox">
<icon class="weui-icon-checkbox_circle" type="circle" size="23" v-if="!item.checked"></icon>
<icon class="weui-icon-checkbox_success" type="success" size="23" v-if="item.checked"></icon>
</div>
<div class="weui-cell__bd">{{item.label}}</div>
</label>
</checkbox-group>
将这个checkbox-group放在div里,定位到某处,默认隐藏,点击显示。
3.弹窗
可以直接由小程序原生组件,还是很好用的
wx.showModal({
title: '提示',
content: '您确定要退出吗?',
confirmText: "确定",
cancelText: "取消",
success: function (res) {
console.log(res);
if (res.confirm) {
_that.close()
} else {
}
}
});