微擎平台 —— iView-admin 后台管理系统 && 小程序
一、iView-admin 后台管理系统的搭建
搭建平台的官方地址：https://github.com/iview/iview-admin
1.富文本编辑器
1> 发现问题：鼠标一旦移开编辑栏，编辑栏的下拉框就消失。截图如下：
问题所在：层级问题。修改z-index
解决办法：
.w-e-menu{
z-index: 2!important;
}
.w-e-text-container{
z-index: 1!important;
}
2> table里显示富文本内容
{
title: '描述',
key: 'desc',
render: (h, params) => {
return h('div', {
domProps: {
innerHTML: params.row.desc
},
style: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
textAlign: 'justify',
textJustify: 'inter-ideograph'
}
})
}
},
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
}Powered by 微擎 v{IMS_VERSION} © 2014-2015 www.we7.cc{else}{$_W['setting']['copyright']['footerleft']}{/if}
{if !empty($_W['setting']['copyright']['icp'])}{/if}
本地显示如下:
线上如下：
各种报错综合
1.访问出错
具体表现：在访问接口中，多了一个/web/
解决方法：定义的接口前面多加一个 /
如：const front = ‘/app/index.php?i=’ + window.allData.uniacid + ‘&m=xxx_xxx&c=entry&do=index’
各类组件问题集锦
1.Select 数据被替换
问题描述： 原来数据里的某字段为“15”，打开模态框以后，数据为undefined
解决办法：
//方法 加载select的时候，它会替换modalData里的数据
changeNet (val) {
if (val) {
this.modalData.netid = val
}
},
二、小程序 + 微擎
1.接入微擎，登录&获取用户信息
引入
index.wxml
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
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.下拉，上滑
数据已更新
没有多余的消息了
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)
}
})