一、iView-admin 后台管理系统的搭建
1.富文本编辑器
发现问题：鼠标一旦移开编辑栏，编辑栏的下拉框就消失。截图如下：问题所在：层级问题。修改z-index
解决办法：
2.权限管理–侧边栏展示标签&按钮权限
需求：不同身份的人看到的导航栏标签不同
解決办法：
导航栏如图：设置按钮如下：期待…
3.接入微擎，单页面应用框架刷新404问题
发现问题：因为要接入微擎平台，从微擎平台跳到这个后台管理系统，而微擎的域名很长一大段（例如：https://www.ceshi.cn/web/index.php?c=site&a=entry&do=index&m=xxx&version_id=xx/login）
mode:hostory —— https://www.ceshi.cn/login（问题没解决前，网址是这样的）
bug —— 1. 从微擎到后台系统，偶尔404 2. 刷新本页面404
解决办法：原先的history，模式改为 hash，网址就变成了（https://www.ceshi.cn/web/index.php?c=site&a=entry&do=index&m=xxx&version_id=xx/#login）页面刷新也ok
二、小程序 + 微擎
1.接入微擎，登录&获取用户信息
引入
index.wxml
<view class="container">
<button
open-type="getUserInfo"
bindgetuserinfo="GetUserInfoBtn">
授权登录
</button>
</view>
index.js
GetUserInfoBtn(e) {//获取用户信息按钮事件（包括授权弹框）
if (e.detail.errMsg == "getUserInfo:ok") {//允许授权,开始登录跳转
this.Login();
}
},
Login() {//授权登录
var that = this;
app.util.getUserInfo(function (info) {//微擎接口（获取用户数据）
var data = {
openid: info.openid,
name: info.wxInfo.nickName,
avatar: info.wxInfo.avatarUrl
}
app.POST("user", data, function (res) {//微擎自定登录接口（获取用户信息）
if (res.data.errno === 0) {
//获取接口返回的数据，并跳转页面
}
else {
wx.showToast({
title: '登陆失败',
icon: 'warn',
duration: 2000
})
}
});
});
},
2.富文本解析 – wxparse
引入插件 wxparse
about.wxml
<view class="container">
<rich-text nodes="{{article}}"></rich-text>
</view>
about.js
var WxParse = require('../../../utils/wxParse/wxParse.js')
Page({
/**
* 页面的初始数据
*/
data: {
article: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getData()
},
//获取关于我们的内容
getData(){
const _this = this
app.POST("getdata", {}, function (res) {
if(res.data.errno === 0){
const con = res.data.data.about
_this.setData({
article: con
})
}else{
wx.showToast({
title: '网络错误',
icon: 'warn',
duration: 2000
})
}
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var that = this
if(this.data.article != ''){
WxParse.wxParse('article', 'html', article, that, 5);
}
}
})
about.wxss
@import '../../../utils/wxParse/wxParse.wxss';
3.返回上一页，页面刷新
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//刷新上一页
var pages = getCurrentPages(); // 获取当前页面的页桢 打印出来是 [V, V]
if (pages.length > 1) {
//上一个页面实例对象
var prePage = pages[pages.length - 2];
//关键在这里,这里面是触发上个界面
prePage.onLoad()
// 具体的要根据自己的来查看所要传的参数，或者changeData不传形参，直接调用
}
},
4.倒计时
Page({
/**
* 页面的初始数据
*/
data: {
id:1,
time: '',//倒计时
timer: '',
days: '',
hours: '',
minutes: '',
seconds: ''
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
if(this.data.id != ''){
this.getData()
}
},
//获取数据详情
getData(){
const _this = this
app.POST('detail',{id:_this.data.id},function(res){
_this.setData({
time: res.data.data.time
})
_this.countDown()
})
},
// 倒计时
countDown(){
var that = this;
let date = that.data.time
if(date < 0){
that.setData({
hours: '00',
minutes: '00',
seconds: '00',
time: date
})
}else{
that.setData({
timer: setInterval(() => {
date--;
var time = date
that.setData({
days: parseInt(time / (60 * 60 * 24)) > 9 ? parseInt(time / ( 60 * 60 * 24)) : '0' + parseInt(time / (60 * 60 * 24)),
hours: parseInt((time % ( 60 * 60 * 24)) / (60 * 60)) > 9 ? parseInt((time % ( 60 * 60 * 24)) / (60 * 60)) : '0' + parseInt((time % (60 * 60 * 24)) / (60 * 60)),
minutes: parseInt((time % (60 * 60)) / (60)) > 9 ? parseInt((time % (60 * 60)) / (60)) : '0' + parseInt((time % (60 * 60)) / (60)),
seconds: parseInt(time % (60))> 9 ? parseInt(time % (60)): '0' + parseInt(time % (60)),
time: date
})
if (date == 0) {
clearInterval(that.data.timer)
}
}, 1000)
})
}
}
})
5.下拉，上滑
<view class="container">
<view wx:if="{{isUpper}}" class="lower-con">数据已更新</view>
<!-- 问题展示开始 -->
<block wx:for="{{lists}}" wx:key="idx">
</block>
<!-- 问题展示结束 -->
<view wx:if="{{isLower}}" class="lower-con">没有多余的消息了</view>
</view>
Page({
data: {
lists:[],
current: 1,
isUpper: false,
isLower: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getData()
},
//获取数据
getData(){
const data = {}
const _this = this
app.POST('lists', data, function (res) {
if (res.data.errno === 0) {
if (_this.data.current > 1 && res.data.data.data.length === 0) {
_this.setData({
isLower: true
})
} else {
_this.setData({
lists: res.data.data.data
})
}
} else {
wx.showToast({
title: '网络错误',
icon: 'warn',
duration: 2000
})
}
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
const _this = this
if (_this.data.current == 1){
var timeIn = setTimeout(function () {
_this.setData({
isUpper: true
})
}, 3000)
var timeOut = setTimeout(function () {
_this.setData({
isUpper: false
})
}, 6000)
}else{
_this.setData({
current: _this.data.current - 1
})
this.getData()
}
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.setData({
current: this.data.current + 1
})
this.getData()
const _this = this
var timeOut = setTimeout(function () {
_this.setData({
isLower: false
})
}, 6000)
}
})